diff --git a/actions/auth-action.ts b/actions/auth-action.ts new file mode 100644 index 0000000..27bf8c0 --- /dev/null +++ b/actions/auth-action.ts @@ -0,0 +1,18 @@ +// app/actions.ts (or lib/actions.ts) +"use server"; // <--- IMPORTANT: This file contains Server Actions + +import { signIn as nextAuthSignIn, signOut as nextAuthSignOut } from "@/auth"; + +// Define your server action to handle sign-in +export async function handleSignInAction(provider: string = "github") { + // You can add any pre-sign-in logic here if needed + await nextAuthSignIn(provider); + // You can add any post-sign-in logic or revalidates here +} + +// Define your server action to handle sign-out +export async function handleSignOutAction() { + // You can add any pre-sign-out logic here if needed + await nextAuthSignOut(); + // You can add any post-sign-out logic or revalidates here +} diff --git a/app/(website)/about/page.tsx b/app/(website)/about/page.tsx new file mode 100644 index 0000000..917dd0c --- /dev/null +++ b/app/(website)/about/page.tsx @@ -0,0 +1,541 @@ +import Image from "next/image"; +import { + FaHandshake, + FaBullseye, + FaUsers, + FaCheckCircle, + FaHeart, + FaComments, + FaShieldAlt, + FaCogs, + FaChartLine, + FaMicrochip, + FaBriefcase, + FaSyncAlt, + FaUserCheck, + FaProjectDiagram, +} from "react-icons/fa"; + +const leadershipTeam = [ + { + id: 1, + name: "Michael Shapiro", + title: "Managing Director", + imageUrl: "/images/profile1.jpg", + bio: "A seasoned leader and innovator with over 25 years of experience, driving strategic growth and fostering a culture of excellence within OMS.", + linkedinUrl: "#", + }, + { + id: 2, + name: "Gareth Corbishley", + title: "Director", + imageUrl: "/images/profile2.jpg", + bio: "Expert in operational efficiency and technological implementation, ensuring seamless project delivery and client satisfaction.", + linkedinUrl: "#", + }, + { + id: 3, + name: "Darryl Govender", + title: "Director", + imageUrl: "/images/profile3.jpg", + bio: "Specializes in aligning cutting-edge technology solutions with complex business needs to unlock transformative results.", + linkedinUrl: "#", + }, +]; + +const coreValues = [ + { + icon: FaCheckCircle, + title: "Service", + description: + "Dedicated to providing outstanding service at every touchpoint, meeting the highest standards, and creating lasting impact for our clients.", + }, + { + icon: FaHandshake, + title: "Accountability", + description: + "Taking ownership of our actions and delivering on promises with transparency. Our commitment fosters trust and ensures we consistently meet client expectations.", + }, + { + icon: FaHeart, + title: "Passion", + description: + "Driven by a passion for innovation, we embrace new ideas and technologies, constantly seeking ways to improve and deliver creative, boundary-pushing solutions.", + }, + { + icon: FaComments, + title: "Communication", + description: + "Clear, consistent, and proactive communication is central. We ensure all stakeholders are aligned, informed, and empowered, fostering collaboration.", + }, + { + icon: FaShieldAlt, + title: "Trust", + description: + "Cultivating trust through ethical practices, honesty, and transparency. We uphold the highest integrity for long-term, mutually beneficial relationships.", + }, +]; + +const ourApproach = [ + { + icon: FaProjectDiagram, + title: "Strategic Alignment", + description: + " We begin by deeply understanding your business objectives, challenges, and long-term vision to ensure every solution delivers strategic value.", + }, + { + icon: FaUserCheck, + title: "Client-Centric Collaboration", + description: + "We believe in true partnership. You're involved throughout the process, ensuring transparency, feedback loops, and solutions tailored precisely to your needs.", + }, + { + icon: FaSyncAlt, + title: "Agile & Adaptive Delivery", + description: + "Leveraging agile methodologies allows us to be flexible, adapt to changing requirements, and deliver incremental value faster, ensuring projects stay on track and relevant.", + }, + { + icon: FaCogs, + title: "Technical Excellence", + description: + "Our commitment to technical excellence means employing best practices, rigorous testing, and seasoned expertise to build robust, scalable, and maintainable solutions.", + }, +]; + +const industryExpertise = [ + { + icon: FaBriefcase, + industry: "Financial Services & Fintech", + details: + "Deep understanding of regulatory landscapes, security requirements, and digital transformation needs within banking, insurance, and investment sectors. We build secure, compliant, and innovative fintech solutions.", + }, + { + icon: FaBriefcase, + industry: "Automotive", + details: + "Experience in optimizing supply chains, developing connected car solutions, enhancing customer experiences, and leveraging data analytics for the automotive industry.", + }, + { + icon: FaBriefcase, + industry: "Technology", + details: + "Partnering with tech companies to accelerate product development, provide specialized engineering talent, and build scalable cloud-native applications.", + }, + { + icon: FaBriefcase, + industry: "Retail/E-commerce", + details: "Describe experience in this sector.", + }, +]; + +export default function AboutUsPage() { + return ( +
+ {" "} + {/* Prevent horizontal scroll */} + {/* Section 1: Hero / Company Overview */} +
+ {/* Optional decorative background elements */} +
+
{" "} + {/* Add a subtle background image */} +
+

