diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index 22b6646..2298a1e 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -11,6 +11,7 @@ import Team from "@/components/Team";
 import Pricing from "@/components/Pricing";
 import Newsletter from "@/components/Newsletter";
 import FAQ from "@/components/FAQ";
+import OpenSource from "@/components/OpenSource";
 import Footer from "@/components/Footer";
 import ScrollToTop from "@/components/ScrollToTop";
 
@@ -30,6 +31,7 @@ export default function Home() {
             <Pricing />
             <Newsletter />
             <FAQ />
+            <OpenSource />
             <Footer />
             <ScrollToTop />
         </>
diff --git a/app/globals.css b/app/globals.css
index 52a8d2d..31dfb8c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,76 +1,128 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    html {
+        scroll-behavior: smooth !important;
+    }
+}
 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
+/* *=========== Orange theme =========== */
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 240 10% 3.9%;
+        --primary: 20.5 100% 62%;
+        --primary-foreground: 355.7 100% 97.3%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 20.5 100% 62%;
+        --radius: 0.5rem;
+    }
 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-  }
+    .dark {
+        --background: 20 14.3% 4.1%;
+        --foreground: 0 0% 95%;
+        --card: 24 9.8% 10%;
+        --card-foreground: 0 0% 95%;
+        --popover: 0 0% 9%;
+        --popover-foreground: 0 0% 95%;
+        --primary: 20.5 96.9% 57.5%;
+        --primary-foreground: 144.9 80.4% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 15%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 12 6.5% 15.1%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 85.7% 97.3%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 20.5 96.9% 57.5%;
+    }
 }