+ About Owethu Managed Services +

+

+ Your strategic partner in navigating the digital frontier. We fuse + deep technical expertise with a passion for innovation to craft + bespoke IT solutions that drive tangible business results and unlock + future potential. +

+
+
+ {/* Section 2: Our Genesis & Purpose */} +
+
+
+
+

+ Forged in Innovation,
Driven + by Purpose +

+

+ Expand on the founding story/motivation. E.g., Owethu Managed + Services was born from a clear vision: to harness the + transformative power of technology not just to solve problems, + but to proactively create opportunities for businesses to + thrive. We saw a need for a partner who truly understands both + technology's potential and the unique challenges modern + organizations face. +

+

+ Elaborate on the journey. E.g., Our journey has been defined by + a relentless pursuit of knowledge, adaptation to the + ever-evolving tech landscape, and an unwavering commitment to + client success. This focus has established us as trusted + advisors and thought leaders in digital transformation. +

+
+
+ {/* Replace with a relevant, high-quality image representing innovation or teamwork */} + Team collaborating on innovative solutions +
+
+
+
+ {/* Section 3: Vision & Mission (Similar layout, refined look) */} +
+
+

+ Our North Star +

+

+ Guiding our strategy, actions, and partnerships. +

+
+
+
+ {/* Vision Card */} +
+ +

+ Our Vision +

+

+ "To be global leaders in delivering cutting-edge IT + solutions, pushing the boundaries of what's possible, and + transforming industries for the better. We aim to empower + organisations to break through technological barriers and + achieve greater success." +

+
+ {/* Mission Card */} +
+ +

+ Our Mission +

+

+ "We are dedicated to creating tailored, innovative + solutions that drive business success. By combining expertise + with cutting-edge technology, we solve complex problems and + enable our clients to achieve outstanding results. We partner + closely with clients to ensure every solution aligns with their + unique needs for long-term success." +

+
+
+
+
+ {/* Section 4: Our Approach & Methodology */} +
+
+
+

+ How We Deliver Excellence +

+

+ Our methodology is built on collaboration, precision, and a + relentless focus on delivering impactful results. We tailor our + process to fit your specific project needs. +

+
+
+ {ourApproach.map((item) => ( +
+ +

+ {item.title} +

+

+ {item.description} +

+
+ ))} +
+
+
+ {/* Section 5: Industry Expertise */} +
+
+
+
+ +

+ Deep Domain Knowledge +

+

+ We combine broad technological capabilities with specialized + expertise across key industries, understanding the unique + challenges and opportunities within each sector. +

+
+
+ {industryExpertise.map((exp) => ( +
+

+ {exp.industry} +

+

+ {exp.details} +

+
+ ))} +
+
+
+
+ {/* Section 6: Technology Philosophy */} +
+
+ +

+ Smart Technology, Applied Wisely +

+

+ We don't chase trends; we select and implement technologies + strategically. Our focus is on building solutions that are: +

+
+
+

+ Scalable & Future-Proof +

+

+ Designed to grow with your business and adapt to future + technological advancements. +

+
+
+

+ Robust & Reliable +

+

+ Built with quality and security at the core, ensuring dependable + performance. +

+
+
+

+ Best-Fit Solutions +

+

+ Chosen based on your specific needs, budget, and existing + infrastructure, not just the latest hype. +

+
+
+
+
+ {/* Section 7: Core Values (Reusing previous structure, adjusting background) */} +
+
+

+ Our Foundational Values +

+
+ {coreValues.map((value) => ( +
+ +

+ {value.title} +

+

+ {value.description} +

+
+ ))} +
+
+
+ {/* Section 8: The OMS Partnership */} +
+
+
+
+ {/* Replace with an image representing partnership or client collaboration */} + Client partnership and collaboration +
+
+ +

+ More Than Vendors,
{" "} + We're Partners +

+

+ We believe the best results come from true collaboration. We + invest time in understanding your culture, goals, and + challenges, working alongside your team as an extension of your + own capabilities. +