- 
+
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
\ No newline at end of file
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+/* HeroCards background shadow */
+.shadow {
+    position: absolute;
+    background: hsl(var(--primary) / 0%);
+    border-radius: 24px;
+    rotate: 35deg;
+
+    width: 260px;
+    top: 200px;
+    height: 400px;
+    filter: blur(150px);
+    animation: shadow-slide infinite 4s linear alternate;
+}
+
+@keyframes shadow-slide {
+    from {
+        background: hsl(var(--primary) / 20%);
+        right: 460px;
+    }
+    to {
+        background: hsl(var(--primary) / 80%);
+        right: 160px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .shadow {
+        top: 70px;
+    }
+
+    @keyframes shadow-slide {
+        from {
+            background: hsl(var(--primary) / 20%);
+            right: 460px;
+        }
+        to {
+            background: hsl(var(--primary) / 50%);
+            right: 160px;
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .shadow {
+        top: 70px;
+        width: 100px;
+        height: 350px;
+        filter: blur(60px);
+    }
+
+    @keyframes shadow-slide {
+        from {
+            background: hsl(var(--primary) / 20%);
+            right: 280px;
+        }
+        to {
+            background: hsl(var(--primary) / 30%);
+            right: 100px;
+        }
+    }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 7eb5c8f..f29aed6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { DM_Sans } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const dmsans = DM_Sans({ subsets: ["latin"] });
 
@@ -11,12 +12,20 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
     children,
-}: Readonly<{
+}: {
     children: React.ReactNode;
-}>) {
+}) {
     return (
-        <html lang="en">
-            <body className={dmsans.className}>{children}</body>
+        <html lang="en" suppressHydrationWarning>
+            <body className={dmsans.className}>
+                <ThemeProvider
+                    attribute="class"
+                    defaultTheme="light"
+                    enableSystem
+                >
+                    {children}
+                </ThemeProvider>
+            </body>
         </html>
     );
 }
diff --git a/components/About.tsx b/components/About.tsx
index b26ae9a..5013432 100644
--- a/components/About.tsx
+++ b/components/About.tsx
@@ -1,7 +1,40 @@
-import React from "react";
+import Statistics from "./Statistics";
 
 const About = () => {
-    return <div>About</div>;
+    return (
+        <section id="about" className="container py-24 sm:py-32">
+            <div className="bg-muted/50 border rounded-lg py-12">
+                <div className="px-6 flex flex-col-reverse md:flex-row gap-8 md:gap-12">
+                    <img
+                        src="./pilot.png"
+                        alt=""
+                        className="w-[300px] object-contain rounded-lg"
+                    />
+                    <div className="flex flex-col justify-between">
+                        <div className="pb-6">
+                            <h2 className="text-3xl md:text-4xl font-bold">
+                                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                                    About{" "}
+                                </span>
+                                Company
+                            </h2>
+                            <p className="text-xl text-muted-foreground mt-4">
+                                Lorem ipsum dolor sit amet, consectetur
+                                adipiscing elit, sed do eiusmod tempor
+                                incididunt ut labore et dolore magna aliqua. Ut
+                                enim ad minim veniam, quis nostrud exercitation
+                                ullamco laboris nisi ut aliquip ex ea commodo
+                                consequat. Lorem ipsum dolor sit amet,
+                                consectetur adipiscing elit.
+                            </p>
+                        </div>
+
+                        <Statistics />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
 };
 
 export default About;
diff --git a/components/CTA.tsx b/components/CTA.tsx
index acaaa13..f31ce6f 100644
--- a/components/CTA.tsx
+++ b/components/CTA.tsx
@@ -1,7 +1,36 @@
-import React from "react";
+import { Button } from "./ui/button";
 
 const CTA = () => {
-    return <div>CTA</div>;
+    return (
+        <section id="cta" className="bg-muted/50 py-16 my-24 sm:my-32">
+            <div className="container lg:grid lg:grid-cols-2 place-items-center">
+                <div className="lg:col-start-1">
+                    <h2 className="text-3xl md:text-4xl font-bold ">
+                        All Your
+                        <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                            {" "}
+                            Ideas & Concepts{" "}
+                        </span>
+                        In One Interface
+                    </h2>
+                    <p className="text-muted-foreground text-xl mt-4 mb-8 lg:mb-0">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Eaque, beatae. Ipsa tempore ipsum iste quibusdam illum
+                        ducimus eos. Quasi, sed!
+                    </p>
+                </div>
+
+                <div className="space-y-4 lg:col-start-2">
+                    <Button className="w-full md:mr-4 md:w-auto">
+                        Request a Demo
+                    </Button>
+                    <Button variant="outline" className="w-full md:w-auto">
+                        View all features
+                    </Button>
+                </div>
+            </div>
+        </section>
+    );
 };
 
 export default CTA;
diff --git a/components/FAQ.tsx b/components/FAQ.tsx
index b3e769c..068c858 100644
--- a/components/FAQ.tsx
+++ b/components/FAQ.tsx
@@ -1,7 +1,83 @@
-import React from "react";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface FAQProps {
+    question: string;
+    answer: string;
+    value: string;
+}
+
+const FAQList: FAQProps[] = [
+    {
+        question: "Is this template free?",
+        answer: "Yes. It is a free ChadcnUI template.",
+        value: "item-1",
+    },
+    {
+        question: "Lorem ipsum dolor sit amet consectetur adipisicing elit?",
+        answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore quidem quam? Consectetur sapiente iste rerum reiciendis animi nihil nostrum sit quo, modi quod.",
+        value: "item-2",
+    },
+    {
+        question:
+            "Lorem ipsum dolor sit amet  Consectetur natus dolores minus quibusdam?",
+        answer: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore qui nostrum reiciendis veritatis necessitatibus maxime quis ipsa vitae cumque quo?",
+        value: "item-3",
+    },
+    {
+        question: "Lorem ipsum dolor sit amet, consectetur adipisicing elit?",
+        answer: "Lorem ipsum dolor sit amet consectetur, adipisicing elit.",
+        value: "item-4",
+    },
+    {
+        question:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur natus?",
+        answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint labore quidem quam? Consectetur sapiente iste rerum reiciendis animi nihil nostrum sit quo, modi quod.",
+        value: "item-5",
+    },
+];
 
 const FAQ = () => {
-    return <div>FAQ</div>;
+    return (
+        <section id="faq" className="container pt-24 sm:pt-32">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                Frequently Asked{" "}
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    Questions
+                </span>
+            </h2>
+
+            <Accordion
+                type="single"
+                collapsible
+                className="w-full AccordionRoot"
+            >
+                {FAQList.map(({ question, answer, value }: FAQProps) => (
+                    <AccordionItem key={value} value={value}>
+                        <AccordionTrigger className="text-left">
+                            {question}
+                        </AccordionTrigger>
+
+                        <AccordionContent>{answer}</AccordionContent>
+                    </AccordionItem>
+                ))}
+            </Accordion>
+
+            <h3 className="font-medium mt-4">
+                Still have questions?{" "}
+                <a
+                    href="#"
+                    className="text-primary border-primary border-b-2 hover:border-0"
+                >
+                    Contact us
+                </a>
+            </h3>
+        </section>
+    );
 };
 
 export default FAQ;
diff --git a/components/Features.tsx b/components/Features.tsx
index 36e9364..ea3e19f 100644
--- a/components/Features.tsx
+++ b/components/Features.tsx
@@ -1,7 +1,92 @@
-import React from "react";
+import { Badge } from "./ui/badge";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+
+interface FeatureProps {
+    title: string;
+    description: string;
+    image: string;
+}
+
+const features: FeatureProps[] = [
+    {
+        title: "Responsive Design",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        image: "./growth.png",
+    },
+    {
+        title: "Intuitive user interface",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        image: "./reflecting.png",
+    },
+    {
+        title: "AI-Powered insights",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        image: "./looking-ahead.png",
+    },
+];
+
+const featureList: string[] = [
+    "Dark/Light theme",
+    "Reviews",
+    "Features",
+    "Pricing",
+    "Contact form",
+    "Our team",
+    "Responsive design",
+    "Newsletter",
+    "Minimalist",
+];
 
 const Features = () => {
-    return <div>Features</div>;
+    return (
+        <section id="features" className="container py-24 sm:py-32 space-y-8">
+            <h2 className="text-3xl lg:text-4xl font-bold md:text-center">
+                Many{" "}
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    Great Features
+                </span>
+            </h2>
+
+            <div className="flex flex-wrap md:justify-center gap-4">
+                {featureList.map((feature: string) => (
+                    <div key={feature}>
+                        <Badge variant="secondary" className="text-sm">
+                            {feature}
+                        </Badge>
+                    </div>
+                ))}
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {features.map(({ title, description, image }: FeatureProps) => (
+                    <Card key={title}>
+                        <CardHeader>
+                            <CardTitle>{title}</CardTitle>
+                        </CardHeader>
+
+                        <CardContent>{description}</CardContent>
+
+                        <CardFooter>
+                            <img
+                                src={image}
+                                alt="About feature"
+                                className="w-[200px] lg:w-[300px] mx-auto"
+                            />
+                        </CardFooter>
+                    </Card>
+                ))}
+            </div>
+        </section>
+    );
 };
 
 export default Features;
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 0bfd7da..c1be5e5 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,7 +1,116 @@
-import React from "react";
+import { Logo } from "./Logo";
 
 const Footer = () => {
-    return <div>Footer</div>;
+    return (
+        <footer id="footer">
+            <hr className="w-11/12 mx-auto" />
+
+            <section className="container py-20 grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8">
+                <div className="col-span-full xl:col-span-2">
+                    <a href="/" className="font-bold text-xl flex">
+                        <Logo />
+                    </a>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <h3 className="font-bold text-lg">Follow Us</h3>
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Github
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Twitter
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Dribbble
+                        </a>
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <h3 className="font-bold text-lg">Platforms</h3>
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Web
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Mobile
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Desktop
+                        </a>
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <h3 className="font-bold text-lg">About</h3>
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Features
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Pricing
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            FAQ
+                        </a>
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-2">
+                    <h3 className="font-bold text-lg">Community</h3>
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Youtube
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Discord
+                        </a>
+                    </div>
+
+                    <div>
+                        <a href="#" className="opacity-60 hover:opacity-100">
+                            Twitch
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <section className="container pb-14 text-center">
+                <h3>
+                    &copy; {new Date().getFullYear()} crafted by{" "}
+                    <a
+                        target="_blank"
+                        href="https://github.com/chrisstef"
+                        className="text-primary border-primary border-b-2 hover:border-0"
+                    >
+                        chrisstef
+                    </a>
+                </h3>
+            </section>
+        </footer>
+    );
 };
 
 export default Footer;
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 8656c61..ce8e420 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,7 +1,59 @@
-import React from "react";
+import { Button } from "./ui/button";
+import { buttonVariants } from "./ui/button";
+import { HeroCards } from "./HeroCards";
+import { Icons } from "@/components/Icons";
+import Link from "next/link";
 
 const Hero = () => {
-    return <div>Hero</div>;
+    return (
+        <section className="container grid lg:grid-cols-2 place-items-center py-20 md:py-32 gap-10">
+            <div className="text-center lg:text-start space-y-6">
+                <main className="text-5xl md:text-6xl font-bold">
+                    <h1 className="inline">
+                        <span className="inline bg-gradient-to-r from-[#F596D3] to-[#D247BF] text-transparent bg-clip-text">
+                            Marketing
+                        </span>{" "}
+                        template
+                    </h1>{" "}
+                    for{" "}
+                    <h2 className="inline">
+                        <span className="inline bg-gradient-to-r from-[#61DAFB] via-[#1fc0f1] to-[#03a3d7] text-transparent bg-clip-text">
+                            SaaS
+                        </span>{" "}
+                        ideas.
+                    </h2>
+                </main>
+
+                <p className="text-xl text-muted-foreground md:w-10/12 mx-auto lg:mx-0">
+                    A production-ready and easy to customize template, making it
+                    the perfect starting point for your own project.
+                </p>
+
+                <div className="space-y-4 md:space-y-0 md:space-x-4">
+                    <Button className="w-full md:w-1/3">Get Started</Button>
+
+                    <Link
+                        href="https://github.com/chrisstef/saas-marketing-template.git"
+                        target="_blank"
+                        className={`w-full md:w-1/3 ${buttonVariants({
+                            variant: "outline",
+                        })}`}
+                    >
+                        Github
+                        <Icons.github className="ml-2 h-4 w-4" />
+                    </Link>
+                </div>
+            </div>
+
+            {/* Hero cards sections */}
+            <div className="z-10">
+                <HeroCards />
+            </div>
+
+            {/* Shadow effect */}
+            <div className="shadow"></div>
+        </section>
+    );
 };
 
 export default Hero;
diff --git a/components/HeroCards.tsx b/components/HeroCards.tsx
index 775c6dc..536bcfb 100644
--- a/components/HeroCards.tsx
+++ b/components/HeroCards.tsx
@@ -1,7 +1,162 @@
-import React from "react";
+"use client";
 
-const HeroCards = () => {
-    return <div>HeroCards</div>;
-};
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Badge } from "./ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+    CardFooter,
+} from "@/components/ui/card";
+import { Icons } from "@/components/Icons";
+import Link from "next/link";
+
+export const HeroCards = () => {
+    return (
+        <div className="hidden lg:flex flex-row flex-wrap gap-8 relative w-[700px] h-[500px]">
+            {/* Testimonial */}
+            <Card className="absolute w-[340px] -top-[15px] drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+                <CardHeader className="flex flex-row items-center gap-4 pb-2">
+                    <Avatar>
+                        <AvatarImage
+                            alt=""
+                            src="https://github.com/shadcn.png"
+                        />
+                        <AvatarFallback>JD</AvatarFallback>
+                    </Avatar>
+
+                    <div className="flex flex-col">
+                        <CardTitle className="text-lg">John Doe</CardTitle>
+                        <CardDescription>@john_doe</CardDescription>
+                    </div>
+                </CardHeader>
+
+                <CardContent>This landing page is phenomenal!</CardContent>
+            </Card>
+
+            {/* Team */}
+            <Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+                <CardHeader className="mt-8 flex justify-center items-center pb-2">
+                    <img
+                        src="https://avatars.githubusercontent.com/u/63172663?v=4"
+                        alt="user avatar"
+                        className="absolute grayscale-[0%] -top-12 rounded-full w-24 h-24 aspect-square object-cover"
+                    />
+                    <CardTitle className="text-center">chrisstef</CardTitle>
+                    <CardDescription className="font-normal text-primary">
+                        Frontend Developer
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent className="text-center pb-2">
+                    <p>
+                        I enjoy transforming ideas into functional software that
+                        exceeds expectations.
+                    </p>
+                </CardContent>
+
+                <CardFooter>
+                    <div className="space-x-2">
+                        <Link
+                            href="https://www.linkedin.com/"
+                            target="_blank"
+                            className={buttonVariants({
+                                variant: "ghost",
+                                size: "sm",
+                            })}
+                        >
+                            <span className="sr-only">Linkedin icon</span>
+                            <Icons.linkedin className="h-6 w-4" />
+                        </Link>
+                        <Link
+                            href="https://github.com/chrisstef"
+                            target="_blank"
+                            className={buttonVariants({
+                                variant: "ghost",
+                                size: "sm",
+                            })}
+                        >
+                            <span className="sr-only">Github icon</span>
+                            <Icons.github className="h-6 w-4" />
+                        </Link>
+                        <Link
+                            href="https://twitter.com/"
+                            target="_blank"
+                            className={buttonVariants({
+                                variant: "ghost",
+                                size: "sm",
+                            })}
+                        >
+                            <span className="sr-only">X icon</span>
+                            <Icons.twitter className="h-6 w-4" />
+                        </Link>
+                    </div>
+                </CardFooter>
+            </Card>
 
-export default HeroCards;
+            {/* Pricing */}
+            <Card className="absolute top-[150px] left-[50px] w-72  drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+                <CardHeader>
+                    <CardTitle className="flex item-center justify-between">
+                        Free
+                        <Badge
+                            variant="secondary"
+                            className="text-sm text-primary"
+                        >
+                            Most popular
+                        </Badge>
+                    </CardTitle>
+                    <div>
+                        <span className="text-3xl font-bold">$0</span>
+                        <span className="text-muted-foreground"> /month</span>
+                    </div>
+
+                    <CardDescription>
+                        Lorem ipsum dolor sit, amet ipsum consectetur
+                        adipisicing elit.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <Button className="w-full">Start Free Trial</Button>
+                </CardContent>
+
+                <hr className="w-4/5 m-auto mb-4" />
+
+                <CardFooter className="flex">
+                    <div className="space-y-4">
+                        {[
+                            "4 Team members",
+                            "4 GB Storage",
+                            "Up to 6 pages",
+                        ].map((benefit: string) => (
+                            <div key={benefit} className="flex items-center">
+                                <Icons.check className="text-green-500 w-5 h-5" />
+                                <h3 className="ml-2">{benefit}</h3>
+                            </div>
+                        ))}
+                    </div>
+                </CardFooter>
+            </Card>
+
+            {/* Service */}
+            <Card className="absolute w-[350px] -right-[10px] bottom-[35px]  drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+                <CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
+                    <div className="mt-1 bg-primary/20 p-3 rounded-2xl">
+                        <Icons.bulb className="h-6 w-6 text-orange-500" />
+                    </div>
+                    <div>
+                        <CardTitle>Light & dark mode</CardTitle>
+                        <CardDescription className="text-md mt-2">
+                            Lorem ipsum dolor sit amet consect adipisicing elit.
+                            Consectetur natusm.
+                        </CardDescription>
+                    </div>
+                </CardHeader>
+            </Card>
+        </div>
+    );
+};
diff --git a/components/HowWorks.tsx b/components/HowWorks.tsx
index 8d59afb..26fb198 100644
--- a/components/HowWorks.tsx
+++ b/components/HowWorks.tsx
@@ -1,7 +1,72 @@
-import React from "react";
+import { Icons } from "./Icons";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+
+interface FeatureProps {
+    icon: JSX.Element;
+    title: string;
+    description: string;
+}
+
+const features: FeatureProps[] = [
+    {
+        icon: <Icons.accessibility className="text-orange-500 w-7 h-7" />,
+        title: "Accesibility",
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+    },
+    {
+        icon: <Icons.people className="text-orange-500 w-7 h-7" />,
+        title: "Community",
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+    },
+    {
+        icon: <Icons.scale className="text-orange-500 w-7 h-7" />,
+        title: "Scalability",
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+    },
+    {
+        icon: <Icons.gamification className="text-orange-500 w-7 h-7" />,
+        title: "Gamification",
+        description:
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quas provident cum",
+    },
+];
 
 const HowWorks = () => {
-    return <div>HowWorks</div>;
+    return (
+        <section
+            id="howItWorks"
+            className="container text-center py-24 sm:py-32"
+        >
+            <h2 className="text-3xl md:text-4xl font-bold ">
+                How It{" "}
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    Works{" "}
+                </span>
+                Step-by-Step Guide
+            </h2>
+            <p className="md:w-3/4 mx-auto mt-4 mb-8 text-xl text-muted-foreground">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Veritatis dolor pariatur sit!
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                {features.map(({ icon, title, description }: FeatureProps) => (
+                    <Card key={title} className="bg-muted/50">
+                        <CardHeader>
+                            <CardTitle className="grid gap-4 place-items-center">
+                                {icon}
+                                {title}
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent>{description}</CardContent>
+                    </Card>
+                ))}
+            </div>
+        </section>
+    );
 };
 
 export default HowWorks;
diff --git a/components/Icons.tsx b/components/Icons.tsx
index 6f6be4e..cc55399 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -2,29 +2,27 @@ import {
     AiFillGithub,
     AiFillGoogleCircle,
     AiOutlineClose,
-    AiOutlineEllipsis,
-    AiOutlinePlus,
-    AiOutlineWarning,
-    AiOutlineDollarCircle,
-    AiOutlineBank,
-    AiOutlineDashboard,
 } from "react-icons/ai";
-import { BiCalendar, BiHistory } from "react-icons/bi";
+import { BiCalendar } from "react-icons/bi";
 import {
-    BsActivity,
-    BsCheck2,
     BsChevronDown,
     BsChevronLeft,
     BsChevronRight,
     BsChevronUp,
     BsFire,
 } from "react-icons/bs";
-import { FaRegStar, FaSort, FaUserAlt } from "react-icons/fa";
-import { ImSpinner8, ImStatsBars } from "react-icons/im";
+import {
+    FaRegStar,
+    FaRegLightbulb,
+    FaCheck,
+    FaCode,
+    FaProjectDiagram,
+} from "react-icons/fa";
 import { LuSettings } from "react-icons/lu";
-import { MdDeleteForever, MdOutlineLogout } from "react-icons/md";
-import { RxDashboard, RxMixerHorizontal } from "react-icons/rx";
-import { IoCopy } from "react-icons/io5";
+import { RxDashboard } from "react-icons/rx";
+import { IoAccessibility, IoGameControllerOutline } from "react-icons/io5";
+import { FaXTwitter, FaLinkedin, FaPeopleGroup } from "react-icons/fa6";
+import { LuRadar, LuBarChartHorizontalBig } from "react-icons/lu";
 
 export type IconKeys = keyof typeof icons;
 