+

+ This means open communication, shared goals, proactive + problem-solving, and a long-term commitment to your success, + extending far beyond project completion. +

+
+
+
+
+ {/* Section 9: Our Leadership Team */} +
+
+
+

+ Meet Our Leadership +

+

+ Slightly enhance the intro. E.g., Guided by experience and a + passion for innovation, our leadership team fosters a culture of + excellence and empowers our experts to deliver outstanding results + for our clients. +

+
+ +
+ {/* Added justify-center */} + {leadershipTeam.map((member) => ( +
+ {/* Added max-width and mx-auto for centering if fewer than 3 items */} +
+ {/* Slightly taller image */} + {`Photo +
+
+

+ {member.name} +

+

+ {member.title} +

+

+ {member.bio} +

+ {member.linkedinUrl && member.linkedinUrl !== "#" && ( + + {/* Using a simple text link for cleanliness */} + Connect on LinkedIn + + )} +
+
+ ))} +
+ {/* Button removed as requested */} +
+
+ {/* Section 10: Commitment to Impact (Optional, but adds value) */} +
+
+ +

+ Driving Measurable Impact +

+

+ Ultimately, our success is measured by yours. We are committed to + delivering solutions that not only meet technical requirements but + also drive efficiency, foster growth, enhance user experiences, and + provide a clear return on investment. Let's build a successful + future, together. +

+ {/* Optional CTA to contact */} +
+ + Start the Conversation + +
+
+
+
+ ); +} diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/icon.svg b/app/icon.svg new file mode 100644 index 0000000..e88570a --- /dev/null +++ b/app/icon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/Header.tsx b/components/Header.tsx index 80d02b3..636715a 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,303 +1,21 @@ -// components/Header.tsx -"use client"; +// components/Header.tsx (Server Component) +import React from "react"; +import { auth } from "@/auth"; // Only need auth (for session) from here now -import React, { useState } from "react"; -import Link from "next/link"; -import Image from "next/image"; -// Use usePathname only if needed for active state logic not shown here -// import { usePathname } from "next/navigation"; -import { - FiChevronDown, - FiClipboard, - FiArrowRight, - FiMenu, - FiX, -} from "react-icons/fi"; -import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists +import HeaderClient from "./HeaderClient"; +import { handleSignInAction, handleSignOutAction } from "@/actions/auth-action"; -const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder - -// --- Basic Dropdown Component --- -// Using semantic variables for background, text, and borders -type DropdownMenuProps = { - trigger: React.ReactNode; - children: React.ReactNode; - menuClasses?: string; -}; -const DropdownMenu = ({ - trigger, - children, - menuClasses = "w-48", -}: DropdownMenuProps) => ( - // Using group-focus-within for better keyboard/touch accessibility -
- -
-
{children}
-
-
-); - -// Dropdown Link component using semantic variables -type DropdownLinkProps = { - href: string; - children: React.ReactNode; - onClick?: () => void; // Added onClick for mobile menu closure -}; -const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => ( - - {children} - -); -// --- End Dropdown Component --- - -const Header = () => { - // If you need pathname for active states later: - // const pathname = usePathname() || "/"; - // const isActive = (path: string) => pathname === path; - // const isActive = (path: string) => false; // Simple placeholder - - const [isMenuOpen, setIsMenuOpen] = useState(false); - - const toggleMenu = () => setIsMenuOpen((open) => !open); - // Close menu when a link is clicked - const handleMobileLinkClick = () => setIsMenuOpen(false); - - const currentLogo = omsLogoUrl; +const Header = async () => { + // Fetch session data on the server + const session = await auth(); + // Pass the session data and YOUR Server Actions as props return ( - // Use semantic variables for header background and border -
- {/* Top Row */} -
-
- {/* Logo */} - - OMS Logo - {/* Use semantic variable for text color */} - - Owethu Managed Services - - - - {/* Desktop Navigation */} - - - {/* Right Utilities (Desktop) */} -
- - - {/* Use semantic variables for button */} - - - Request Demo - -
- - {/* Mobile Buttons */} -
- {/* Theme toggle appears first */} - -
-
-
- - {/* Secondary Row */} -
- {" "} - {/* Keep gold background */} -
- {/* Hide on mobile */} -
- {/* Use primary-foreground for text color */} - - {/* Use primary-foreground for link */} - - Explore Our Offerings - - -
-
-
- - {/* Mobile Menu Panel */} -
- {/* Use semantic variable for text color */} - -
-
+ ); }; diff --git a/components/HeaderClient.tsx b/components/HeaderClient.tsx new file mode 100644 index 0000000..9e92ca1 --- /dev/null +++ b/components/HeaderClient.tsx @@ -0,0 +1,370 @@ +// components/HeaderClient.tsx +"use client"; + +import React, { useState } from "react"; +import Link from "next/link"; +import Image from "next/image"; +// Use usePathname only if needed for active state logic not shown here +// import { usePathname } from "next/navigation"; +import { + FiChevronDown, + FiClipboard, + FiArrowRight, + FiMenu, + FiX, + FiLogIn, // Import the login icon +} from "react-icons/fi"; +import ThemeToggle from "./ThemeToggle"; // Assuming ThemeToggle component exists +import type { Session } from "@auth/core/types"; // Import Session type for props + +const omsLogoUrl = "/oms-logo.svg"; // Ensure this is in your /public folder + +// --- Basic Dropdown Component --- +// (Keep the DropdownMenu and DropdownLink component definitions here as before) +type DropdownMenuProps = { + trigger: React.ReactNode; + children: React.ReactNode; + menuClasses?: string; +}; +const DropdownMenu = ({ + trigger, + children, + menuClasses = "w-48", +}: DropdownMenuProps) => ( + // Using group-focus-within for better keyboard/touch accessibility +
+ +
+
{children}
+
+
+); + +type DropdownLinkProps = { + href: string; + children: React.ReactNode; + onClick?: () => void; // Added onClick for mobile menu closure +}; +const DropdownLink = ({ href, children, onClick }: DropdownLinkProps) => ( + + {children} + +); +// --- End Dropdown Component --- + +// --- Define Props for the Client Component --- +type HeaderClientProps = { + session: Session | null; // Accept session from the server component + handleSignIn: () => void; // Pass sign-in handler + handleSignOut: () => void; // Pass sign-out handler +}; + +// --- The Main Client Component --- +const HeaderClient = ({ + session, + handleSignIn, + handleSignOut, +}: HeaderClientProps) => { + // --- Client-side state and hooks --- + const [isMenuOpen, setIsMenuOpen] = useState(false); + // const pathname = usePathname() || "/"; // Uncomment if needed + // const isActive = (path: string) => pathname === path; // Uncomment if needed + + const toggleMenu = () => setIsMenuOpen((open) => !open); + const handleMobileLinkClick = () => setIsMenuOpen(false); + + const currentLogo = omsLogoUrl; + + return ( + // Use semantic variables for header background and border +
+ {/* Top Row */} +
+
+ {/* Logo */} + + OMS Logo + {/* Use semantic variable for text color */} + + Owethu Managed Services + + + + {/* Desktop Navigation */} + + + {/* Desktop Utilities */} +
+ + + {/* Request Demo Button */} + + + Request Demo + + + {/* --- Auth Section --- */} + {session?.user ? ( + // Logged In: User Dropdown + + {session.user.name + {/* Optionally hide name on smaller desktop screens */} + + {session.user.name?.split(" ")[0]} + +
+ } + > + {/* Sign Out inside the dropdown */} + + + ) : ( + // Logged Out: Icon Button to Sign In + + )} + {/* --- End Auth Section --- */} +
+ + {/* Mobile Buttons */} +
+ {/* Theme toggle remains */} + +
+
+ + + {/* Secondary Row (Desktop Only) */} +
+
+
+ + + Explore Our Offerings + + +
+
+
+ + {/* Mobile Menu Panel */} +
+ {/* Use semantic variable for text color */} + +
+
+ ); +}; + +export default HeaderClient; diff --git a/next.config.ts b/next.config.ts index e9ffa30..1a14d6b 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,9 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + images: { + domains: ["avatars.githubusercontent.com"], + }, }; export default nextConfig; diff --git a/public/images/partners.jpg b/public/images/partners.jpg new file mode 100644 index 0000000..55ce0c6 Binary files /dev/null and b/public/images/partners.jpg differ diff --git a/public/images/profile1.jpg b/public/images/profile1.jpg new file mode 100644 index 0000000..0d3e0d2 Binary files /dev/null and b/public/images/profile1.jpg differ diff --git a/public/images/profile2.jpg b/public/images/profile2.jpg new file mode 100644 index 0000000..e488eb5 Binary files /dev/null and b/public/images/profile2.jpg differ diff --git a/public/images/profile3.jpg b/public/images/profile3.jpg new file mode 100644 index 0000000..63d9513 Binary files /dev/null and b/public/images/profile3.jpg differ diff --git a/public/images/team-collaborative.png b/public/images/team-collaborative.png new file mode 100644 index 0000000..489c653 Binary files /dev/null and b/public/images/team-collaborative.png differ