@@ -36,11 +34,12 @@ const icons = {
     // Providers
     google: AiFillGoogleCircle,
     github: AiFillGithub,
+    linkedin: FaLinkedin,
+    twitter: FaXTwitter,
 
     // Sections Icons
     dashboard: RxDashboard,
     settings: LuSettings,
-    holdings: AiOutlineDashboard,
 
     // Navigation
     back: BsChevronLeft,
@@ -50,25 +49,18 @@ const icons = {
     close: AiOutlineClose,
 
     // Common
-    trash: MdDeleteForever,
-    spinner: ImSpinner8,
-    userAlt: FaUserAlt,
-    ellipsis: AiOutlineEllipsis,
-    warning: AiOutlineWarning,
-    add: AiOutlinePlus,
-    history: BiHistory,
-    signout: MdOutlineLogout,
     calendar: BiCalendar,
-    sort: FaSort,
     fire: BsFire,
-    statsBar: ImStatsBars,
-    mixer: RxMixerHorizontal,
-    check: BsCheck2,
     star: FaRegStar,
-    copy: IoCopy,
-    dollar: AiOutlineDollarCircle,
-    bank: AiOutlineBank,
-    activity: BsActivity,
+    bulb: FaRegLightbulb,
+    check: FaCheck,
+    radar: LuRadar,
+    accessibility: IoAccessibility,
+    people: FaPeopleGroup,
+    scale: LuBarChartHorizontalBig,
+    gamification: IoGameControllerOutline,
+    code: FaCode,
+    project: FaProjectDiagram,
 };
 
 export const Icons: IconsType = icons;
diff --git a/components/Logo.tsx b/components/Logo.tsx
new file mode 100644
index 0000000..d7b43f0
--- /dev/null
+++ b/components/Logo.tsx
@@ -0,0 +1,10 @@
+import Image from "next/image";
+
+export const Logo = () => {
+    return (
+        <div className="hover:opacity-75 transition duration-200 items-center gap-x-2 flex">
+            <Image src="/logo.svg" alt="Logo" height={30} width={30} />
+            <p className="text-lg font-extrabold">SaaS Marketing</p>
+        </div>
+    );
+};
diff --git a/components/ModeToggle.tsx b/components/ModeToggle.tsx
index 370b0b0..6d53aec 100644
--- a/components/ModeToggle.tsx
+++ b/components/ModeToggle.tsx
@@ -1,7 +1,47 @@
-import React from "react";
+"use client";
 
-const ModeToggle = () => {
-    return <div>ModeToggle</div>;
-};
+import { Button } from "@/components/ui/button";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
 
-export default ModeToggle;
+export function ModeToggle() {
+    const { setTheme } = useTheme();
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <Sun className="h-[1.1rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute h-[1.1rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => setTheme("light")}
+                >
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => setTheme("dark")}
+                >
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                    className="cursor-pointer"
+                    onClick={() => setTheme("system")}
+                >
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index e218494..3bb415e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,7 +1,163 @@
-import React from "react";
+"use client";
+
+import { useState } from "react";
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet";
+
+import { buttonVariants } from "./ui/button";
+import { Menu } from "lucide-react";
+import { ModeToggle } from "./ModeToggle";
+import { Icons } from "@/components/Icons";
+import Link from "next/link";
+import { Logo } from "./Logo";
+
+interface RouteProps {
+    href: string;
+    label: string;
+}
+
+const routeList: RouteProps[] = [
+    {
+        href: "#features",
+        label: "Features",
+    },
+    {
+        href: "#testimonials",
+        label: "Testimonials",
+    },
+    {
+        href: "#pricing",
+        label: "Pricing",
+    },
+    {
+        href: "#faq",
+        label: "FAQ",
+    },
+];
 
 const Navbar = () => {
-    return <div>Navbar</div>;
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    return (
+        <header className="sticky border-b-[1px] top-0 z-40 w-full bg-white dark:border-b-slate-700 dark:bg-background">
+            <NavigationMenu className="mx-auto">
+                <NavigationMenuList className="container h-16 px-4 w-screen flex justify-between ">
+                    <NavigationMenuItem className="font-bold flex">
+                        <Link href="/" className="ml-2 font-bold text-xl flex">
+                            <Logo />
+                        </Link>
+                    </NavigationMenuItem>
+
+                    {/* mobile */}
+                    <div className="flex md:hidden">
+                        <ModeToggle />
+                        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+                            <SheetTrigger className="px-2">
+                                <Menu
+                                    className="flex md:hidden h-5 w-5"
+                                    onClick={() => setIsOpen(true)}
+                                ></Menu>
+                            </SheetTrigger>
+
+                            <SheetContent side={"left"}>
+                                <SheetHeader>
+                                    <SheetTitle className="font-bold text-xl">
+                                        SaaS Marketing
+                                    </SheetTitle>
+                                </SheetHeader>
+                                <nav className="flex flex-col justify-center items-start space-y-3 mt-6">
+                                    <ul className="flex flex-col space-y-3">
+                                        {routeList.map(
+                                            ({ href, label }: RouteProps) => (
+                                                <li key={label}>
+                                                    <Link
+                                                        key={label}
+                                                        href={href}
+                                                        onClick={() =>
+                                                            setIsOpen(false)
+                                                        }
+                                                        className={buttonVariants(
+                                                            {
+                                                                variant:
+                                                                    "ghost",
+                                                            }
+                                                        )}
+                                                    >
+                                                        {label}
+                                                    </Link>
+                                                </li>
+                                            )
+                                        )}
+                                    </ul>
+                                    <Link
+                                        href="https://github.com/chrisstef/saas-marketing-template.git"
+                                        target="_blank"
+                                        className={`w-[110px] border ${buttonVariants(
+                                            {
+                                                variant: "secondary",
+                                            }
+                                        )}`}
+                                    >
+                                        <Icons.github className="mr-2 h-4 w-4" />
+                                        Github
+                                    </Link>
+                                </nav>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+
+                    {/* desktop */}
+                    <nav className="hidden md:flex gap-2">
+                        <ul className="flex space-x-2">
+                            {routeList.map((route: RouteProps, i) => (
+                                <li key={i}>
+                                    <Link
+                                        href={route.href}
+                                        className={`text-[17px] ${buttonVariants(
+                                            {
+                                                variant: "ghost",
+                                            }
+                                        )}`}
+                                    >
+                                        {route.label}
+                                    </Link>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+
+                    <div className="hidden md:flex gap-2">
+                        <ul className="flex space-x-2">
+                            <li>
+                                <Link
+                                    href="https://github.com/chrisstef/saas-marketing-template.git"
+                                    target="_blank"
+                                    className={`border ${buttonVariants({
+                                        variant: "secondary",
+                                    })}`}
+                                >
+                                    <Icons.github className="mr-2 h-4 w-4" />
+                                    Github
+                                </Link>
+                            </li>
+                            <li>
+                                <ModeToggle />
+                            </li>
+                        </ul>
+                    </div>
+                </NavigationMenuList>
+            </NavigationMenu>
+        </header>
+    );
 };
 
 export default Navbar;
diff --git a/components/Newsletter.tsx b/components/Newsletter.tsx
index e0c4381..6781ac3 100644
--- a/components/Newsletter.tsx
+++ b/components/Newsletter.tsx
@@ -1,7 +1,47 @@
-import React from "react";
+"use client";
+
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 
 const Newsletter = () => {
-    return <div>Newsletter</div>;
+    const handleSubmit = (e: any) => {
+        e.preventDefault();
+        console.log("Subscribed!");
+    };
+
+    return (
+        <section id="newsletter">
+            <hr className="w-11/12 mx-auto" />
+
+            <div className="container py-24 sm:py-32">
+                <h3 className="text-center text-4xl md:text-5xl font-bold">
+                    Join Our Daily{" "}
+                    <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                        Newsletter
+                    </span>
+                </h3>
+                <p className="text-xl text-muted-foreground text-center mt-4 mb-8">
+                    Lorem ipsum dolor sit amet consectetur.
+                </p>
+
+                <form
+                    className="flex flex-col w-full md:flex-row md:w-6/12 lg:w-4/12 mx-auto gap-4 md:gap-2"
+                    onSubmit={handleSubmit}
+                >
+                    <Input
+                        placeholder="example@email.com"
+                        className="bg-muted/50 dark:bg-muted/80 "
+                        aria-label="email"
+                        id="email"
+                        autoComplete="off"
+                    />
+                    <Button>Subscribe</Button>
+                </form>
+            </div>
+
+            <hr className="w-11/12 mx-auto" />
+        </section>
+    );
 };
 
 export default Newsletter;
diff --git a/components/OpenSource.tsx b/components/OpenSource.tsx
new file mode 100644
index 0000000..c05bfea
--- /dev/null
+++ b/components/OpenSource.tsx
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+import { Icons } from "./Icons";
+
+const OpenSource = async () => {
+    const { stargazers_count: stars } = await fetch(
+        "https://api.github.com/repos/chrisstef/saas-marketing-template",
+        {
+            next: { revalidate: 60 },
+        }
+    )
+        .then((res) => res.json())
+        .catch((e) => console.error(e));
+
+    return (
+        <section className="container py-24 sm:py-32">
+            <div className="flex flex-col items-center gap-4">
+                <h2 className="text-3xl md:text-4xl font-bold text-center">
+                    Fully
+                    <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                        {" "}
+                        Open Source{" "}
+                    </span>
+                </h2>
+                <Link
+                    href="https://github.com/chrisstef/saas-marketing-template"
+                    target="_blank"
+                    className={cn(
+                        buttonVariants({ variant: "outline", size: "lg" })
+                    )}
+                >
+                    <Icons.star className="mr-2 h-4 w-4" />
+                    <span>{stars} on Github</span>
+                </Link>
+            </div>
+        </section>
+    );
+};
+
+export default OpenSource;
diff --git a/components/Pricing.tsx b/components/Pricing.tsx
index eb94f43..ad2a6a4 100644
--- a/components/Pricing.tsx
+++ b/components/Pricing.tsx
@@ -1,7 +1,152 @@
-import React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Check } from "lucide-react";
+
+enum PopularPlanType {
+    NO = 0,
+    YES = 1,
+}
+
+interface PricingProps {
+    title: string;
+    popular: PopularPlanType;
+    price: number;
+    description: string;
+    buttonText: string;
+    benefitList: string[];
+}
+
+const pricingList: PricingProps[] = [
+    {
+        title: "Free",
+        popular: 0,
+        price: 0,
+        description:
+            "Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
+        buttonText: "Get Started",
+        benefitList: [
+            "1 Team member",
+            "2 GB Storage",
+            "Up to 4 pages",
+            "Community support",
+            "lorem ipsum dolor",
+        ],
+    },
+    {
+        title: "Premium",
+        popular: 1,
+        price: 5,
+        description:
+            "Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
+        buttonText: "Start Free Trial",
+        benefitList: [
+            "4 Team members",
+            "4 GB Storage",
+            "Up to 6 pages",
+            "Priority support",
+            "lorem ipsum dolor",
+        ],
+    },
+    {
+        title: "Enterprise",
+        popular: 0,
+        price: 40,
+        description:
+            "Lorem ipsum dolor sit, amet ipsum consectetur adipisicing elit.",
+        buttonText: "Contact Us",
+        benefitList: [
+            "10 Team members",
+            "8 GB Storage",
+            "Up to 10 pages",
+            "Priority support",
+            "lorem ipsum dolor",
+        ],
+    },
+];
 
 const Pricing = () => {
-    return <div>Pricing</div>;
+    return (
+        <section id="pricing" className="container py-24 sm:py-32">
+            <h2 className="text-3xl md:text-4xl font-bold text-center">
+                Get
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    {" "}
+                    Unlimited{" "}
+                </span>
+                Access
+            </h2>
+            <h3 className="text-xl text-center text-muted-foreground pt-4 pb-8">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+                reiciendis.
+            </h3>
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {pricingList.map((pricing: PricingProps) => (
+                    <Card
+                        key={pricing.title}
+                        className={
+                            pricing.popular === PopularPlanType.YES
+                                ? "drop-shadow-xl shadow-black/10 dark:shadow-white/10"
+                                : ""
+                        }
+                    >
+                        <CardHeader>
+                            <CardTitle className="flex item-center justify-between">
+                                {pricing.title}
+                                {pricing.popular === PopularPlanType.YES ? (
+                                    <Badge
+                                        variant="secondary"
+                                        className="text-sm text-primary"
+                                    >
+                                        Most popular
+                                    </Badge>
+                                ) : null}
+                            </CardTitle>
+                            <div>
+                                <span className="text-3xl font-bold">
+                                    ${pricing.price}
+                                </span>
+                                <span className="text-muted-foreground">
+                                    {" "}
+                                    /month
+                                </span>
+                            </div>
+
+                            <CardDescription>
+                                {pricing.description}
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent>
+                            <Button className="w-full">
+                                {pricing.buttonText}
+                            </Button>
+                        </CardContent>
+
+                        <hr className="w-4/5 m-auto mb-4" />
+
+                        <CardFooter className="flex">
+                            <div className="space-y-4">
+                                {pricing.benefitList.map((benefit: string) => (
+                                    <span key={benefit} className="flex">
+                                        <Check className="text-green-500" />{" "}
+                                        <h3 className="ml-2">{benefit}</h3>
+                                    </span>
+                                ))}
+                            </div>
+                        </CardFooter>
+                    </Card>
+                ))}
+            </div>
+        </section>
+    );
 };
 
 export default Pricing;
diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx
index 2fb9811..5a773ee 100644
--- a/components/ScrollToTop.tsx
+++ b/components/ScrollToTop.tsx
@@ -1,7 +1,42 @@
-import React from "react";
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "./ui/button";
+import { ArrowUpToLine } from "lucide-react";
 
 const ScrollToTop = () => {
-    return <div>ScrollToTop</div>;
+    const [showTopBtn, setShowTopBtn] = useState(false);
+
+    useEffect(() => {
+        window.addEventListener("scroll", () => {
+            if (window.scrollY > 400) {
+                setShowTopBtn(true);
+            } else {
+                setShowTopBtn(false);
+            }
+        });
+    }, []);
+
+    const goToTop = () => {
+        window.scroll({
+            top: 0,
+            left: 0,
+        });
+    };
+
+    return (
+        <>
+            {showTopBtn && (
+                <Button
+                    onClick={goToTop}
+                    className="fixed bottom-4 right-4 opacity-90 shadow-md"
+                    size="icon"
+                >
+                    <ArrowUpToLine className="h-4 w-4" />
+                </Button>
+            )}
+        </>
+    );
 };
 
 export default ScrollToTop;
diff --git a/components/Services.tsx b/components/Services.tsx
index 0b927aa..e1a19e3 100644
--- a/components/Services.tsx
+++ b/components/Services.tsx
@@ -1,7 +1,79 @@
-import React from "react";
+import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
+import { Icons } from "./Icons";
+
+interface ServiceProps {
+    title: string;
+    description: string;
+    icon: JSX.Element;
+}
+
+const serviceList: ServiceProps[] = [
+    {
+        title: "Code Collaboration",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        icon: <Icons.code className="h-6 w-6 text-orange-500" />,
+    },
+    {
+        title: "Project Management",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        icon: <Icons.dashboard className="h-6 w-6 text-orange-500" />,
+    },
+    {
+        title: "Task Automation",
+        description:
+            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
+        icon: <Icons.project className="h-6 w-6 text-orange-500" />,
+    },
+];
 
 const Services = () => {
-    return <div>Services</div>;
+    return (
+        <section className="container py-24 sm:py-32">
+            <div className="grid lg:grid-cols-[1fr,1fr] gap-8 place-items-center">
+                <div>
+                    <h2 className="text-3xl md:text-4xl font-bold">
+                        <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                            Client-Centric{" "}
+                        </span>
+                        Services
+                    </h2>
+
+                    <p className="text-muted-foreground text-xl mt-4 mb-8 ">
+                        Lorem ipsum dolor sit amet consectetur, adipisicing
+                        elit. Veritatis dolor.
+                    </p>
+
+                    <div className="flex flex-col gap-8">
+                        {serviceList.map(
+                            ({ icon, title, description }: ServiceProps) => (
+                                <Card key={title}>
+                                    <CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
+                                        <div className="mt-1 bg-primary/20 p-3 rounded-2xl">
+                                            {icon}
+                                        </div>
+                                        <div>
+                                            <CardTitle>{title}</CardTitle>
+                                            <CardDescription className="text-md mt-2">
+                                                {description}
+                                            </CardDescription>
+                                        </div>
+                                    </CardHeader>
+                                </Card>
+                            )
+                        )}
+                    </div>
+                </div>
+
+                <img
+                    src="./cube-leg.png"
+                    className="w-[300px] md:w-[500px] lg:w-[600px] object-contain"
+                    alt="About services"
+                />
+            </div>
+        </section>
+    );
 };
 
 export default Services;
diff --git a/components/Sponsors.tsx b/components/Sponsors.tsx
index a4f5bfb..cc4fe90 100644
--- a/components/Sponsors.tsx
+++ b/components/Sponsors.tsx
@@ -1,7 +1,57 @@
-import React from "react";
+import { Icons } from "@/components/Icons";
+
+interface SponsorProps {
+    icon: JSX.Element;
+    name: string;
+}
+
+const sponsors: SponsorProps[] = [
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 1",
+    },
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 2",
+    },
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 3",
+    },
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 4",
+    },
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 5",
+    },
+    {
+        icon: <Icons.radar size={34} />,
+        name: "Sponsor 6",
+    },
+];
 
 const Sponsors = () => {
-    return <div>Sponsors</div>;
+    return (
+        <section id="sponsors" className="container pt-24 sm:py-32">
+            <h2 className="text-center text-md lg:text-xl font-bold mb-8 text-primary">
+                Investors and founders
+            </h2>
+
+            <div className="flex flex-wrap justify-center items-center gap-4 md:gap-8">
+                {sponsors.map(({ icon, name }: SponsorProps) => (
+                    <div
+                        key={name}
+                        className="flex items-center gap-1 text-muted-foreground/60"
+                    >
+                        <span>{icon}</span>
+                        <h3 className="text-xl  font-bold">{name}</h3>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
 };
 
 export default Sponsors;
diff --git a/components/Statistics.tsx b/components/Statistics.tsx
index 4e487f7..0cbe7fa 100644
--- a/components/Statistics.tsx
+++ b/components/Statistics.tsx
@@ -1,7 +1,46 @@
 import React from "react";
 
 const Statistics = () => {
-    return <div>Statistics</div>;
+    interface statsProps {
+        quantity: string;
+        description: string;
+    }
+
+    const stats: statsProps[] = [
+        {
+            quantity: "1.7K+",
+            description: "Users",
+        },
+        {
+            quantity: "1.2K+",
+            description: "Subscribers",
+        },
+        {
+            quantity: "300",
+            description: "Downloads",
+        },
+        {
+            quantity: "4",
+            description: "Products",
+        },
+    ];
+
+    return (
+        <section id="statistics">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+                {stats.map(({ quantity, description }: statsProps) => (
+                    <div key={description} className="space-y-2 text-center">
+                        <h2 className="text-3xl sm:text-4xl font-bold ">
+                            {quantity}
+                        </h2>
+                        <p className="text-xl text-muted-foreground">
+                            {description}
+                        </p>
+                    </div>
+                ))}
+            </div>
+        </section>
+    );
 };
 
 export default Statistics;
diff --git a/components/Team.tsx b/components/Team.tsx
index 4f7a8f3..f02a7ca 100644
--- a/components/Team.tsx
+++ b/components/Team.tsx
@@ -1,7 +1,174 @@
-import React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Icons } from "./Icons";
+
+interface TeamProps {
+    imageUrl: string;
+    name: string;
+    position: string;
+    socialNetworks: SociaNetworkslProps[];
+}
+
+interface SociaNetworkslProps {
+    name: string;
+    url: string;
+}
+
+const teamList: TeamProps[] = [
+    {
+        imageUrl: "https://i.pravatar.cc/150?img=35",
+        name: "Emma Smith",
+        position: "Product manager",
+        socialNetworks: [
+            { name: "Linkedin", url: "https://linkedin.com" },
+            {
+                name: "Github",
+                url: "https://github.com/",
+            },
+            {
+                name: "Twitter",
+                url: "https://x.com/",
+            },
+        ],
+    },
+    {
+        imageUrl: "https://i.pravatar.cc/150?img=60",
+        name: "John Doe",
+        position: "Tech Lead",
+        socialNetworks: [
+            { name: "Linkedin", url: "https://linkedin.com" },
+            {
+                name: "Github",
+                url: "https://github.com/",
+            },
+            {
+                name: "Twitter",
+                url: "https://x.com/",
+            },
+        ],
+    },
+    {
+        imageUrl: "https://i.pravatar.cc/150?img=36",
+        name: "Ashley Ross",
+        position: "Frontend Developer",
+        socialNetworks: [
+            { name: "Linkedin", url: "https://linkedin.com" },
+
+            {
+                name: "Twitter",
+                url: "https://x.com/",
+            },
+        ],
+    },
+    {
+        imageUrl: "https://i.pravatar.cc/150?img=17",
+        name: "Bruce Rogers",
+        position: "Backend Developer",
+        socialNetworks: [
+            { name: "Linkedin", url: "https://linkedin.com" },
+            {
+                name: "Github",
+                url: "https://github.com/",
+            },
+        ],
+    },
+];
 
 const Team = () => {
-    return <div>Team</div>;
+    const socialIcon = (iconName: string) => {
+        switch (iconName) {
+            case "Linkedin":
+                return <Icons.linkedin size="20" />;
+
+            case "Github":
+                return <Icons.github size="20" />;
+
+            case "Twitter":
+                return <Icons.twitter size="20" />;
+        }
+    };
+
+    return (
+        <section id="team" className="container py-24 sm:py-32">
+            <h2 className="text-3xl md:text-4xl font-bold">
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    Our Dedicated{" "}
+                </span>
+                Crew
+            </h2>
+
+            <p className="mt-4 mb-10 text-xl text-muted-foreground">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Veritatis dolor pariatur sit!
+            </p>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 gap-y-10">
+                {teamList.map(
+                    ({
+                        imageUrl,
+                        name,
+                        position,
+                        socialNetworks,
+                    }: TeamProps) => (
+                        <Card
+                            key={name}
+                            className="bg-muted/50 relative mt-8 flex flex-col justify-center items-center"
+                        >
+                            <CardHeader className="mt-8 flex justify-center items-center pb-2">
+                                <img
+                                    src={imageUrl}
+                                    alt={`${name} ${position}`}
+                                    className="absolute -top-12 rounded-full w-24 h-24 aspect-square object-cover"
+                                />
+                                <CardTitle className="text-center">
+                                    {name}
+                                </CardTitle>
+                                <CardDescription className="text-primary">
+                                    {position}
+                                </CardDescription>
+                            </CardHeader>
+
+                            <CardContent className="text-center pb-2">
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur
+                                    adipisicing elit.
+                                </p>
+                            </CardContent>
+
+                            <CardFooter>
+                                {socialNetworks.map(
+                                    ({ name, url }: SociaNetworkslProps) => (
+                                        <div key={name} className="space-x-2">
+                                            <a
+                                                href={url}
+                                                target="_blank"
+                                                className={buttonVariants({
+                                                    variant: "ghost",
+                                                    size: "sm",
+                                                })}
+                                            >
+                                                <span className="sr-only">
+                                                    {name} icon
+                                                </span>
+                                                {socialIcon(name)}
+                                            </a>
+                                        </div>
+                                    )
+                                )}
+                            </CardFooter>
+                        </Card>
+                    )
+                )}
+            </div>
+        </section>
+    );
 };
 
 export default Team;
diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 377cd02..155b95e 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -1,7 +1,111 @@
-import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+
+interface TestimonialProps {
+    image: string;
+    name: string;
+    userName: string;
+    comment: string;
+}
+
+const testimonials: TestimonialProps[] = [
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe",
+        userName: "@john_Doe",
+        comment: "This landing page is awesome!",
+    },
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe 1",
+        userName: "@john_Doe1",
+        comment:
+            "Lorem ipsum dolor sit amet,empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.",
+    },
+
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe 2",
+        userName: "@john_Doe2",
+        comment:
+            "Lorem ipsum dolor sit amet,exercitation. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
+    },
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe 3",
+        userName: "@john_Doe3",
+        comment:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
+    },
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe 4",
+        userName: "@john_Doe4",
+        comment:
+            "Lorem ipsum dolor sit amet, tempor incididunt  aliqua. Ut enim ad minim veniam, quis nostrud.",
+    },
+    {
+        image: "https://github.com/shadcn.png",
+        name: "John Doe 5",
+        userName: "@john_Doe5",
+        comment:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+];
 
 const Testimonials = () => {
-    return <div>Testimonials</div>;
+    return (
+        <section id="testimonials" className="container py-24 sm:py-32">
+            <h2 className="text-3xl md:text-4xl font-bold">
+                Discover Why
+                <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+                    {" "}
+                    People Love{" "}
+                </span>
+                This Landing Page
+            </h2>
+
+            <p className="text-xl text-muted-foreground pt-4 pb-8">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non
+                unde error facere hic reiciendis illo
+            </p>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 sm:block columns-2 lg:columns-3 lg:gap-6 mx-auto space-y-4 lg:space-y-6">
+                {testimonials.map(
+                    ({ image, name, userName, comment }: TestimonialProps) => (
+                        <Card
+                            key={userName}
+                            className="max-w-md md:break-inside-avoid overflow-hidden"
+                        >
+                            <CardHeader className="flex flex-row items-center gap-4 pb-2">
+                                <Avatar>
+                                    <AvatarImage alt="" src={image} />
+                                    <AvatarFallback>JD</AvatarFallback>
+                                </Avatar>
+
+                                <div className="flex flex-col">
+                                    <CardTitle className="text-lg">
+                                        {name}
+                                    </CardTitle>
+                                    <CardDescription>
+                                        {userName}
+                                    </CardDescription>
+                                </div>
+                            </CardHeader>
+
+                            <CardContent>{comment}</CardContent>
+                        </Card>
+                    )
+                )}
+            </div>
+        </section>
+    );
 };
 
 export default Testimonials;
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 248d7b5..6b5fce1 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,7 +1,9 @@
-import React from "react";
+"use client";
 
-const ThemeProvider = () => {
-    return <div>ThemeProvider</div>;
-};
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
 
-export default ThemeProvider;
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 0ba4277..cd7d5b9 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,56 +1,57 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+        variants: {
+            variant: {
+                default:
+                    "bg-primary text-primary-foreground hover:bg-primary/90",
+                destructive:
+                    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                outline:
+                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                secondary:
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-3",
+                lg: "h-11 rounded-md px-8",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    }
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index a37f17b..e0172f4 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,140 +1,136 @@
-"use client"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
+const Sheet = SheetPrimitive.Root;
 
-const Sheet = SheetPrimitive.Root
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetClose = SheetPrimitive.Close;
 
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+);
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+        VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            {children}
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+    </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
-  className,
-  ...props
+    className,
+    ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
-  className,
-  ...props
+    className,
+    ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};
diff --git a/package.json b/package.json
index 30fc6f1..b7b399b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.321.0",
     "next": "14.1.0",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
diff --git a/public/cube-leg.png b/public/cube-leg.png
new file mode 100644
index 0000000..388ba8c
Binary files /dev/null and b/public/cube-leg.png differ
diff --git a/public/growth.png b/public/growth.png
new file mode 100644
index 0000000..2a04fca
Binary files /dev/null and b/public/growth.png differ
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..fff049f
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1 @@
+<svg id="eunoia-logo" width="73" height="49" viewBox="0 0 73 49" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M46.8676 24C46.8676 36.4264 36.794 46.5 24.3676 46.5C11.9413 46.5 1.86765 36.4264 1.86765 24C1.86765 11.5736 11.9413 1.5 24.3676 1.5C36.794 1.5 46.8676 11.5736 46.8676 24Z" fill="#2CD3E1"></path> <path d="M71.1324 24C71.1324 36.4264 61.1574 46.5 48.8529 46.5C36.5484 46.5 26.5735 36.4264 26.5735 24C26.5735 11.5736 36.5484 1.5 48.8529 1.5C61.1574 1.5 71.1324 11.5736 71.1324 24Z" fill="#F266AB"></path> <path d="M36.6705 42.8416C42.8109 38.8239 46.8676 31.8858 46.8676 24C46.8676 16.1144 42.8109 9.17614 36.6705 5.15854C30.5904 9.17614 26.5735 16.1144 26.5735 24C26.5735 31.8858 30.5904 38.8239 36.6705 42.8416Z" fill="#A459D1"></path> </svg>
\ No newline at end of file
diff --git a/public/looking-ahead.png b/public/looking-ahead.png
new file mode 100644
index 0000000..fc8cf55
Binary files /dev/null and b/public/looking-ahead.png differ
diff --git a/public/pilot.png b/public/pilot.png
new file mode 100644
index 0000000..e190bb2
Binary files /dev/null and b/public/pilot.png differ
diff --git a/public/reflecting.png b/public/reflecting.png
new file mode 100644
index 0000000..60101e8
Binary files /dev/null and b/public/reflecting.png differ
diff --git a/yarn.lock b/yarn.lock
index 8d696b1..7fd2591 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2162,6 +2162,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 next@14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/next/-/next-14.1.0.tgz#b31c0261ff9caa6b4a17c5af019ed77387174b69"