diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..17027d6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+
+  "trailingComma": "es5"
+}
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..5c46589 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,154 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@font-face {
+  font-family: "Switzer Variable";
+  src: url("/font/Switzer-Variable.ttf") format("truetype");
+  font-weight: 100 900; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Mium Regular";
+  src: url("/font/miumAccess-Regular.ttf") format("truetype");
+  font-weight: 300; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Playfair Display";
+  src: url("/font/PlayfairDisplay-Italic-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 300; /* Full variable range */
+  font-style: normal;
+  font-display: swap;
 }
-
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-switzer: "Switzer Variable", system-ui, sans-serif;
+  --font-mium-reg: "Mium Regular", system-ui, sans-serif;
+  --font-playfair: "Playfair Display", Georgia, serif;
+
+  /* === HEADINGS === */
+  --text-h-1-96: 96px;
+  --text-h-2-60: 60px;
+  --text-h-3-40: 40px;
+  --text-h-4-34: 34px;
+  --text-h-5-28: 28px;
+  --text-h-6-38: 38px;
+  --text-h-7-24: 24px;
+  --text-h-mobile-30: 30px;
+  --text-hero-mobile: 56px;
+
+  --leading-h1: 90px;
+  --leading-h2: 63px;
+  --leading-h3: 48px;
+  --leading-h4: 42px;
+  --leading-h5: 30px;
+  --leading-mobile: 38px;
+
+  /* === BODY TEXT === */
+  --text-b-1-20: 20px;
+  --text-b-2-17: 17px;
+  --text-b-3-16: 16px;
+  --text-b-4-14: 14px;
+
+  --leading-b1: 25px;
+  --leading-b2: 26px;
+  --leading-b3: 23px;
+  --leading-b4: 16px;
+
+  --color-background: #f8f8ff;
+  --color-light-100: #d5ffdc;
+  --color-light-200: #ecf9db;
+  --color-light-300: #d5ffdc33;
+  --color-brand: #274b2d;
+  --color-hover: #2f5a36;
+  --color-btn: #274b2d;
+
+  --color-border: #3a6f43;
+
+  --color-secondary: #636369;
+  --color-gray: #423f3f;
+
+  --breakpoint-xl: 1600px;
+  --breakpoint-lg: 1400px;
+  --breakpoint-md: 1024px;
+  --breakpoint-tab: 767px;
+  --breakpoint-sm: 320px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+/* Base marquee container */
+.marquee {
+  display: flex;
+  gap: var(--gap);
+  animation: marquee var(--duration) linear infinite;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.marquee {
+  display: flex;
+  gap: var(--gap);
+  animation: marquee var(--duration) linear infinite;
+}
+
+/* Reverse direction support */
+.marquee.reverse {
+  animation-direction: reverse;
+}
+
+/* Pause on hover */
+.group:hover .marquee.pause {
+  animation-play-state: paused;
+}
+/* === PAGE TRANSITION FIX === */
+
+.overlay {
+  grid-area: 1 / 1 / 2 / 2;
+  position: fixed; /* instead of relative — ensures full viewport coverage */
+  top: 0;
+  left: 0;
+  width: 100vw; /* use viewport units explicitly */
+  height: 100vh;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.overlay__path {
+  fill: var(--color-brand, #274b2d);
+  stroke: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.view {
+  position: relative;
+  grid-area: 1 / 1 / 2 / 2;
+  display: grid;
+  place-items: center;
+}
+
+.view--2 {
+  background: var(--color-bg-view-2, #cbb37e);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.view--open {
+  pointer-events: auto;
+  opacity: 1;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..73e3096 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,42 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Playfair_Display } from "next/font/google";
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import SmoothScrollProvider from "@/lib/useLenisScroll";
+import { LayoutWithTransition } from "@/layout/Layout";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title:
+    "Whispering Tree | Smart IoT & AI Solutions for Tree Health Monitoring",
+  description:
+    "Whispering Tree combines IoT sensors and AI analytics to monitor the health of trees in real time. Our smart environmental system helps cities, organizations, and individuals optimize irrigation, detect stress early, and promote sustainable growth through data-driven insights.",
+  keywords: [
+    "Whispering Tree",
+    "tree health monitoring",
+    "IoT for environment",
+    "AI tree analytics",
+    "smart irrigation",
+    "urban forestry technology",
+    "environmental intelligence",
+    "FalktronTrees",
+    "Matthias Mut",
+    "AI for sustainability",
+    "smart city solutions",
+    "real-time tree monitoring",
+    "IoT sensors for trees",
+    "green technology",
+    "water optimization system",
+  ],
+  openGraph: {
+    title:
+      "Whispering Tree | Smart IoT & AI Solutions for Tree Health Monitoring",
+    description:
+      "Whispering Tree combines IoT sensors and AI analytics to monitor the health of trees in real time. Our smart environmental system helps cities, organizations, and individuals optimize irrigation, detect stress early, and promote sustainable growth through data-driven insights.",
+    url: "https://whisperingtree.com",
+    type: "website",
+  },
+  icons: {
+    icon: "/fav.svg",
+  },
 };
 
 export default function RootLayout({
@@ -24,10 +46,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`antialiased`}>
+        <LayoutWithTransition>
+          <SmoothScrollProvider>{children}</SmoothScrollProvider>
+        </LayoutWithTransition>
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..0fd0cbb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,34 @@
-import Image from "next/image";
+"use client";
+import Footer from "@/components/shared/Footer";
+import FAQ from "@/sections/FAQ";
+import About from "@/sections/About";
+import Benefit from "@/sections/Benefit";
+import CaseStudy from "@/sections/CaseStudy";
+import CTA from "@/sections/CTA";
+import Hero from "@/sections/Hero";
+import HowWork from "@/sections/HowWork";
+import ProductPreview from "@/sections/ProductPreview";
+import SocialProff from "@/sections/SocialProff";
+import Testimonial from "@/sections/Testimonial";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <>
+      <div className="flex flex-col gap-5">
+        {/* <Loader /> */}
+        <Hero />
+
+        <SocialProff />
+        <About />
+        <Benefit />
+        <HowWork />
+        <ProductPreview />
+        <CaseStudy />
+        <Testimonial />
+        <FAQ />
+        <CTA />
+        <Footer />
+      </div>
+    </>
   );
 }
diff --git a/app/sitemap.xml/route.ts b/app/sitemap.xml/route.ts
new file mode 100644
index 0000000..c4bffb1
--- /dev/null
+++ b/app/sitemap.xml/route.ts
@@ -0,0 +1,46 @@
+// app/sitemap/route.ts
+
+interface SitemapPage {
+  loc: string;
+  lastmod: string;
+}
+
+export const GET = async () => {
+  const BASE_URL = "https://trees.falktron.com";
+
+  const useCases = [
+    "forestry",
+    "research",
+    "agriculture",
+    "cities-communities",
+  ];
+
+  const pages: SitemapPage[] = [
+    { loc: `${BASE_URL}/`, lastmod: new Date().toISOString().split("T")[0] },
+    ...useCases.map((slug) => ({
+      loc: `${BASE_URL}/use-cases/${slug}`,
+      lastmod: new Date().toISOString().split("T")[0],
+    })),
+  ];
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    ${pages
+      .map(
+        (page) => `
+      <url>
+        <loc>${page.loc}</loc>
+        <lastmod>${page.lastmod}</lastmod>
+      </url>`
+      )
+      .join("")}
+  </urlset>`;
+
+  return new Response(xml, {
+    status: 200,
+    headers: {
+      "Content-Type": "application/xml",
+      "Cache-Control": "public, s-maxage=86400, stale-while-revalidate=3600",
+    },
+  });
+};
diff --git a/app/use-cases/[slug]/page.tsx b/app/use-cases/[slug]/page.tsx
new file mode 100644
index 0000000..51329ba
--- /dev/null
+++ b/app/use-cases/[slug]/page.tsx
@@ -0,0 +1,83 @@
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { useCases } from "@/data/useCases";
+import Footer from "@/components/shared/Footer";
+import Navbar from "@/components/shared/Navbar";
+import MobileNavbar from "@/components/ui/mobile-navbar";
+import CTA from "@/sections/CTA";
+import HeroClient from "@/sections/HeroCase";
+
+interface Props {
+  params: Promise<{ slug: string }>; // ← Promise!
+}
+
+export default async function UseCaseDetail({ params }: Props) {
+  const { slug } = await params;
+  const item = useCases.find((c) => c.slug === slug);
+  if (!item) notFound();
+
+  return (
+    <>
+      <Navbar />
+      <MobileNavbar />
+      <HeroClient item={item} />
+      <section className="tab:py-16 tab:px-6 mx-auto max-w-5xl sm:px-2.5 sm:py-8">
+        <div className="space-y-12">
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Overview
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.description}
+            </p>
+          </div>
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Challenge
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.challenge}
+            </p>
+          </div>
+          <Image
+            src={item.image1}
+            alt={`${item.title} use case`}
+            width={600}
+            height={480}
+            className="mx-auto h-[480px] w-full rounded-xl object-cover"
+          />
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Our Solution
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.solution}
+            </p>
+          </div>
+
+          <div>
+            <h2 className="font-switzer mb-3 text-3xl font-semibold text-black">
+              Impact
+            </h2>
+            <p className="font-mium-reg text-b-2-17 leading-b2 tracking-[-0.4px] text-black">
+              {item.outcome}
+            </p>
+          </div>
+          <Image
+            src={item.image2}
+            alt={`${item.title} use case`}
+            width={600}
+            height={480}
+            className="mx-auto h-[480px] w-full rounded-xl object-cover"
+          />
+        </div>
+      </section>
+      <div className="tab:mb-0 sm:mb-10">
+        <CTA />
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/components/shared/Button.tsx b/components/shared/Button.tsx
new file mode 100644
index 0000000..fa014fe
--- /dev/null
+++ b/components/shared/Button.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface ButtonProps {
+  text: string;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, className = "" }) => {
+  return (
+    <button
+      className={`group font-mium-reg text-b-2-17 bg-btn relative h-[52px] w-max min-w-40 cursor-pointer rounded-full px-6 py-2.5 text-center font-normal tracking-[-0.8px] text-white shadow-[inset_0_0_25px_#7ED38C,0_0_25px_rgba(126,211,140,0.6),0_0_50px_rgba(126,211,140,0.3)] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)] hover:shadow-[inset_0_0_30px_#9CF1A5,0_0_35px_rgba(126,211,140,0.9),0_0_60px_rgba(126,211,140,0.7)] ${className} `}
+    >
+      {/* Smooth hover text animation */}
+      <span className="relative block overflow-hidden">
+        <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+          {text}
+        </span>
+        <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+          {text}
+        </span>
+      </span>
+    </button>
+  );
+};
+
+export default Button;
diff --git a/components/shared/Footer.tsx b/components/shared/Footer.tsx
new file mode 100644
index 0000000..71128a5
--- /dev/null
+++ b/components/shared/Footer.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  const companyLinks = [
+    { label: "Home", href: "/#home" },
+    { label: "About Us", href: "/#about" },
+    { label: "Product", href: "/#product" },
+    { label: "Benefits", href: "/#benefits" },
+    { label: "How it works", href: "/#how-it-works" },
+    { label: "Use Cases", href: "/#use-cases" },
+    { label: "Privacy Policy", href: "/privacy" },
+  ];
+
+  const socialLinks = [
+    { label: "LinkedIn", href: "https://linkedin.com", icon: "linkedin" },
+    { label: "X", href: "https://x.com", icon: "x" },
+    { label: "Facebook", href: "https://facebook.com", icon: "facebook" },
+    { label: "Instagram", href: "https://instagram.com", icon: "instagram" },
+  ];
+
+  return (
+    <footer className="bg-brand relative w-full text-white">
+      <Image
+        src="/images/png/grainy.png"
+        width={800}
+        height={900}
+        alt="Munich City with trees and sensor on it"
+        className="absolute top-0 left-0 h-full w-full rounded-2xl object-cover opacity-30 mix-blend-soft-light"
+      />
+      <div className="tab:px-4 relative z-20 mx-auto max-w-[1420px] pt-16 sm:px-2.5 lg:px-6">
+        <div className="tab:flex-row tab:gap-5 flex items-center justify-between sm:flex-col sm:gap-8 md:gap-0">
+          {/* Left: Logo, Description, Contact */}
+          <div className="flex w-full flex-col gap-1">
+            <div className="mb-4 flex items-center gap-2">
+              <Image
+                src="/images/svg/whispering-logo.svg"
+                alt="Whispering Trees"
+                width={280}
+                height={68}
+                className="h-[68px] w-[280px] object-contain"
+              />
+            </div>
+
+            <p className="font-mium-reg text-b-3-16 leading-b3 tab:mb-6 max-w-xl tracking-[-0.5px] text-white">
+              FalktronTrees is redefining urban forestry through IoT and AI —
+              turning trees into living data sources for healthier, more
+              sustainable cities. Together, we’re shaping a greener, smarter
+              future.
+            </p>
+
+            <div className="tab:flex-col tab:mb-3 tab:gap-5 mt-6! flex items-start sm:mb-6 sm:flex-col sm:gap-2 md:flex-row">
+              <div className="flex items-center gap-2">
+                <span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
+                  <Image
+                    width={20}
+                    height={20}
+                    src="/images/svg/proicons_call.svg"
+                    className="h-5 w-5 object-cover"
+                    alt="Call"
+                  />
+                  Call us:
+                </span>
+                <a
+                  href="tel:+492511234567"
+                  className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
+                >
+                  +49 251 1234567
+                </a>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-b-3-16 font-mium-reg flex items-center gap-1 font-normal tracking-[-0.5px] text-white">
+                  <Image
+                    width={20}
+                    height={20}
+                    src="/images/svg/mage_email.svg"
+                    className="h-5 w-5 object-cover"
+                    alt="email"
+                  />
+                  Email:
+                </span>
+                <a
+                  href="mailto:info@falktrontrees.com"
+                  className="text-b-3-16 font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
+                >
+                  info@falktrontrees.com
+                </a>
+              </div>
+            </div>
+
+            {/* <Button text="Contact Us" /> */}
+          </div>
+
+          {/* Right: Links */}
+          <div className="tab:w-max sm:w-full">
+            <div className="grid grid-cols-2 gap-8 md:grid-cols-2">
+              {/* Company Links */}
+              <div className="min-w-[180px]">
+                <h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
+                  Company
+                </h3>
+                <ul className="space-y-1.5">
+                  {companyLinks.map((link) => {
+                    // ← current route
+                    const isHash = link.href.startsWith("/#"); // ← internal hash
+                    const targetId = link.href.replace("/#", "");
+                    return (
+                      <li key={link.label}>
+                        {isHash ? (
+                          <a
+                            href={link.href}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              const section = document.getElementById(targetId);
+                              if (section) {
+                                const yOffset = -80;
+                                const y =
+                                  section.getBoundingClientRect().top +
+                                  window.pageYOffset +
+                                  yOffset;
+                                window.scrollTo({ top: y, behavior: "smooth" });
+                              }
+                            }}
+                            className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
+                          >
+                            <span className="relative block overflow-hidden">
+                              <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+                                {link.label}
+                              </span>
+                              <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+                                {link.label}
+                              </span>
+                            </span>
+                          </a>
+                        ) : (
+                          <Link
+                            href={link.href}
+                            className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
+                          >
+                            <span className="relative block overflow-hidden">
+                              <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+                                {link.label}
+                              </span>
+                              <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+                                {link.label}
+                              </span>
+                            </span>
+                          </Link>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+
+              {/* Social Links */}
+              <div>
+                <h3 className="text-b-1-20 font-switzer mb-5 font-medium text-white">
+                  Social Links
+                </h3>
+                <ul className="space-y-1.5">
+                  {socialLinks.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-b-3-16 group font-mium-reg font-normal tracking-[-0.5px] text-white transition-colors hover:text-green-400"
+                      >
+                        <span className="relative block overflow-hidden">
+                          <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+                            {link.label}
+                          </span>
+                          <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+                            {link.label}
+                          </span>
+                        </span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="font-switzer text-b-2-17 mt-12 border-t border-white/10 pt-6 pb-6 text-center font-normal text-white">
+          © {new Date().getFullYear()} Whispering Trees. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/shared/Navbar.tsx b/components/shared/Navbar.tsx
new file mode 100644
index 0000000..0833303
--- /dev/null
+++ b/components/shared/Navbar.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+import Button from "./Button";
+import SmoothScrollLink from "@/components/ui/smooth-scroll-link";
+import Link from "next/link";
+import { usePageTransition } from "@/layout/Layout";
+
+const Navbar = () => {
+  const navbarRef = useRef<HTMLDivElement>(null);
+  const [scrolled, setScrolled] = useState(false);
+  const [showNavbar, setShowNavbar] = useState(true);
+  const { startTransition } = usePageTransition();
+
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  // ── GSAP: Initial slide-in ─────────────────────────────────────
+  useEffect(() => {
+    const el = navbarRef.current;
+    if (!el) return;
+
+    // Start off-screen
+    gsap.set(el, { yPercent: -100, opacity: 0 });
+
+    // Animate in
+    gsap.to(el, {
+      yPercent: 0,
+      opacity: 1,
+      duration: 1.2,
+      ease: "expo.out",
+    });
+  }, []);
+
+  // ── Scroll: Hide/show + background ─────────────────────────────
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScroll = window.scrollY;
+
+      // Hide on scroll down
+      if (currentScroll > lastScrollY && currentScroll > 100) {
+        setShowNavbar(false);
+      } else {
+        setShowNavbar(true);
+      }
+
+      setScrolled(currentScroll > 30);
+      setLastScrollY(currentScroll);
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY]);
+
+  const navLinks = [
+    { label: "Home", href: "#home" },
+    { label: "About Us", href: "#about" },
+    { label: "Benefits", href: "#benefits" },
+    { label: "How it works", href: "/#how-it-works" },
+    { label: "FAQ", href: "#faq" },
+  ];
+
+  return (
+    <header
+      ref={navbarRef}
+      className={`tab:block fixed top-0 right-0 left-0 z-50 sm:hidden ${showNavbar ? "translate-y-0" : "-translate-y-full"} ${
+        scrolled
+          ? "top-0 border-white/30 bg-white/40 shadow-xs backdrop-blur-md"
+          : "top-6 border-transparent bg-transparent"
+      } `.trim()}
+    >
+      <nav className="mx-auto flex h-[75px] w-full max-w-[1420px] items-center justify-between px-6 py-3 transition-all duration-300">
+        {/* Logo */}
+        <div
+          onClick={() => startTransition(`/`)}
+          className="h-10 w-36 cursor-pointer"
+        >
+          <Image
+            src={
+              scrolled
+                ? "/images/svg/dark-logo.svg"
+                : "/images/svg/whispering-logo.svg"
+            }
+            width={144}
+            height={40}
+            alt="Whispering Tree"
+            className="h-full w-full object-contain"
+          />
+        </div>
+
+        {/* Desktop Links */}
+        <div className="tab:flex hidden">
+          <ul className="flex items-center gap-6">
+            {navLinks.map((link) => (
+              <li key={link.href} className="flex items-center justify-center">
+                <SmoothScrollLink href={link.href} scrolled={scrolled}>
+                  {link.label}
+                </SmoothScrollLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* CTA */}
+        <Button text="Book a Demo" />
+      </nav>
+    </header>
+  );
+};
+
+export default Navbar;
diff --git a/components/shared/Secondary.tsx b/components/shared/Secondary.tsx
new file mode 100644
index 0000000..8af8209
--- /dev/null
+++ b/components/shared/Secondary.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+interface SecondaryButtonProps {
+  text: string;
+  targetId: string; // ← NEW: pass the section ID
+  className?: string;
+}
+
+const SecondaryButton: React.FC<SecondaryButtonProps> = ({
+  text,
+  targetId,
+  className = "",
+}) => {
+  const handleScroll = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const section = document.getElementById(targetId);
+    if (section) {
+      const yOffset = -80;
+      const y =
+        section.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <a
+      href={`/#${targetId}`} // ← valid internal hash link
+      onClick={handleScroll}
+      className={`font-mium-reg text-b-2-17 h-[52px] w-max min-w-40 cursor-pointer rounded-full border border-white bg-transparent px-6 py-3 text-center font-normal tracking-[-0.8px] text-white hover:border-white/80 hover:bg-white/10 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 ${className} `.trim()}
+    >
+      {text}
+    </a>
+  );
+};
+
+export default SecondaryButton;
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..1327e15
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface FAQItemType {
+  question: string;
+  answer: string;
+}
+
+interface FAQProps {
+  title?: string;
+  subtitle?: string;
+  faqData: FAQItemType[];
+  className?: string;
+}
+
+export const FAQ: React.FC<FAQProps> = ({
+  title = "FAQs",
+  subtitle = "Frequently Asked Questions",
+  faqData,
+  className,
+  ...props
+}) => {
+  const accordionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const items = accordionRef.current?.querySelectorAll(".accordion-item");
+
+    if (items) {
+      gsap.set(items, {
+        opacity: 0,
+        y: 50,
+      });
+
+      ScrollTrigger.batch(items, {
+        onEnter: (batch) => {
+          gsap.to(batch, {
+            opacity: 1,
+            y: 0,
+            stagger: 0.12,
+            duration: 1,
+            ease: "power1.inOut",
+            overwrite: true,
+          });
+        },
+        start: "top 90%",
+        once: true,
+      });
+    }
+
+    return () => {
+      ScrollTrigger.getAll().forEach((t) => t.kill());
+    };
+  }, []);
+
+  return (
+    <div className={cn("relative", className)} {...props}>
+      <FAQList faqData={faqData} accordionRef={accordionRef} />
+    </div>
+  );
+};
+
+const FAQList = ({
+  faqData,
+  accordionRef,
+}: {
+  faqData: FAQItemType[];
+  accordionRef: React.RefObject<HTMLDivElement | null>;
+}) => (
+  <div ref={accordionRef} className="mx-auto max-w-4xl space-y-4">
+    <AnimatePresence mode="popLayout">
+      {faqData?.map((faq, index) => (
+        <FAQItem
+          key={index}
+          question={faq.question}
+          answer={faq.answer}
+          className="accordion-item"
+        />
+      ))}
+    </AnimatePresence>
+  </div>
+);
+
+const FAQItem = ({
+  question,
+  answer,
+  className,
+}: FAQItemType & { className?: string }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <motion.div
+      animate={isOpen ? "open" : "closed"}
+      className={cn(
+        "bg-light-200 border-light-200 rounded-xl border text-black transition-colors",
+        className
+      )}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full cursor-pointer items-center justify-between gap-4 px-5 py-6 text-left"
+      >
+        <span
+          className={cn(
+            "font-switzer text-lg font-medium text-black transition-colors",
+            isOpen ? "text-foreground" : "text-muted-foreground"
+          )}
+        >
+          {question}
+        </span>
+        <motion.span
+          variants={{
+            open: { rotate: "45deg" },
+            closed: { rotate: "0deg" },
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          <Plus
+            className={cn(
+              "h-6 w-6 transition-colors",
+              isOpen ? "text-foreground" : "text-muted-foreground"
+            )}
+          />
+        </motion.span>
+      </button>
+      <motion.div
+        initial={false}
+        animate={{
+          height: isOpen ? "auto" : "0px",
+          marginBottom: isOpen ? "16px" : "0px",
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="overflow-hidden px-4"
+      >
+        <p className="font-mium-reg text-sm leading-6 font-normal tracking-[-0.8px]">
+          {answer}
+        </p>
+      </motion.div>
+    </motion.div>
+  );
+};
diff --git a/components/ui/headline.tsx b/components/ui/headline.tsx
new file mode 100644
index 0000000..fa44b92
--- /dev/null
+++ b/components/ui/headline.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+type HeadlineProps = {
+  text: string;
+};
+
+const Headline: React.FC<HeadlineProps> = ({ text }) => {
+  const headlineRef = useRef<HTMLHeadingElement | null>(null);
+
+  useEffect(() => {
+    if (!headlineRef.current) return;
+
+    gsap.from(headlineRef.current, {
+      y: 80,
+      opacity: 0,
+      duration: 1,
+      ease: "expo.out",
+      scrollTrigger: {
+        trigger: headlineRef.current,
+        start: "top 90%",
+        toggleActions: "play none none none",
+      },
+    });
+  }, []);
+
+  return (
+    <div className="overflow-hidden">
+      <h6
+        ref={headlineRef}
+        className="bg-light-300 border-border font-switzer sm:text-b-4-14 tab:text-b-3-16 text-border sm:leading-b4 tab:leading-b2 tab:px-4 w-max rounded-full border py-1.5 font-normal sm:px-2.5"
+      >
+        {text}
+      </h6>
+    </div>
+  );
+};
+
+export default Headline;
diff --git a/components/ui/loader.tsx b/components/ui/loader.tsx
new file mode 100644
index 0000000..6706139
--- /dev/null
+++ b/components/ui/loader.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import Image from "next/image";
+
+const Loader = () => {
+  // We need a DOM node that will be the clipping container
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const img = imgRef.current;
+    if (!container || !img) return;
+    gsap.set(container, { width: "0", clipPath: "inset(0 100% 0 0)" });
+    gsap.to(container, {
+      width: "280px", // reveal left to right
+      duration: 1.4,
+      clipPath: "inset(0 0% 0 0)",
+      ease: "expo.inout",
+    });
+  }, []);
+
+  return (
+    <div className="bg-brand fixed inset-0 z-100 flex h-screen w-full items-center justify-center">
+      {/* Clipping container */}
+      <div ref={containerRef} className="overflow-hidden pl-3">
+        <Image
+          ref={imgRef}
+          src="/images/svg/whispering-logo.svg"
+          alt="Whispering Trees"
+          width={280}
+          height={68}
+          className="h-[68px] w-[250px] object-contain"
+          priority
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/components/ui/logo-marquee.tsx b/components/ui/logo-marquee.tsx
new file mode 100644
index 0000000..97e4679
--- /dev/null
+++ b/components/ui/logo-marquee.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  children?: React.ReactNode;
+  vertical?: boolean;
+  repeat?: number;
+  duration?: string;
+  gap?: string;
+  [key: string]: unknown;
+}
+
+export function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  gap,
+
+  duration = "40s",
+  ...props
+}: MarqueeProps) {
+  return (
+    <div
+      {...props}
+      style={{
+        ["--duration" as string]: duration,
+        ["--gap" as string]: gap, // 👈 dynamic gap applied
+      }}
+      className={cn(
+        "group flex items-center [gap:var(--gap)] overflow-hidden p-2",
+        vertical ? "flex-col" : "flex-row",
+        className
+      )}
+    >
+      {Array.from({ length: repeat }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            "marquee flex shrink-0 justify-around [gap:var(--gap)]",
+            {
+              reverse: reverse, // add reverse direction
+              pause: pauseOnHover, // pause animation on hover
+              "flex-row": !vertical,
+              "flex-col": vertical,
+            }
+          )}
+        >
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/ui/mobile-navbar.tsx b/components/ui/mobile-navbar.tsx
new file mode 100644
index 0000000..d299e98
--- /dev/null
+++ b/components/ui/mobile-navbar.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { motion, Variants } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Button from "../shared/Button";
+
+const MobileNavbar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const mobileRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScroll = window.scrollY;
+      setScrolled(currentScroll > 30);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { label: "Home", href: "#home" },
+    { label: "About Us", href: "#about" },
+    { label: "Features", href: "#features" },
+    { label: "Benefits", href: "#benefits" },
+    { label: "FAQ", href: "#faq" },
+  ];
+  const containerVariants: Variants = {
+    hidden: { y: -100, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 1.2, ease: [0.19, 1, 0.22, 1] }, // expo.out‑ish
+    },
+  };
+  // ✅ Correctly typed Framer Motion variants
+  const mobileNavVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        staggerChildren: 0.1,
+        duration: 0.4,
+        ease: "easeInOut", // ✅ typed correctly
+      },
+    },
+  };
+
+  const linkVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.3,
+        ease: "easeInOut", // ✅ allowed by Framer
+      },
+    },
+  };
+
+  // ✅ Safe smooth scroll handler
+  const handleClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    href: string
+  ) => {
+    e.preventDefault();
+    const targetId = href.replace("#", "");
+    const section = document.getElementById(targetId);
+    if (section) {
+      const yOffset = -80;
+      const y =
+        section.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <motion.nav
+      variants={containerVariants}
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.8, ease: "easeInOut" }}
+      className={`fixed left-1/2 z-50 ${
+        isOpen
+          ? "h-[480px] border-white/30 bg-white/80 shadow-xs backdrop-blur-lg"
+          : "sm:h-[70px]"
+      } ${
+        scrolled
+          ? "top-0 border-white/30 bg-white/80 shadow-xs backdrop-blur-lg"
+          : "top-2 border-transparent bg-transparent"
+      } tab:hidden mx-auto w-full -translate-x-1/2 transform px-5 transition-[height] duration-300 sm:block sm:max-w-full sm:py-[15px]`}
+    >
+      {/* Header Bar */}
+      <div className="relative flex w-full items-center justify-between">
+        <Link href="/" className="logo">
+          <div className="h-10 w-36">
+            <Image
+              src={
+                scrolled || isOpen
+                  ? "/images/svg/dark-logo.svg"
+                  : "/images/svg/whispering-logo.svg"
+              }
+              width={144}
+              height={40}
+              alt="Whispering Tree"
+              className="h-full w-full object-contain"
+            />
+          </div>
+        </Link>
+
+        {/* Mobile Menu Toggle */}
+        <button
+          className="menu__icon relative z-10 flex h-max w-[28px] flex-col items-center justify-center gap-1.5 p-[3px] md:hidden"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <span
+            className={`h-[0.1rem] w-full rounded-[0.125rem] transition-all duration-300 ${
+              scrolled || isOpen ? "bg-black" : "bg-white"
+            } ${isOpen ? "translate-y-[7.5px] rotate-[-45deg]" : ""}`}
+          ></span>
+          <span
+            className={`h-[0.1rem] w-[60%] rounded-[0.125rem] transition-all duration-300 ${
+              scrolled || isOpen ? "bg-black" : "bg-white"
+            } ${isOpen ? "w-0 opacity-0" : ""}`}
+          ></span>
+          <span
+            className={`h-[0.1rem] w-full rounded-[0.125rem] transition-all duration-300 ${
+              scrolled || isOpen ? "bg-black" : "bg-white"
+            } ${isOpen ? "translate-y-[-7.5px] rotate-[45deg]" : ""}`}
+          ></span>
+        </button>
+      </div>
+
+      {/* Dropdown Mobile Menu */}
+      <motion.div
+        initial="hidden"
+        animate={isOpen ? "visible" : "hidden"}
+        variants={mobileNavVariants}
+        className={`mt-12 flex flex-col items-center gap-5 ${
+          isOpen ? "flex" : "hidden"
+        } md:hidden`}
+      >
+        {navLinks.map((link, i) => (
+          <motion.div
+            key={i}
+            variants={linkVariants}
+            className="flex w-full items-center justify-start"
+          >
+            <a
+              href={link.href}
+              onClick={(e) => handleClick(e, link.href)}
+              className={cn(
+                "font-switzer text-h-4-34 group relative inline-block h-full cursor-pointer leading-9 font-medium transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)]"
+              )}
+            >
+              {/* Text hover animation */}
+              <span className="relative block overflow-hidden">
+                <span className="block leading-9 transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+                  {link.label}
+                </span>
+                <span className="absolute top-8 left-0 leading-9 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+                  {link.label}
+                </span>
+              </span>
+            </a>
+          </motion.div>
+        ))}
+        <Button text="Book A Demo" className="mt-5 w-full!" />
+      </motion.div>
+    </motion.nav>
+  );
+};
+
+export default MobileNavbar;
diff --git a/components/ui/page-transition.tsx b/components/ui/page-transition.tsx
new file mode 100644
index 0000000..ee25c94
--- /dev/null
+++ b/components/ui/page-transition.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+
+interface PageTransitionProps {
+  isOpen: boolean;
+  onComplete?: () => void;
+  direction?: "reveal" | "unreveal";
+}
+
+/* ------------------------------------------------------------------
+   1. Path data – identical to the original demo
+   ------------------------------------------------------------------ */
+const paths = {
+  step1: {
+    unfilled: "M 0 100 V 100 Q 50 100 100 100 V 100 z",
+    inBetween: {
+      curve1: "M 0 100 V 50 Q 50 0 100 50 V 100 z",
+      curve2: "M 0 100 V 50 Q 50 100 100 50 V 100 z",
+    },
+    filled: "M 0 100 V 0 Q 50 0 100 0 V 100 z",
+  },
+  step2: {
+    filled: "M 0 0 V 100 Q 50 100 100 100 V 0 z",
+    inBetween: {
+      curve1: "M 0 0 V 50 Q 50 0 100 50 V 0 z",
+      curve2: "M 0 0 V 50 Q 50 100 100 50 V 0 z",
+    },
+    unfilled: "M 0 0 V 0 Q 50 0 100 0 V 0 z",
+  },
+};
+
+export const PageTransition = ({
+  isOpen,
+  onComplete,
+  direction = "reveal",
+}: PageTransitionProps) => {
+  const pathRef = useRef<SVGPathElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null); // 👈 new ref for hiding
+  const [animating, setAnimating] = useState(false);
+
+  /* --------------------------------------------------------------
+     REVEAL – open second view
+   -------------------------------------------------------------- */
+  const reveal = () => {
+    if (animating) return;
+    setAnimating(true);
+
+    // 👇 Show overlay before animation starts
+    gsap.set(svgRef.current, { display: "block" });
+
+    const tl = gsap.timeline({
+      onComplete: () => {
+        setAnimating(false);
+        onComplete?.();
+        // 👇 Hide overlay after animation completes
+        gsap.set(svgRef.current, { display: "none" });
+      },
+    });
+
+    tl.set(pathRef.current, { attr: { d: paths.step1.unfilled } })
+      .to(pathRef.current, {
+        duration: 0.8,
+        ease: "power4.in",
+        attr: { d: paths.step1.inBetween.curve1 },
+      })
+      .to(pathRef.current, {
+        duration: 0.2,
+        ease: "power1",
+        attr: { d: paths.step1.filled },
+        onComplete: () => onComplete?.(),
+      })
+      .set(pathRef.current, { attr: { d: paths.step2.filled } })
+      .to(pathRef.current, {
+        duration: 0.2,
+        ease: "sine.in",
+        attr: { d: paths.step2.inBetween.curve1 },
+      })
+      .to(pathRef.current, {
+        duration: 1,
+        ease: "power4",
+        attr: { d: paths.step2.unfilled },
+      });
+  };
+
+  /* --------------------------------------------------------------
+     UNREVEAL – back to first view
+   -------------------------------------------------------------- */
+  const unreveal = () => {
+    if (animating) return;
+    setAnimating(true);
+
+    // 👇 Show overlay before animation starts
+    gsap.set(svgRef.current, { display: "block" });
+
+    const tl = gsap.timeline({
+      onComplete: () => {
+        setAnimating(false);
+        onComplete?.();
+        // 👇 Hide overlay after animation completes
+        gsap.set(svgRef.current, { display: "none" });
+      },
+    });
+
+    tl.set(pathRef.current, { attr: { d: paths.step2.unfilled } })
+      .to(pathRef.current, {
+        duration: 0.8,
+        ease: "power4.in",
+        attr: { d: paths.step2.inBetween.curve2 },
+      })
+      .to(pathRef.current, {
+        duration: 0.2,
+        ease: "power1",
+        attr: { d: paths.step2.filled },
+        onComplete: () => onComplete?.(),
+      })
+      .set(pathRef.current, { attr: { d: paths.step1.filled } })
+      .to(pathRef.current, {
+        duration: 0.2,
+        ease: "sine.in",
+        attr: { d: paths.step1.inBetween.curve2 },
+      })
+      .to(pathRef.current, {
+        duration: 1,
+        ease: "power4",
+        attr: { d: paths.step1.unfilled },
+      });
+  };
+
+  /* --------------------------------------------------------------
+     React to prop changes
+   -------------------------------------------------------------- */
+  useEffect(() => {
+    if (!isOpen) return;
+    if (direction === "reveal") reveal();
+    else if (direction === "unreveal") unreveal();
+  }, [isOpen, direction]);
+
+  return (
+    <svg
+      ref={svgRef}
+      className="pointer-events-none fixed top-0 left-0 z-[9999] h-screen w-screen"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      style={{ display: "none" }} // 👈 hidden by default
+    >
+      <path
+        ref={pathRef}
+        className="overlay__path"
+        d="M 0 100 V 100 Q 50 100 100 100 V 100 z"
+        vectorEffect="non-scaling-stroke"
+        fill="#274b2d"
+      />
+    </svg>
+  );
+};
diff --git a/components/ui/smooth-scroll-link.tsx b/components/ui/smooth-scroll-link.tsx
new file mode 100644
index 0000000..eff359b
--- /dev/null
+++ b/components/ui/smooth-scroll-link.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface SmoothScrollLinkProps {
+  href: string;
+  children: React.ReactNode;
+  scrolled?: boolean;
+}
+
+const SmoothScrollLink = ({
+  href,
+  children,
+  scrolled = false,
+}: SmoothScrollLinkProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const targetId = href.replace("#", "");
+    const section = document.getElementById(targetId);
+    if (section) {
+      const yOffset = -80;
+      const y =
+        section.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className={cn(
+        "font-mium-reg text-b-2-17 group relative inline-block h-full cursor-pointer font-medium tracking-[-0.8px] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)]",
+        scrolled ? "text-black" : "text-white"
+      )}
+    >
+      {/* Smooth hover text animation */}
+      <span className="relative block overflow-hidden">
+        <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+          {children}
+        </span>
+        <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+          {children}
+        </span>
+      </span>
+    </a>
+  );
+};
+
+export default SmoothScrollLink;
diff --git a/components/ui/testimonial-marquee.tsx b/components/ui/testimonial-marquee.tsx
new file mode 100644
index 0000000..6eca837
--- /dev/null
+++ b/components/ui/testimonial-marquee.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+
+export const TestimonialCard = ({
+  id,
+  name,
+  title,
+  body,
+  img,
+}: {
+  id: number;
+  name: string;
+  title: string;
+  img: string;
+  body: string;
+}) => {
+  return (
+    <div
+      key={id}
+      className={`group mx-auto w-[360px] max-w-[380px] rounded-xl border border-gray-300 bg-white p-6 transition-all duration-500`}
+    >
+      <div className={`flex items-center gap-5 pb-4`}>
+        <Image
+          width={64}
+          height={64}
+          className="h-16 w-16 rounded-full object-contain"
+          src={img}
+          alt="avatar"
+        />
+        <div className="block">
+          <p className="font-switer font-medium text-black transition-all duration-500">
+            {name}
+          </p>
+          <span className="font-mium-reg text-gray text-sm tracking-[-0.8px]">
+            {title}
+          </span>
+        </div>
+      </div>
+      <div className="border-t border-solid border-gray-200 pt-4">
+        <p className="text-b-4-14 text-gray font-mium-reg line-clamp-4 leading-5 font-normal tracking-[-0.6px]">
+          {body}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/data/useCases.ts b/data/useCases.ts
new file mode 100644
index 0000000..89e5f40
--- /dev/null
+++ b/data/useCases.ts
@@ -0,0 +1,79 @@
+export type UseCase = {
+  slug: string;
+  heroImage: string;
+  image: string;
+  image1: string;
+  image2: string;
+  title: string;
+  description: string;
+  challenge: string;
+  solution: string;
+  outcome: string;
+};
+
+export const useCases: UseCase[] = [
+  {
+    slug: "cities-communities",
+    heroImage: "/images/png/challenge-2.png",
+    image: "/images/png/citiy-1.png",
+    title: "Cities & Communities",
+    image1: "/images/png/challenge-1.png",
+    image2: "/images/png/impact.png",
+    description:
+      "Smart irrigation systems empower city managers to optimize water use across urban landscapes, balancing green sustainability with infrastructure efficiency.",
+    challenge:
+      "City park departments often overwater trees due to fixed irrigation schedules, wasting 40–50% of water annually. Drought conditions and budget constraints make this approach unsustainable.",
+    solution:
+      "Whispering Tree sensors monitor soil moisture and weather data in real-time, allowing AI-driven, demand-based irrigation that ensures trees receive just the right amount of water.",
+    outcome:
+      "Cities achieve up to 45% water savings, reduce maintenance costs, and meet sustainability goals—while keeping parks greener, healthier, and more resilient.",
+  },
+  {
+    slug: "agriculture",
+    heroImage: "/images/png/hero-3.png",
+    image: "/images/png/thimbnail-3.png",
+    image1: "/images/png/challenge-3.png",
+    image2: "/images/png/impact-3.png",
+    title: "Agriculture",
+    description:
+      "Farmers and agronomists use data-driven irrigation control to improve crop yields, save resources, and ensure resilience against climate variability.",
+    challenge:
+      "Traditional irrigation methods often lead to water stress or over-irrigation, reducing crop quality and yield—especially in areas facing unpredictable rainfall.",
+    solution:
+      "IoT sensors continuously monitor soil and climate conditions, providing precise irrigation timing and volume recommendations. This reduces water usage while improving root-zone health.",
+    outcome:
+      "Farmers see up to 20% higher yields, 30% water savings, and healthier soils—creating a more sustainable agricultural model.",
+  },
+  {
+    slug: "research",
+    heroImage: "/images/png/hero-2.png",
+    image: "/images/png/thumbnail-2.png",
+    image1: "/images/png/impact-5.png",
+    image2: "/images/png/impact-6.png",
+    title: "Research",
+    description:
+      "Researchers and environmental scientists use continuous, high-frequency data to gain deep insights into tree physiology and ecosystem patterns.",
+    challenge:
+      "Field research often lacks consistent, real-time data on soil moisture and tree health—making long-term ecological studies difficult and data accuracy inconsistent.",
+    solution:
+      "Whispering Tree’s sensor network collects continuous measurements, allowing automated data logging and cross-site comparison of environmental variables.",
+    outcome:
+      "Research teams save time on manual sampling and gain access to reliable datasets for modeling tree-water relationships and predicting ecosystem responses.",
+  },
+  {
+    slug: "forestry",
+    heroImage: "/images/png/h-f.png",
+    image: "/images/png/4-f.png",
+    image1: "/images/png/f-2.png",
+    image2: "/images/png/f-1.png",
+    title: "Forestry",
+    description:
+      "Forest managers leverage IoT-based environmental intelligence to monitor forest health and protect biodiversity through early stress detection.",
+    challenge:
+      "Large forest areas are difficult to monitor manually, leading to undetected signs of drought stress, pest outbreaks, and reduced growth.",
+    solution:
+      "Networked sensors collect microclimate and soil data across different forest zones, helping managers track water stress, tree vitality, and regeneration progress in real-time.",
+    outcome:
+      "Forestry departments reduce monitoring time by 50%, prevent forest loss through early alerts, and improve reforestation success rates using precise environmental data.",
+  },
+];
diff --git a/layout/Layout.tsx b/layout/Layout.tsx
new file mode 100644
index 0000000..372d76c
--- /dev/null
+++ b/layout/Layout.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { PageTransition } from "@/components/ui/page-transition";
+
+type TransitionContextType = {
+  startTransition: (url: string) => void;
+};
+const TransitionContext = createContext<TransitionContextType>({
+  startTransition: () => {},
+});
+export const usePageTransition = () => useContext(TransitionContext);
+
+export const LayoutWithTransition = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingUrl, setPendingUrl] = useState<string | null>(null);
+  const [direction, setDirection] = useState<"reveal" | "unreveal">("unreveal");
+  const [pageReady, setPageReady] = useState(false);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const prevPath = useRef<string | null>(null);
+
+  /* --------------------------------------------------------------
+     🔹 User clicks → exit animation (reveal)
+   -------------------------------------------------------------- */
+  const startTransition = (url: string) => {
+    setDirection("reveal"); // going out
+    setPendingUrl(url);
+    setIsOpen(true); // start reveal animation
+  };
+
+  /* --------------------------------------------------------------
+     🔹 When GSAP reveal animation finishes → navigate
+   -------------------------------------------------------------- */
+  const handleAnimationComplete = () => {
+    if (pendingUrl) {
+      router.push(pendingUrl);
+      setPendingUrl(null);
+      setPageReady(false); // reset entry state
+    }
+  };
+
+  /* --------------------------------------------------------------
+     🔹 When route changes (new page load)
+     play "unreveal" after slight delay
+   -------------------------------------------------------------- */
+  useEffect(() => {
+    if (prevPath.current && prevPath.current !== pathname) {
+      // only play unreveal on navigation, not on first load
+      const timer = setTimeout(() => {
+        setDirection("unreveal");
+        setIsOpen(true);
+        setTimeout(() => setIsOpen(false), 1200); // animation duration
+      }, 250); // give React time to render page
+      return () => clearTimeout(timer);
+    }
+    prevPath.current = pathname;
+  }, [pathname]);
+
+  return (
+    <TransitionContext.Provider value={{ startTransition }}>
+      <main className="relative min-h-screen overflow-hidden bg-white">
+        {/* Page content */}
+        <div className="relative z-10">{children}</div>
+
+        {/* Animated overlay */}
+        <PageTransition
+          isOpen={isOpen}
+          direction={direction}
+          onComplete={handleAnimationComplete}
+        />
+      </main>
+    </TransitionContext.Provider>
+  );
+};
diff --git a/lib/useLenisScroll.js b/lib/useLenisScroll.js
new file mode 100644
index 0000000..f2f40ea
--- /dev/null
+++ b/lib/useLenisScroll.js
@@ -0,0 +1,25 @@
+"use client";
+
+import { useEffect } from "react";
+import Lenis from "@studio-freight/lenis";
+
+export default function SmoothScrollProvider({ children }) {
+  useEffect(() => {
+    const lenis = new Lenis({
+      smooth: true,
+      duration: 1.2, // Adjust the scroll speed
+    });
+
+    function raf(time) {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    }
+    requestAnimationFrame(raf);
+
+    return () => {
+      lenis.destroy();
+    };
+  }, []);
+
+  return <>{children}</>;
+}
diff --git a/lib/useSectionReveal.ts b/lib/useSectionReveal.ts
new file mode 100644
index 0000000..1849f73
--- /dev/null
+++ b/lib/useSectionReveal.ts
@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import gsap from "gsap";
+import SplitText from "gsap/SplitText";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(SplitText, ScrollTrigger);
+
+type UseSplitTextAnimationProps<T extends HTMLElement = HTMLElement> = {
+  headingRef: React.RefObject<T | null>;
+  paraRef: React.RefObject<T | null>;
+  shinyRef?: React.RefObject<T | null>;
+  triggerId: string;
+};
+
+export function useSplitTextAnimation<T extends HTMLElement = HTMLElement>({
+  headingRef,
+  paraRef,
+  shinyRef,
+  triggerId,
+}: UseSplitTextAnimationProps<T>) {
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: `#${triggerId}`,
+          start: "top 70%",
+        },
+      });
+
+      const headingSplit = new SplitText(headingRef.current, {
+        type: "lines, words",
+        linesClass: "line",
+      });
+
+      const paraSplit = new SplitText(paraRef.current, {
+        type: "lines, words",
+        linesClass: "line",
+      });
+
+      const headingWords = headingSplit.words;
+      const paraWords = paraSplit.words;
+
+      if (shinyRef?.current) {
+        tl.from(shinyRef.current, {
+          opacity: 0,
+          y: 20,
+          duration: 0.6,
+          ease: "power",
+        });
+      }
+
+      tl.from(
+        headingWords,
+        {
+          duration: 0.8,
+          opacity: 0,
+          yPercent: 120,
+          ease: "power",
+          stagger: 0.015,
+        },
+        "-=0.2"
+      );
+
+      tl.from(
+        paraWords,
+        {
+          duration: 0.7,
+          opacity: 0,
+          yPercent: 120,
+          ease: "power",
+          stagger: 0.01,
+        },
+        "-=0.5"
+      );
+    });
+
+    return () => {
+      ctx.revert();
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, [headingRef, paraRef, shinyRef, triggerId]);
+}
diff --git a/lib/useTextRevealHeading.ts b/lib/useTextRevealHeading.ts
new file mode 100644
index 0000000..94b66e3
--- /dev/null
+++ b/lib/useTextRevealHeading.ts
@@ -0,0 +1,57 @@
+"use client";
+import { useEffect } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+export const useSplitHeading = (
+  headingRef: React.RefObject<HTMLElement | null>,
+  subHeadingRef?: React.RefObject<HTMLElement | null>
+) => {
+  useEffect(() => {
+    if (!headingRef.current) return;
+
+    const headingSplit = new SplitText(headingRef.current, { type: "words" });
+    const subSplit =
+      subHeadingRef?.current &&
+      new SplitText(subHeadingRef.current, { type: "words" });
+
+    // heading animation
+    gsap.from(headingSplit.words, {
+      yPercent: 100,
+      opacity: 0,
+      duration: 1,
+      ease: "expo.out",
+      stagger: 0.07,
+      scrollTrigger: {
+        trigger: headingRef.current,
+        start: "top 85%",
+        toggleActions: "play none none none",
+      },
+    });
+
+    // subheading animation
+    if (subSplit) {
+      gsap.from(subSplit.words, {
+        yPercent: 100,
+        opacity: 0,
+        duration: 1,
+        ease: "expo.out",
+        stagger: 0.04,
+        scrollTrigger: {
+          trigger: subHeadingRef?.current,
+          start: "top 85%",
+          toggleActions: "play none none none",
+        },
+      });
+    }
+
+    return () => {
+      headingSplit.revert();
+      subSplit?.revert();
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, [headingRef, subHeadingRef]);
+};
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/package-lock.json b/package-lock.json
index 2c449fd..bae79d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,15 @@
       "name": "whispering-tree",
       "version": "0.1.0",
       "dependencies": {
+        "@studio-freight/lenis": "^1.0.42",
+        "clsx": "^2.1.1",
+        "framer-motion": "^12.23.24",
+        "gsap": "^3.13.0",
+        "lucide-react": "^0.552.0",
         "next": "16.0.1",
         "react": "19.2.0",
-        "react-dom": "19.2.0"
+        "react-dom": "19.2.0",
+        "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -19,6 +25,8 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.0.1",
+        "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.7.1",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -1195,6 +1203,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@studio-freight/lenis": {
+      "version": "1.0.42",
+      "resolved": "https://registry.npmjs.org/@studio-freight/lenis/-/lenis-1.0.42.tgz",
+      "integrity": "sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==",
+      "deprecated": "The '@studio-freight/lenis' package has been renamed to 'lenis'. Please update your dependencies: npm install lenis and visit the documentation: https://www.npmjs.com/package/lenis",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2571,6 +2586,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3580,6 +3604,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3781,6 +3832,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -4835,6 +4892,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.552.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.552.0.tgz",
+      "integrity": "sha512-g9WCjmfwqbexSnZE+2cl21PCfXOcqnGeWeMTNAOGEfpPbm/ZF4YIq77Z8qWrxbu660EKuLB4nSLggoKnCb+isw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -4902,6 +4968,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5336,6 +5417,101 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+      "integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6017,6 +6193,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
diff --git a/package.json b/package.json
index 7163667..a0fdea0 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,26 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@studio-freight/lenis": "^1.0.42",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.24",
+    "gsap": "^3.13.0",
+    "lucide-react": "^0.552.0",
+    "next": "16.0.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/public/fav.svg b/public/fav.svg
new file mode 100644
index 0000000..e5dd3e3
--- /dev/null
+++ b/public/fav.svg
@@ -0,0 +1,3 @@
+<svg width="339" height="321" viewBox="0 0 339 321" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M179.962 175.197V258.138L218.233 300.34C222.336 304.864 222.336 312.195 218.233 316.719C216.181 318.981 213.496 320.112 210.806 320.112C208.116 320.112 205.421 318.981 203.379 316.719L169.438 279.292L135.27 316.745C131.157 321.248 124.5 321.238 120.416 316.703C116.323 312.157 116.342 304.827 120.455 300.313L158.954 258.133V175.074L135.27 201.035C133.219 203.287 130.543 204.407 127.863 204.407C125.163 204.407 122.468 203.265 120.416 200.992C116.323 196.458 116.342 189.116 120.455 184.613L162.06 139.019C162.215 138.848 162.428 138.794 162.592 138.634C163.453 137.797 164.377 137.039 165.452 136.543C166.632 136.01 167.88 135.775 169.134 135.727C169.245 135.727 169.337 135.657 169.453 135.657H169.463C170.827 135.657 172.191 135.961 173.473 136.548C174.756 137.135 175.917 137.984 176.889 139.051L218.228 184.635C222.331 189.159 222.331 196.49 218.228 201.014C214.125 205.538 207.468 205.538 203.374 201.014L179.957 175.202L179.962 175.197ZM176.885 71.2132C172.791 66.6996 166.153 66.6889 162.065 71.1919L120.46 116.776C116.347 121.29 116.328 128.62 120.421 133.155C124.505 137.69 131.162 137.711 135.275 133.214L169.443 95.7606L203.384 133.187C205.426 135.449 208.121 136.58 210.811 136.58C213.501 136.58 216.186 135.449 218.238 133.187C222.341 128.663 222.341 121.322 218.238 116.808L176.885 71.2132ZM176.885 3.39187C172.791 -1.12173 166.153 -1.13238 162.065 3.37054L120.46 48.9547C116.347 53.4683 116.328 60.7989 120.421 65.3338C122.473 67.6066 125.172 68.7483 127.867 68.7483C130.543 68.7483 133.223 67.628 135.275 65.3872L169.443 27.9339L203.384 65.3498C207.477 69.8741 214.135 69.8741 218.238 65.3498C222.341 60.8256 222.341 53.495 218.238 48.9707L176.889 3.38654L176.885 3.39187ZM320.747 201.003C324.841 205.527 331.498 205.527 335.601 201.003C339.704 196.479 339.704 189.148 335.601 184.624L294.262 139.04C293.29 137.978 292.129 137.13 290.856 136.538C289.564 135.951 288.21 135.647 286.836 135.647H286.826C286.69 135.647 286.589 135.716 286.458 135.727C285.215 135.769 283.986 136.009 282.829 136.532C281.765 137.029 280.841 137.775 279.989 138.613C279.815 138.773 279.588 138.837 279.423 139.008L237.828 184.603C233.725 189.106 233.706 196.447 237.789 200.982C239.841 203.255 242.55 204.396 245.236 204.396C247.921 204.396 250.601 203.276 252.643 201.025L276.327 175.063V258.122L237.828 300.302C233.725 304.816 233.706 312.147 237.789 316.692C241.883 321.227 248.54 321.248 252.643 316.735L286.811 279.282L320.752 316.708C322.794 318.97 325.489 320.101 328.179 320.101C330.869 320.101 333.554 318.97 335.606 316.708C339.709 312.184 339.709 304.853 335.606 300.329L297.335 258.127V175.186L320.752 200.998L320.747 201.003ZM252.638 133.203L286.807 95.7499L320.747 133.176C322.789 135.439 325.484 136.57 328.174 136.57C330.864 136.57 333.55 135.439 335.601 133.176C339.704 128.652 339.704 121.311 335.601 116.797L294.253 71.2026C290.169 66.689 283.536 66.6783 279.418 71.1812L237.823 116.765C233.72 121.279 233.701 128.61 237.785 133.144C241.878 137.69 248.535 137.701 252.638 133.203ZM86.0159 201.003C90.1091 205.527 96.7666 205.527 100.87 201.003C104.972 196.479 104.972 189.148 100.87 184.624L59.5308 139.04C58.5583 137.978 57.3971 137.13 56.1247 136.538C54.8328 135.951 53.4781 135.647 52.104 135.647H52.0943C51.9589 135.647 51.8572 135.716 51.7266 135.727C50.4977 135.769 49.2542 136.009 48.0979 136.532C47.0189 137.029 46.0851 137.786 45.2239 138.624C45.0594 138.784 44.8562 138.837 44.7014 139.008L3.09657 184.603C-1.01601 189.106 -1.03536 196.447 3.05786 200.982C5.10932 203.255 7.80909 204.396 10.504 204.396C13.1796 204.396 15.8601 203.276 17.9115 201.025L41.5952 175.063V258.122L3.09657 300.302C-1.01601 304.816 -1.03536 312.147 3.05786 316.692C7.14141 321.227 13.799 321.238 17.9115 316.735L52.0798 279.282L86.0207 316.708C88.0625 318.97 90.7574 320.101 93.4475 320.101C96.1376 320.101 98.8229 318.97 100.874 316.708C104.977 312.184 104.977 304.853 100.874 300.329L62.6032 258.127V175.186L86.0207 200.998L86.0159 201.003ZM59.5212 71.2079C55.4376 66.6943 48.8043 66.6836 44.7014 71.1865L3.09657 116.771C-1.01601 121.284 -1.03536 128.615 3.05786 133.15C7.14141 137.685 13.799 137.706 17.9115 133.209L52.0798 95.7552L86.0207 133.182C88.0625 135.444 90.7574 136.575 93.4475 136.575C96.1376 136.575 98.8229 135.444 100.874 133.182C104.977 128.658 104.977 121.316 100.874 116.803L59.5212 71.2079Z" fill="white"/>
+</svg>
diff --git a/public/file.svg b/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/font/PlayfairDisplay-Italic-VariableFont_wght.ttf b/public/font/PlayfairDisplay-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..ca22220
Binary files /dev/null and b/public/font/PlayfairDisplay-Italic-VariableFont_wght.ttf differ
diff --git a/public/font/Switzer-Variable.ttf b/public/font/Switzer-Variable.ttf
new file mode 100644
index 0000000..d6e5cc4
Binary files /dev/null and b/public/font/Switzer-Variable.ttf differ
diff --git a/public/font/miumAccess-Regular.ttf b/public/font/miumAccess-Regular.ttf
new file mode 100644
index 0000000..efd9a92
Binary files /dev/null and b/public/font/miumAccess-Regular.ttf differ
diff --git a/public/images/png/1-1.jpeg b/public/images/png/1-1.jpeg
new file mode 100644
index 0000000..d46cf66
Binary files /dev/null and b/public/images/png/1-1.jpeg differ
diff --git a/public/images/png/1-2.jpeg b/public/images/png/1-2.jpeg
new file mode 100644
index 0000000..031fad2
Binary files /dev/null and b/public/images/png/1-2.jpeg differ
diff --git a/public/images/png/2-1.jpeg b/public/images/png/2-1.jpeg
new file mode 100644
index 0000000..da99a65
Binary files /dev/null and b/public/images/png/2-1.jpeg differ
diff --git a/public/images/png/2-2.jpeg b/public/images/png/2-2.jpeg
new file mode 100644
index 0000000..873ae72
Binary files /dev/null and b/public/images/png/2-2.jpeg differ
diff --git a/public/images/png/4-f.png b/public/images/png/4-f.png
new file mode 100644
index 0000000..f8eb1a9
Binary files /dev/null and b/public/images/png/4-f.png differ
diff --git a/public/images/png/Aerial View of Urban Crossroad and Park 1.png b/public/images/png/Aerial View of Urban Crossroad and Park 1.png
new file mode 100644
index 0000000..6c70778
Binary files /dev/null and b/public/images/png/Aerial View of Urban Crossroad and Park 1.png differ
diff --git a/public/images/png/Avatar (1).png b/public/images/png/Avatar (1).png
new file mode 100644
index 0000000..b25da59
Binary files /dev/null and b/public/images/png/Avatar (1).png differ
diff --git a/public/images/png/Avatar (2).png b/public/images/png/Avatar (2).png
new file mode 100644
index 0000000..8994ba6
Binary files /dev/null and b/public/images/png/Avatar (2).png differ
diff --git a/public/images/png/Avatar (3).png b/public/images/png/Avatar (3).png
new file mode 100644
index 0000000..25c18b2
Binary files /dev/null and b/public/images/png/Avatar (3).png differ
diff --git a/public/images/png/Avatar (4).png b/public/images/png/Avatar (4).png
new file mode 100644
index 0000000..85d70cc
Binary files /dev/null and b/public/images/png/Avatar (4).png differ
diff --git a/public/images/png/Avatar.png b/public/images/png/Avatar.png
new file mode 100644
index 0000000..47372e3
Binary files /dev/null and b/public/images/png/Avatar.png differ
diff --git a/public/images/png/Blob 5.png b/public/images/png/Blob 5.png
new file mode 100644
index 0000000..0372804
Binary files /dev/null and b/public/images/png/Blob 5.png differ
diff --git a/public/images/png/Enchanted Verdant Canopy Road 2.png b/public/images/png/Enchanted Verdant Canopy Road 2.png
new file mode 100644
index 0000000..c9df355
Binary files /dev/null and b/public/images/png/Enchanted Verdant Canopy Road 2.png differ
diff --git a/public/images/png/Urban Park Pathway 1.png b/public/images/png/Urban Park Pathway 1.png
new file mode 100644
index 0000000..2336951
Binary files /dev/null and b/public/images/png/Urban Park Pathway 1.png differ
diff --git a/public/images/png/bg-1.png b/public/images/png/bg-1.png
new file mode 100644
index 0000000..c6398ab
Binary files /dev/null and b/public/images/png/bg-1.png differ
diff --git a/public/images/png/challenge-1.png b/public/images/png/challenge-1.png
new file mode 100644
index 0000000..88a483d
Binary files /dev/null and b/public/images/png/challenge-1.png differ
diff --git a/public/images/png/challenge-2.png b/public/images/png/challenge-2.png
new file mode 100644
index 0000000..3ae4d78
Binary files /dev/null and b/public/images/png/challenge-2.png differ
diff --git a/public/images/png/challenge-3.png b/public/images/png/challenge-3.png
new file mode 100644
index 0000000..a4b1c68
Binary files /dev/null and b/public/images/png/challenge-3.png differ
diff --git a/public/images/png/citiy-1.png b/public/images/png/citiy-1.png
new file mode 100644
index 0000000..5722748
Binary files /dev/null and b/public/images/png/citiy-1.png differ
diff --git a/public/images/png/f-1.png b/public/images/png/f-1.png
new file mode 100644
index 0000000..3da0a35
Binary files /dev/null and b/public/images/png/f-1.png differ
diff --git a/public/images/png/f-2.png b/public/images/png/f-2.png
new file mode 100644
index 0000000..7c0861c
Binary files /dev/null and b/public/images/png/f-2.png differ
diff --git a/public/images/png/forest 1.png b/public/images/png/forest 1.png
new file mode 100644
index 0000000..bab928a
Binary files /dev/null and b/public/images/png/forest 1.png differ
diff --git a/public/images/png/grainy.png b/public/images/png/grainy.png
new file mode 100644
index 0000000..3800663
Binary files /dev/null and b/public/images/png/grainy.png differ
diff --git a/public/images/png/h-f.png b/public/images/png/h-f.png
new file mode 100644
index 0000000..aba7e0b
Binary files /dev/null and b/public/images/png/h-f.png differ
diff --git a/public/images/png/hero-2.png b/public/images/png/hero-2.png
new file mode 100644
index 0000000..48c7d4c
Binary files /dev/null and b/public/images/png/hero-2.png differ
diff --git a/public/images/png/hero-3.png b/public/images/png/hero-3.png
new file mode 100644
index 0000000..c9b0ded
Binary files /dev/null and b/public/images/png/hero-3.png differ
diff --git a/public/images/png/hero-bg.png b/public/images/png/hero-bg.png
new file mode 100644
index 0000000..aec7bec
Binary files /dev/null and b/public/images/png/hero-bg.png differ
diff --git a/public/images/png/impact-2.png b/public/images/png/impact-2.png
new file mode 100644
index 0000000..3ea5952
Binary files /dev/null and b/public/images/png/impact-2.png differ
diff --git a/public/images/png/impact-3.png b/public/images/png/impact-3.png
new file mode 100644
index 0000000..c99b950
Binary files /dev/null and b/public/images/png/impact-3.png differ
diff --git a/public/images/png/impact-5.png b/public/images/png/impact-5.png
new file mode 100644
index 0000000..80bcffc
Binary files /dev/null and b/public/images/png/impact-5.png differ
diff --git a/public/images/png/impact-6.png b/public/images/png/impact-6.png
new file mode 100644
index 0000000..0828ad0
Binary files /dev/null and b/public/images/png/impact-6.png differ
diff --git a/public/images/png/impact.png b/public/images/png/impact.png
new file mode 100644
index 0000000..7c22b88
Binary files /dev/null and b/public/images/png/impact.png differ
diff --git a/public/images/png/product.png b/public/images/png/product.png
new file mode 100644
index 0000000..a8ce465
Binary files /dev/null and b/public/images/png/product.png differ
diff --git a/public/images/png/rural-landscape-with-green-trees 1.png b/public/images/png/rural-landscape-with-green-trees 1.png
new file mode 100644
index 0000000..0e139a6
Binary files /dev/null and b/public/images/png/rural-landscape-with-green-trees 1.png differ
diff --git a/public/images/png/side-view-forest-wardens-wearing-vests 1.png b/public/images/png/side-view-forest-wardens-wearing-vests 1.png
new file mode 100644
index 0000000..e0711c9
Binary files /dev/null and b/public/images/png/side-view-forest-wardens-wearing-vests 1.png differ
diff --git a/public/images/png/thimbnail-3.png b/public/images/png/thimbnail-3.png
new file mode 100644
index 0000000..d5f8ce7
Binary files /dev/null and b/public/images/png/thimbnail-3.png differ
diff --git a/public/images/png/thumbnail-2.png b/public/images/png/thumbnail-2.png
new file mode 100644
index 0000000..e6d06f9
Binary files /dev/null and b/public/images/png/thumbnail-2.png differ
diff --git a/public/images/png/tree-view (1).jpeg b/public/images/png/tree-view (1).jpeg
new file mode 100644
index 0000000..4a74208
Binary files /dev/null and b/public/images/png/tree-view (1).jpeg differ
diff --git a/public/images/png/tree-view (2).jpeg b/public/images/png/tree-view (2).jpeg
new file mode 100644
index 0000000..77572ea
Binary files /dev/null and b/public/images/png/tree-view (2).jpeg differ
diff --git a/public/images/png/tree-view (3).jpeg b/public/images/png/tree-view (3).jpeg
new file mode 100644
index 0000000..790a600
Binary files /dev/null and b/public/images/png/tree-view (3).jpeg differ
diff --git a/public/images/svg/arrow.svg b/public/images/svg/arrow.svg
new file mode 100644
index 0000000..bd4d63c
--- /dev/null
+++ b/public/images/svg/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 0C11.3333 0.525583 11.8525 1.31042 12.3781 1.96917C13.0539 2.81917 13.8614 3.56079 14.7872 4.12675C15.4813 4.55104 16.3228 4.95833 17 4.95833M17 4.95833C16.3228 4.95833 15.4806 5.36563 14.7872 5.78992C13.8614 6.35658 13.0539 7.09821 12.3781 7.94679C11.8525 8.60625 11.3333 9.3925 11.3333 9.91667M17 4.95833H0" stroke="white"/>
+</svg>
diff --git a/public/images/svg/dark-logo.svg b/public/images/svg/dark-logo.svg
new file mode 100644
index 0000000..636b3af
--- /dev/null
+++ b/public/images/svg/dark-logo.svg
@@ -0,0 +1,12 @@
+<svg width="125" height="29" viewBox="0 0 125 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_97_93)">
+<path d="M47.3196 9.56261L49.62 3.36827H52.0663L48.5508 11.9943H46.4286L45.1163 8.44533L43.8203 11.9943H41.6981L38.1826 3.36827H40.6289L42.9293 9.56261L43.7231 7.21303L42.2327 3.36827H44.3063L45.1163 5.96431L45.9426 3.36827H48.0162L46.5096 7.21303L47.3196 9.56261ZM61.1384 6.47365V11.9943H58.5464V7.14731C58.5464 6.58867 58.4357 6.1779 58.2143 5.91501C57.9929 5.65212 57.6932 5.52068 57.3151 5.52068C57.1639 5.52068 56.9992 5.55628 56.821 5.62748C56.6428 5.69868 56.47 5.80274 56.3026 5.93966C56.1352 6.07658 55.9813 6.23815 55.8409 6.42436C55.7005 6.61058 55.5925 6.8187 55.5169 7.04872V11.9943H52.9249V0H55.5169V4.81416C55.8301 4.29934 56.2432 3.90227 56.7562 3.62295C57.2692 3.34363 57.839 3.20397 58.4654 3.20397C59.0378 3.20397 59.4995 3.30529 59.8505 3.50793C60.2015 3.71058 60.4715 3.96799 60.6605 4.28017C60.8495 4.59235 60.9764 4.94287 61.0412 5.33173C61.106 5.72059 61.1384 6.10123 61.1384 6.47365ZM65.4153 11.9943H62.8232V3.36827H65.4153V11.9943ZM65.4153 2.38244H62.8232V0H65.4153V2.38244ZM70.729 12.1586C70.3726 12.1586 70.0027 12.1313 69.6193 12.0765C69.2359 12.0217 68.8551 11.9478 68.4771 11.8547C68.0991 11.7616 67.7373 11.6466 67.3917 11.5096C67.0461 11.3727 66.7437 11.2221 66.4845 11.0578L67.5051 9.28329C68.0667 9.6119 68.6121 9.86383 69.1413 10.0391C69.6706 10.2144 70.1782 10.302 70.6642 10.302C71.0422 10.302 71.3311 10.2417 71.5309 10.1212C71.7307 10.0008 71.8306 9.8255 71.8306 9.59547C71.8306 9.36544 71.6956 9.18744 71.4256 9.06147C71.1556 8.9355 70.6912 8.78489 70.0324 8.60963C69.46 8.45628 68.9739 8.30293 68.5743 8.14958C68.1747 7.99622 67.8534 7.8237 67.6104 7.63201C67.3674 7.44032 67.1919 7.22398 67.0839 6.983C66.9759 6.74202 66.9219 6.45722 66.9219 6.12861C66.9219 5.69046 67.011 5.29065 67.1892 4.92918C67.3674 4.56771 67.6131 4.261 67.9263 4.00906C68.2395 3.75713 68.6094 3.55996 69.036 3.41756C69.4627 3.27517 69.9298 3.20397 70.4374 3.20397C71.0314 3.20397 71.6389 3.29433 72.2599 3.47507C72.8809 3.65581 73.4884 3.905 74.0824 4.22266L73.0618 5.88215C72.5326 5.5864 72.0601 5.37007 71.6443 5.23314C71.2285 5.09622 70.8262 5.02776 70.4374 5.02776C70.1134 5.02776 69.8461 5.08527 69.6355 5.20028C69.4249 5.3153 69.3196 5.49877 69.3196 5.75071C69.3196 5.8712 69.3466 5.97252 69.4006 6.05467C69.4546 6.13683 69.5437 6.2135 69.6679 6.2847C69.7921 6.3559 69.9568 6.42162 70.162 6.48187C70.3672 6.54211 70.621 6.61058 70.9234 6.68725C71.5498 6.85156 72.079 7.01586 72.511 7.18017C72.943 7.34448 73.294 7.52795 73.564 7.7306C73.834 7.93324 74.0284 8.16601 74.1472 8.42889C74.266 8.69178 74.3254 9.00397 74.3254 9.36544C74.3254 9.79263 74.2417 10.1788 74.0743 10.5238C73.9069 10.8688 73.6666 11.1619 73.3534 11.4028C73.0402 11.6438 72.6622 11.83 72.2194 11.9615C71.7766 12.0929 71.2798 12.1586 70.729 12.1586ZM80.9352 12.1586C80.2871 12.1586 79.7255 12.0217 79.2503 11.7479C78.7751 11.474 78.4025 11.0907 78.1325 10.5977V15.4941H75.5405V3.36827H77.8085V4.76487C78.1217 4.27195 78.5105 3.88857 78.9749 3.61473C79.4393 3.34089 79.9955 3.20397 80.6435 3.20397C81.216 3.20397 81.7452 3.31898 82.2312 3.54901C82.7172 3.77904 83.1357 4.09396 83.4867 4.49377C83.8377 4.89358 84.1131 5.36459 84.3129 5.9068C84.5127 6.44901 84.6126 7.03229 84.6126 7.65666C84.6126 8.30293 84.5208 8.89991 84.3372 9.44759C84.1536 9.99528 83.8971 10.469 83.5677 10.8688C83.2383 11.2687 82.8495 11.5836 82.4013 11.8136C81.9531 12.0436 81.4644 12.1586 80.9352 12.1586ZM80.0441 9.94051C80.3249 9.94051 80.5814 9.87753 80.8137 9.75156C81.0459 9.62559 81.2484 9.45855 81.4212 9.25043C81.594 9.0423 81.7263 8.79858 81.8181 8.51926C81.9099 8.23994 81.9558 7.94693 81.9558 7.64023C81.9558 7.32257 81.9045 7.02956 81.8019 6.76119C81.6993 6.49282 81.5589 6.26006 81.3807 6.06289C81.2025 5.86572 80.9892 5.71237 80.7407 5.60283C80.4923 5.4933 80.2169 5.43853 79.9145 5.43853C79.5581 5.43853 79.2179 5.54533 78.8939 5.75892C78.5699 5.97252 78.3161 6.26006 78.1325 6.62153V8.39603C78.3053 8.83418 78.5672 9.20113 78.9182 9.49688C79.2692 9.79263 79.6445 9.94051 80.0441 9.94051ZM89.9587 12.1586C89.2459 12.1586 88.606 12.0409 88.039 11.8054C87.472 11.5699 86.9914 11.2495 86.5971 10.8442C86.2029 10.4389 85.9032 9.97063 85.698 9.43938C85.4928 8.90812 85.3902 8.35222 85.3902 7.77167C85.3902 7.14731 85.4928 6.55855 85.698 6.00538C85.9032 5.45222 86.2002 4.96752 86.5891 4.55127C86.9779 4.13503 87.4558 3.80642 88.0228 3.56544C88.5898 3.32446 89.2351 3.20397 89.9587 3.20397C90.6823 3.20397 91.3249 3.32446 91.8865 3.56544C92.4481 3.80642 92.9234 4.13229 93.3122 4.54306C93.701 4.95382 93.9953 5.42757 94.1951 5.96431C94.3949 6.50104 94.4948 7.06516 94.4948 7.65666C94.4948 7.81001 94.4894 7.96062 94.4786 8.1085C94.4678 8.25637 94.4516 8.38508 94.43 8.49462H88.1443C88.1875 9.07517 88.3954 9.51605 88.768 9.81728C89.1406 10.1185 89.5645 10.2691 90.0397 10.2691C90.4177 10.2691 90.7822 10.176 91.1332 9.9898C91.4842 9.80359 91.7191 9.55165 91.8379 9.23399L94.0412 9.85836C93.7064 10.5375 93.188 11.0907 92.486 11.5178C91.7839 11.945 90.9415 12.1586 89.9587 12.1586ZM88.0957 6.86799H91.7569C91.7029 6.3203 91.5085 5.88763 91.1737 5.56997C90.8389 5.25231 90.4231 5.09348 89.9263 5.09348C89.4187 5.09348 89.0002 5.25505 88.6708 5.57819C88.3414 5.90132 88.1497 6.33126 88.0957 6.86799ZM101.056 3.25326V5.61926C100.429 5.63022 99.8652 5.73428 99.363 5.93144C98.8608 6.12861 98.4909 6.42436 98.2533 6.8187V11.9943H95.6612V3.36827H98.0426V5.10991C98.3451 4.52937 98.7258 4.07753 99.1848 3.75439C99.6438 3.43126 100.132 3.25873 100.651 3.23683C100.867 3.23683 101.002 3.2423 101.056 3.25326ZM104.75 11.9943H102.158V3.36827H104.75V11.9943ZM104.75 2.38244H102.158V0H104.75V2.38244ZM114.713 6.47365V11.9943H112.121V7.14731C112.121 6.57771 112.015 6.16421 111.805 5.9068C111.594 5.64939 111.316 5.52068 110.97 5.52068C110.787 5.52068 110.601 5.55902 110.412 5.63569C110.223 5.71237 110.044 5.81917 109.877 5.95609C109.71 6.09301 109.556 6.25458 109.415 6.44079C109.275 6.62701 109.167 6.82965 109.091 7.04872V11.9943H106.499V3.36827H108.832V4.81416C109.145 4.29934 109.588 3.90227 110.16 3.62295C110.733 3.34363 111.392 3.20397 112.137 3.20397C112.688 3.20397 113.133 3.30529 113.473 3.50793C113.814 3.71058 114.076 3.97347 114.259 4.2966C114.443 4.61974 114.564 4.97299 114.624 5.35637C114.683 5.73975 114.713 6.11218 114.713 6.47365ZM119.702 12.0272C119.141 12.0272 118.631 11.9122 118.171 11.6822C117.712 11.4521 117.318 11.1399 116.989 10.7456C116.659 10.3513 116.403 9.89122 116.219 9.36544C116.036 8.83966 115.944 8.27554 115.944 7.67309C115.944 7.03777 116.041 6.44901 116.236 5.9068C116.43 5.36459 116.7 4.89358 117.046 4.49377C117.391 4.09396 117.807 3.77904 118.293 3.54901C118.779 3.31898 119.314 3.20397 119.897 3.20397C120.534 3.20397 121.096 3.34363 121.582 3.62295C122.068 3.90227 122.456 4.28838 122.748 4.7813V3.36827H125V11.4028C125 12.0601 124.878 12.6516 124.635 13.1773C124.392 13.7031 124.055 14.1495 123.623 14.5164C123.191 14.8834 122.672 15.1654 122.068 15.3626C121.463 15.5598 120.799 15.6584 120.075 15.6584C119.157 15.6584 118.374 15.5105 117.726 15.2147C117.078 14.919 116.511 14.4918 116.025 13.9331L117.402 12.5037C117.715 12.8652 118.107 13.1527 118.576 13.3663C119.046 13.5799 119.546 13.6867 120.075 13.6867C120.388 13.6867 120.685 13.6429 120.966 13.5552C121.247 13.4676 121.495 13.3334 121.711 13.1527C121.927 12.972 122.097 12.7364 122.222 12.4462C122.346 12.1559 122.408 11.8081 122.408 11.4028V10.5649C122.149 11.0468 121.773 11.411 121.282 11.6575C120.791 11.904 120.264 12.0272 119.702 12.0272ZM120.61 9.94051C121.009 9.94051 121.363 9.82823 121.671 9.60368C121.979 9.37913 122.224 9.0916 122.408 8.74108V6.93371C122.235 6.47365 121.97 6.10944 121.614 5.84108C121.258 5.57271 120.88 5.43853 120.48 5.43853C120.199 5.43853 119.943 5.50151 119.711 5.62748C119.478 5.75345 119.279 5.92323 119.111 6.13683C118.944 6.35042 118.814 6.59688 118.722 6.8762C118.631 7.15552 118.585 7.44306 118.585 7.73881C118.585 8.05647 118.636 8.34948 118.739 8.61785C118.841 8.88621 118.982 9.11898 119.16 9.31615C119.338 9.51331 119.551 9.66667 119.8 9.7762C120.048 9.88574 120.318 9.94051 120.61 9.94051Z" fill="#000000"/>
+<path d="M43.7555 26.289L44.2415 28.3757C43.8851 28.5291 43.4801 28.6715 43.0265 28.8029C42.5729 28.9344 42.1085 29.0001 41.6333 29.0001C41.3093 29.0001 41.0042 28.959 40.718 28.8769C40.4318 28.7947 40.1807 28.6633 39.9646 28.4825C39.7486 28.3018 39.5785 28.0636 39.4543 27.7678C39.3301 27.4721 39.268 27.1161 39.268 26.6998V22.1978H38.1826V20.2097H39.268V17.4658H41.8601V20.2097H43.5935V22.1978H41.8601V25.7961C41.8601 26.0809 41.933 26.2863 42.0788 26.4123C42.2246 26.5382 42.4055 26.6012 42.6215 26.6012C42.8051 26.6012 42.9995 26.5684 43.2047 26.5026C43.4099 26.4369 43.5935 26.3657 43.7555 26.289ZM50.6244 20.0947V22.4607C49.998 22.4717 49.4337 22.5757 48.9315 22.7729C48.4293 22.9701 48.0594 23.2658 47.8218 23.6602V28.8358H45.2297V20.2097H47.6112V21.9514C47.9136 21.3708 48.2943 20.919 48.7533 20.5958C49.2123 20.2727 49.701 20.1002 50.2194 20.0783C50.4354 20.0783 50.5704 20.0838 50.6244 20.0947ZM55.8085 29.0001C55.0957 29.0001 54.4558 28.8823 53.8888 28.6468C53.3218 28.4113 52.8412 28.0909 52.447 27.6856C52.0528 27.2804 51.7531 26.8121 51.5478 26.2808C51.3426 25.7496 51.24 25.1937 51.24 24.6131C51.24 23.9888 51.3426 23.4 51.5478 22.8468C51.7531 22.2937 52.0501 21.809 52.4389 21.3927C52.8277 20.9765 53.3056 20.6479 53.8726 20.4069C54.4396 20.1659 55.0849 20.0454 55.8085 20.0454C56.5321 20.0454 57.1747 20.1659 57.7364 20.4069C58.298 20.6479 58.7732 20.9738 59.162 21.3845C59.5508 21.7953 59.8451 22.269 60.0449 22.8058C60.2447 23.3425 60.3446 23.9066 60.3446 24.4981C60.3446 24.6515 60.3392 24.8021 60.3284 24.95C60.3176 25.0978 60.3014 25.2265 60.2798 25.3361H53.9941C54.0373 25.9166 54.2452 26.3575 54.6178 26.6587C54.9904 26.96 55.4143 27.1106 55.8895 27.1106C56.2675 27.1106 56.632 27.0175 56.983 26.8313C57.334 26.645 57.569 26.3931 57.6878 26.0755L59.891 26.6998C59.5562 27.3789 59.0378 27.9321 58.3358 28.3593C57.6338 28.7865 56.7913 29.0001 55.8085 29.0001ZM53.9455 23.7094H57.6068C57.5528 23.1618 57.3583 22.7291 57.0235 22.4114C56.6887 22.0938 56.2729 21.9349 55.7761 21.9349C55.2685 21.9349 54.85 22.0965 54.5206 22.4196C54.1912 22.7428 53.9995 23.1727 53.9455 23.7094ZM65.5935 29.0001C64.8807 29.0001 64.2408 28.8823 63.6738 28.6468C63.1067 28.4113 62.6261 28.0909 62.2319 27.6856C61.8377 27.2804 61.538 26.8121 61.3328 26.2808C61.1276 25.7496 61.025 25.1937 61.025 24.6131C61.025 23.9888 61.1276 23.4 61.3328 22.8468C61.538 22.2937 61.835 21.809 62.2238 21.3927C62.6126 20.9765 63.0905 20.6479 63.6576 20.4069C64.2246 20.1659 64.8699 20.0454 65.5935 20.0454C66.3171 20.0454 66.9597 20.1659 67.5213 20.4069C68.0829 20.6479 68.5581 20.9738 68.9469 21.3845C69.3358 21.7953 69.6301 22.269 69.8299 22.8058C70.0297 23.3425 70.1296 23.9066 70.1296 24.4981C70.1296 24.6515 70.1242 24.8021 70.1134 24.95C70.1026 25.0978 70.0864 25.2265 70.0648 25.3361H63.7791C63.8223 25.9166 64.0302 26.3575 64.4028 26.6587C64.7754 26.96 65.1993 27.1106 65.6745 27.1106C66.0525 27.1106 66.417 27.0175 66.768 26.8313C67.119 26.645 67.3539 26.3931 67.4727 26.0755L69.676 26.6998C69.3412 27.3789 68.8227 27.9321 68.1207 28.3593C67.4187 28.7865 66.5763 29.0001 65.5935 29.0001ZM63.7305 23.7094H67.3917C67.3377 23.1618 67.1433 22.7291 66.8085 22.4114C66.4737 22.0938 66.0579 21.9349 65.5611 21.9349C65.0535 21.9349 64.635 22.0965 64.3056 22.4196C63.9762 22.7428 63.7845 23.1727 63.7305 23.7094ZM74.8601 29.0001C74.5036 29.0001 74.1337 28.9727 73.7503 28.9179C73.3669 28.8632 72.9862 28.7892 72.6082 28.6961C72.2302 28.603 71.8684 28.488 71.5228 28.3511C71.1772 28.2142 70.8748 28.0636 70.6156 27.8992L71.6362 26.1247C72.1978 26.4534 72.7432 26.7053 73.2724 26.8806C73.8016 27.0558 74.3092 27.1434 74.7952 27.1434C75.1733 27.1434 75.4622 27.0832 75.662 26.9627C75.8618 26.8422 75.9617 26.667 75.9617 26.4369C75.9617 26.2069 75.8267 26.0289 75.5567 25.9029C75.2867 25.777 74.8223 25.6263 74.1634 25.4511C73.591 25.2977 73.105 25.1444 72.7054 24.991C72.3058 24.8377 71.9845 24.6652 71.7415 24.4735C71.4985 24.2818 71.323 24.0654 71.215 23.8245C71.107 23.5835 71.053 23.2987 71.053 22.9701C71.053 22.5319 71.1421 22.1321 71.3203 21.7706C71.4985 21.4092 71.7442 21.1025 72.0574 20.8505C72.3706 20.5986 72.7405 20.4014 73.1671 20.259C73.5937 20.1166 74.0608 20.0454 74.5684 20.0454C75.1625 20.0454 75.77 20.1358 76.391 20.3165C77.012 20.4973 77.6195 20.7465 78.2135 21.0641L77.1929 22.7236C76.6637 22.4279 76.1912 22.2115 75.7754 22.0746C75.3596 21.9377 74.9573 21.8692 74.5684 21.8692C74.2444 21.8692 73.9771 21.9267 73.7665 22.0417C73.5559 22.1568 73.4506 22.3402 73.4506 22.5922C73.4506 22.7127 73.4776 22.814 73.5316 22.8961C73.5856 22.9783 73.6747 23.055 73.7989 23.1262C73.9231 23.1974 74.0878 23.2631 74.293 23.3233C74.4982 23.3836 74.752 23.452 75.0545 23.5287C75.6809 23.693 76.2101 23.8573 76.6421 24.0216C77.0741 24.1859 77.4251 24.3694 77.6951 24.5721C77.9651 24.7747 78.1595 25.0075 78.2783 25.2704C78.3971 25.5332 78.4565 25.8454 78.4565 26.2069C78.4565 26.6341 78.3728 27.0202 78.2054 27.3653C78.038 27.7103 77.7977 28.0033 77.4845 28.2443C77.1713 28.4853 76.7933 28.6715 76.3505 28.8029C75.9077 28.9344 75.4109 29.0001 74.8601 29.0001Z" fill="#000000"/>
+<path d="M16.738 15.1861V22.2813L20.2976 25.8915C20.6792 26.2785 20.6792 26.9056 20.2976 27.2927C20.1068 27.4862 19.857 27.5829 19.6068 27.5829C19.3566 27.5829 19.106 27.4862 18.9161 27.2927L15.7593 24.091L12.5813 27.2949C12.1988 27.6802 11.5796 27.6792 11.1998 27.2913C10.8191 26.9024 10.8209 26.2753 11.2034 25.8892L14.7841 22.2809V15.1756L12.5813 17.3964C12.3905 17.589 12.1417 17.6849 11.8924 17.6849C11.6413 17.6849 11.3906 17.5872 11.1998 17.3928C10.8191 17.0048 10.8209 16.3768 11.2034 15.9916L15.073 12.0912C15.0874 12.0766 15.1072 12.072 15.1225 12.0583C15.2026 11.9867 15.2886 11.9218 15.3885 11.8794C15.4983 11.8338 15.6144 11.8137 15.7309 11.8096C15.7413 11.8096 15.7498 11.8036 15.7606 11.8036H15.7615C15.8884 11.8036 16.0153 11.8297 16.1346 11.8799C16.2538 11.9301 16.3618 12.0026 16.4523 12.0939L20.2972 15.9934C20.6788 16.3805 20.6788 17.0076 20.2972 17.3946C19.9155 17.7816 19.2963 17.7816 18.9156 17.3946L16.7376 15.1865L16.738 15.1861ZM16.4518 6.29072C16.0711 5.9046 15.4537 5.90368 15.0735 6.28889L11.2038 10.1884C10.8213 10.5745 10.8195 11.2016 11.2002 11.5896C11.5801 11.9775 12.1993 11.9794 12.5818 11.5946L15.7597 8.39064L18.9165 11.5923C19.1064 11.7858 19.3571 11.8826 19.6073 11.8826C19.8575 11.8826 20.1073 11.7858 20.2981 11.5923C20.6797 11.2053 20.6797 10.5773 20.2981 10.1912L16.4518 6.29072ZM16.4518 0.488891C16.0711 0.102772 15.4537 0.10186 15.0735 0.487066L11.2038 4.38659C10.8213 4.77271 10.8195 5.39981 11.2002 5.78776C11.391 5.98219 11.6422 6.07986 11.8928 6.07986C12.1417 6.07986 12.391 5.98401 12.5818 5.79232L15.7597 2.58836L18.9165 5.78913C19.2972 6.17616 19.9164 6.17616 20.2981 5.78913C20.6797 5.4021 20.6797 4.77499 20.2981 4.38796L16.4523 0.488434L16.4518 0.488891ZM29.8324 17.3937C30.2131 17.7807 30.8323 17.7807 31.2139 17.3937C31.5955 17.0067 31.5955 16.3796 31.2139 15.9925L27.369 12.093C27.2786 12.0022 27.1706 11.9296 27.0522 11.8789C26.9321 11.8287 26.8061 11.8027 26.6783 11.8027H26.6774C26.6648 11.8027 26.6553 11.8087 26.6432 11.8096C26.5275 11.8132 26.4132 11.8338 26.3057 11.8785C26.2067 11.9209 26.1207 11.9848 26.0415 12.0565C26.0253 12.0702 26.0042 12.0757 25.9888 12.0903L22.1201 15.9907C21.7385 16.3759 21.7367 17.0039 22.1165 17.3919C22.3073 17.5863 22.5593 17.684 22.8091 17.684C23.0588 17.684 23.3082 17.5881 23.4981 17.3955L25.7008 15.1746V22.28L22.1201 25.8883C21.7385 26.2744 21.7367 26.9015 22.1165 27.2904C22.4972 27.6783 23.1164 27.6802 23.4981 27.294L26.676 24.0901L29.8328 27.2918C30.0227 27.4853 30.2734 27.582 30.5236 27.582C30.7738 27.582 31.0235 27.4853 31.2143 27.2918C31.5959 26.9047 31.5959 26.2776 31.2143 25.8906L27.6548 22.2804V15.1851L29.8328 17.3932L29.8324 17.3937ZM23.4976 11.5937L26.6756 8.38973L29.8324 11.5914C30.0223 11.7849 30.2729 11.8817 30.5231 11.8817C30.7733 11.8817 31.0231 11.7849 31.2139 11.5914C31.5955 11.2044 31.5955 10.5764 31.2139 10.1902L27.3681 6.2898C26.9883 5.90369 26.3714 5.90277 25.9884 6.28798L22.1197 10.1875C21.7381 10.5736 21.7363 11.2007 22.1161 11.5887C22.4968 11.9775 23.116 11.9784 23.4976 11.5937ZM8.00024 17.3937C8.38095 17.7807 9.00016 17.7807 9.38176 17.3937C9.76337 17.0067 9.76337 16.3796 9.38176 15.9925L5.5369 12.093C5.44645 12.0022 5.33845 11.9296 5.22009 11.8789C5.09994 11.8287 4.97394 11.8027 4.84614 11.8027H4.84524C4.83264 11.8027 4.82319 11.8087 4.81104 11.8096C4.69673 11.8132 4.58108 11.8338 4.47353 11.8785C4.37318 11.9209 4.28633 11.9857 4.20623 12.0574C4.19093 12.0711 4.17202 12.0757 4.15762 12.0903L0.288008 15.9907C-0.0944982 16.3759 -0.0962979 17.0039 0.284409 17.3919C0.475212 17.5863 0.726315 17.684 0.976969 17.684C1.22582 17.684 1.47513 17.5881 1.66593 17.3955L3.86872 15.1746V22.28L0.288008 25.8883C-0.0944982 26.2744 -0.0962979 26.9015 0.284409 27.2904C0.664215 27.6783 1.28343 27.6792 1.66593 27.294L4.84389 24.0901L8.00069 27.2918C8.19059 27.4853 8.44125 27.582 8.69145 27.582C8.94166 27.582 9.19141 27.4853 9.38221 27.2918C9.76382 26.9047 9.76382 26.2776 9.38221 25.8906L5.82265 22.2804V15.1851L8.00069 17.3932L8.00024 17.3937ZM5.536 6.29026C5.15619 5.90414 4.53923 5.90323 4.15762 6.28843L0.288008 10.188C-0.0944982 10.5741 -0.0962979 11.2012 0.284409 11.5891C0.664215 11.9771 1.28343 11.9789 1.66593 11.5941L4.84389 8.39018L8.00069 11.5919C8.19059 11.7854 8.44125 11.8821 8.69145 11.8821C8.94166 11.8821 9.19141 11.7854 9.38221 11.5919C9.76382 11.2048 9.76382 10.5768 9.38221 10.1907L5.536 6.29026Z" fill="#000000"/>
+</g>
+<defs>
+<clipPath id="clip0_97_93">
+<rect width="125" height="29" fill="#000000"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/svg/entypo_tree.svg b/public/images/svg/entypo_tree.svg
new file mode 100644
index 0000000..0c4f07c
--- /dev/null
+++ b/public/images/svg/entypo_tree.svg
@@ -0,0 +1,10 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_121_505)">
+<path d="M33 16.5C33 14.2543 31.7493 12.1836 29.6488 10.5237C29.6455 10.5237 29.6428 10.522 29.6406 10.5188C29.0433 4.62495 23.392 0 16.5 0C9.60795 0 3.9567 4.62495 3.3594 10.5188L3.35115 10.5237C1.2507 12.1836 0 14.2543 0 16.5C0 21.6348 6.51255 25.8538 14.85 26.3505V28.05C14.85 29.7 11.8453 31.2031 11.8453 31.2031C11.7661 31.2457 11.7045 31.3149 11.6715 31.3987C11.6386 31.4824 11.6364 31.5751 11.6655 31.6602C11.6655 31.6602 12.1687 33 13.2 33C14.2312 33 15.0546 32.175 17.1171 32.175C19.1796 32.175 21.1414 32.8878 21.1414 32.8878C21.2346 32.9166 21.3337 32.9207 21.4288 32.8996C21.524 32.8784 21.6121 32.8329 21.6843 32.7673L22.8673 31.5843C22.996 31.4556 22.963 31.2988 22.7914 31.2345C22.7914 31.2345 19.8017 30.1125 19.8017 28.05V26.2003C27.3323 25.2846 33 21.2899 33 16.5ZM3.3 16.5C3.3 14.8186 4.5672 13.2907 6.6363 12.1258C6.6198 11.9345 6.6 11.743 6.6 11.55C6.6 6.9927 11.0336 3.3 16.5 3.3C21.9664 3.3 26.4 6.9927 26.4 11.55C26.4 11.743 26.3802 11.9345 26.3654 12.1258C28.4328 13.2907 29.7 14.8186 29.7 16.5C29.7 19.5756 25.4909 22.1496 19.8017 22.8839V21.7817C19.8127 21.5737 19.8975 21.3766 20.0409 21.2256L23.0653 18.3777C23.2094 18.227 23.2948 18.0298 23.3062 17.8216V16.4175C23.3062 16.236 23.1775 16.1617 23.0224 16.2542L20.0871 17.9817C19.9287 18.0741 19.8017 18.0015 19.8017 17.8183V11.88C19.8017 11.6985 19.6614 11.5962 19.4881 11.6539L15.1635 13.096C15.0754 13.131 14.9993 13.1904 14.944 13.2673C14.8887 13.3442 14.8567 13.4354 14.8517 13.53V17.82C14.8517 18.0015 14.7213 18.0807 14.5596 17.9965L11.2233 16.2409C11.1378 16.2009 11.0423 16.1871 10.949 16.2012C10.8556 16.2152 10.7685 16.2566 10.6986 16.3202L10.1343 16.8844C10.104 16.9141 10.0801 16.9497 10.0643 16.989C10.0485 17.0284 10.041 17.0706 10.0424 17.1129C10.0438 17.1553 10.054 17.1969 10.0724 17.2352C10.0908 17.2734 10.1169 17.3073 10.1491 17.3349L14.6041 21.2305C14.7411 21.351 14.8517 21.5968 14.8517 21.7784V23.0406C8.3424 22.6363 3.3 19.866 3.3 16.5Z" fill="#274B2D"/>
+</g>
+<defs>
+<clipPath id="clip0_121_505">
+<rect width="33" height="33" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/globe.svg b/public/images/svg/globe.svg
similarity index 100%
rename from public/globe.svg
rename to public/images/svg/globe.svg
diff --git a/public/images/svg/googleplus logo.svg b/public/images/svg/googleplus logo.svg
new file mode 100644
index 0000000..5fcddf7
--- /dev/null
+++ b/public/images/svg/googleplus logo.svg	
@@ -0,0 +1,10 @@
+<svg width="181" height="52" viewBox="0 0 181 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_57_40)">
+<path d="M38.6767 18.3892H20.3143V23.7979H33.327C32.6764 31.4421 26.3146 34.6873 20.3143 34.6873C12.6513 34.6873 5.92802 28.6296 5.92802 20.1921C5.92802 11.971 12.2898 5.62481 20.3143 5.62481C26.4592 5.62481 30.1461 9.51904 30.1461 9.51904L33.9777 5.5527C33.9777 5.5527 29.0617 0.144043 20.1697 0.144043C8.81973 0.216158 0 9.8075 0 20.12C0 30.2883 8.24139 40.1681 20.4589 40.1681C31.1582 40.1681 39.0382 32.8123 39.0382 21.995C39.0382 19.6873 38.6767 18.3892 38.6767 18.3892ZM53.7136 14.495C46.1952 14.495 40.7732 20.3363 40.7732 27.2594C40.7732 34.1825 45.9783 40.1681 53.7859 40.1681C60.7983 40.1681 66.5818 34.7594 66.5818 27.4037C66.6541 18.8219 59.9308 14.495 53.7136 14.495ZM53.7859 19.5431C57.4729 19.5431 61.0152 22.4998 61.0152 27.3315C61.0152 32.019 57.5452 35.12 53.7859 35.12C49.6652 35.12 46.412 31.8748 46.412 27.3315C46.412 22.8604 49.6652 19.5431 53.7859 19.5431ZM81.8356 14.495C74.3171 14.495 68.8951 20.3363 68.8951 27.2594C68.8951 34.1825 74.1002 40.1681 81.9079 40.1681C88.9203 40.1681 94.7037 34.7594 94.7037 27.4037C94.776 18.8219 88.0527 14.495 81.8356 14.495ZM81.9079 19.5431C85.5948 19.5431 89.1371 22.4998 89.1371 27.3315C89.1371 32.019 85.6671 35.12 81.9079 35.12C77.7872 35.12 74.534 31.8748 74.534 27.3315C74.6063 22.8604 77.7872 19.5431 81.9079 19.5431ZM109.451 14.495C102.511 14.495 97.0894 20.5527 97.0894 27.3315C97.0894 35.0479 103.379 40.1681 109.307 40.1681C112.994 40.1681 114.946 38.7258 116.392 37.0671V39.5912C116.392 43.9902 113.717 46.6585 109.596 46.6585C105.692 46.6585 103.668 43.7739 103.017 42.1152L98.1015 44.2065C99.8365 47.8844 103.379 51.7787 109.668 51.7787C116.536 51.7787 121.814 47.4517 121.814 38.3652V15.2883H116.392V17.4517C114.729 15.6489 112.488 14.495 109.451 14.495ZM109.958 19.5431C113.355 19.5431 116.825 22.4277 116.825 27.3315C116.825 32.3796 113.355 35.12 109.885 35.12C106.198 35.12 102.8 32.1633 102.8 27.4037C102.728 22.4277 106.343 19.5431 109.958 19.5431ZM145.742 14.4229C139.236 14.4229 133.742 19.6152 133.742 27.2594C133.742 35.3363 139.814 40.1681 146.393 40.1681C151.815 40.1681 155.213 37.2114 157.165 34.5431L152.683 31.5863C151.526 33.3892 149.574 35.12 146.393 35.12C142.778 35.12 141.116 33.1729 140.104 31.2258L157.382 24.0864L156.514 21.995C154.779 17.8844 150.875 14.4229 145.742 14.4229ZM145.959 19.3988C148.345 19.3988 150.008 20.6248 150.731 22.1392L139.236 26.971C138.73 23.221 142.272 19.3988 145.959 19.3988ZM125.573 39.3748H131.212V1.58635H125.573V39.3748ZM180.732 20.3364H173.792V13.4133H168.153V20.3364H161.213V25.9613H168.153V32.8844H173.792V25.9613H180.732V20.3364Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_57_40">
+<rect width="180.732" height="51.9231" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/svg/iconoir_reports.svg b/public/images/svg/iconoir_reports.svg
new file mode 100644
index 0000000..264b264
--- /dev/null
+++ b/public/images/svg/iconoir_reports.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.125 30.625H21.875M13.125 30.625V23.3333M13.125 30.625H5.25C5.01794 30.625 4.79538 30.5328 4.63128 30.3687C4.46719 30.2046 4.375 29.9821 4.375 29.75V24.2083C4.375 23.9763 4.46719 23.7537 4.63128 23.5896C4.79538 23.4255 5.01794 23.3333 5.25 23.3333H13.125M21.875 30.625V13.125M21.875 30.625H29.75C29.9821 30.625 30.2046 30.5328 30.3687 30.3687C30.5328 30.2046 30.625 29.9821 30.625 29.75V5.25C30.625 5.01794 30.5328 4.79538 30.3687 4.63128C30.2046 4.46719 29.9821 4.375 29.75 4.375H22.75C22.5179 4.375 22.2954 4.46719 22.1313 4.63128C21.9672 4.79538 21.875 5.01794 21.875 5.25V13.125M13.125 23.3333V14C13.125 13.7679 13.2172 13.5454 13.3813 13.3813C13.5454 13.2172 13.7679 13.125 14 13.125H21.875" stroke="#274B2D" stroke-width="3"/>
+</svg>
diff --git a/public/images/svg/leaf.svg b/public/images/svg/leaf.svg
new file mode 100644
index 0000000..06539c7
--- /dev/null
+++ b/public/images/svg/leaf.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.56405 2.86276C4.9444 0.717416 8.17515 0.108411 10.7334 0.0138839C12.6655 -0.0571045 14.2635 0.161465 14.9547 0.277288C15.5049 0.369573 15.7607 0.599352 15.8627 1.09552C15.9912 1.71873 16.2342 3.15867 16.1554 4.89976C16.1048 6.01315 15.9207 7.26853 15.4754 8.51045C13.6183 8.33186 11.6609 8.3214 9.81043 8.55715C8.56034 8.71632 7.84967 9.63543 7.75597 10.5964C7.62743 11.9115 7.57478 13.2499 8.14654 14.4937C5.91711 14.7926 3.64871 14.2396 2.00887 12.7615C-0.91547 10.1264 -0.575894 5.69258 2.56405 2.86276Z" fill="#3A6F43"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.95554 9.48181C9.27472 9.56849 8.84849 10.0609 8.78837 10.6781C8.73492 11.2273 8.70795 11.7783 8.70752 12.3296C8.70752 14.0161 9.69557 15.5943 11.3595 16.3662C11.9155 16.624 12.4582 16.813 12.8538 16.813C13.2493 16.813 13.792 16.624 14.3481 16.3662C16.0124 15.5943 17 14.0161 17 12.3296C16.9994 11.7783 16.9723 11.2273 16.9187 10.6781C16.8586 10.0609 16.4328 9.56849 15.752 9.48181C15.1557 9.40596 14.2403 9.34058 12.8538 9.34058C11.4673 9.34058 10.5518 9.40596 9.95554 9.48181Z" fill="#3A6F43"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.445 11.5182C15.493 11.4569 15.5268 11.3876 15.5445 11.3143C15.5622 11.2411 15.5633 11.1654 15.548 11.0917C15.5326 11.018 15.501 10.9478 15.455 10.8854C15.409 10.8229 15.3496 10.7694 15.2802 10.728C15.2108 10.6866 15.133 10.6581 15.0512 10.6443C14.9694 10.6305 14.8854 10.6317 14.8041 10.6477C14.7228 10.6637 14.6459 10.6942 14.5779 10.7374C14.51 10.7807 14.4523 10.8358 14.4084 10.8995L12.6645 13.2735L11.6649 12.2363C11.6116 12.18 11.5464 12.1338 11.4732 12.1003C11.3999 12.0668 11.3201 12.0467 11.2382 12.0412C11.1563 12.0357 11.0739 12.0448 10.996 12.0681C10.918 12.0914 10.846 12.1284 10.784 12.1769C10.722 12.2254 10.6712 12.2846 10.6347 12.3508C10.5982 12.4171 10.5766 12.4893 10.5712 12.5631C10.5658 12.637 10.5766 12.7111 10.6032 12.7811C10.6297 12.8512 10.6714 12.9158 10.7258 12.9712L12.2619 14.5655C12.3248 14.6307 12.4036 14.682 12.4921 14.7153C12.5806 14.7486 12.6765 14.763 12.7722 14.7573C12.8679 14.7517 12.9609 14.7262 13.0439 14.6828C13.1268 14.6394 13.1975 14.5793 13.2504 14.5072L15.445 11.5182Z" fill="#EBF1EC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7511 2.38759C13.6907 2.30593 13.613 2.23581 13.5225 2.18121C13.432 2.12662 13.3304 2.08862 13.2236 2.0694C13.1168 2.05018 13.0069 2.05011 12.9 2.06919C12.7932 2.08827 12.6916 2.12612 12.601 2.1806C11.5333 2.82211 8.67945 4.67939 6.08183 7.17108C3.51656 9.63214 1.03711 12.867 1.03711 16.2527C1.03711 16.4509 1.12448 16.641 1.27999 16.7811C1.4355 16.9213 1.64643 17 1.86636 17C2.08629 17 2.29721 16.9213 2.45272 16.7811C2.60824 16.641 2.6956 16.4509 2.6956 16.2527C2.6956 13.4737 4.77701 10.6062 7.29088 8.19444C9.7724 5.81371 12.516 4.02816 13.521 3.42402C13.704 3.3141 13.831 3.14321 13.8741 2.94892C13.9173 2.75464 13.873 2.55248 13.7511 2.38759Z" fill="#274B2D"/>
+</svg>
diff --git a/public/images/svg/linkedin-plain-wordmark logo.svg b/public/images/svg/linkedin-plain-wordmark logo.svg
new file mode 100644
index 0000000..47cb83d
--- /dev/null
+++ b/public/images/svg/linkedin-plain-wordmark logo.svg	
@@ -0,0 +1,12 @@
+<svg width="208" height="52" viewBox="0 0 208 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_57_48)">
+<path d="M1.37939 7.67499H9.39502V36.8493H24.2255V44.2483H1.37939V7.67499ZM27.7628 19.4713H35.4539V44.2321H27.7628V19.4713ZM31.6084 7.15576C32.4909 7.15576 33.3536 7.41746 34.0874 7.90777C34.8212 8.39807 35.3931 9.09496 35.7308 9.91031C36.0686 10.7257 36.1569 11.6229 35.9848 12.4884C35.8126 13.354 35.3876 14.1491 34.7636 14.7731C34.1395 15.3971 33.3444 15.8221 32.4789 15.9943C31.6133 16.1665 30.7161 16.0781 29.9008 15.7404C29.0854 15.4027 28.3885 14.8307 27.8982 14.0969C27.4079 13.3631 27.1462 12.5004 27.1462 11.6179C27.1462 10.4345 27.6163 9.29951 28.4531 8.46269C29.29 7.62588 30.4249 7.15576 31.6084 7.15576ZM67.6462 7.67499H75.3373V29.5314L84.0669 19.4388H93.4942L83.4016 30.9106L93.2832 44.2483H83.6126L75.4347 31.9977H75.3373V44.2483H67.6462V7.67499ZM39.7213 19.4713H47.0555V22.8625H47.1528C47.8927 21.5993 48.9605 20.5599 50.2431 19.8543C51.5257 19.1487 52.9753 18.8033 54.4383 18.8547C62.243 18.8547 63.6709 23.9821 63.6709 30.651V44.2483H56.0447V32.1924C56.0447 29.3204 56.0447 25.702 52.0368 25.702C48.029 25.702 47.4124 28.8337 47.4124 32.0626V44.3132H39.7213V19.4713Z" fill="black"/>
+<path d="M109.704 28.9633C109.719 28.3389 109.608 27.718 109.376 27.1381C109.144 26.5581 108.797 26.0314 108.355 25.5898C107.914 25.1482 107.387 24.8009 106.807 24.5692C106.227 24.3374 105.606 24.2259 104.982 24.2415C103.637 24.1565 102.313 24.6042 101.296 25.4878C100.279 26.3714 99.6502 27.6199 99.5463 28.9633H109.704ZM116.194 39.9482C114.911 41.4866 113.302 42.7211 111.484 43.5628C109.665 44.4045 107.683 44.8326 105.68 44.816C97.9886 44.816 91.8228 39.6886 91.8228 31.7217C91.8228 23.7547 97.9886 18.6436 105.68 18.6436C112.868 18.6436 117.379 23.771 117.379 31.7217V34.1394H99.5301C99.7421 35.5148 100.446 36.7665 101.512 37.6618C102.577 38.5571 103.931 39.0352 105.323 39.0071C106.419 39.0056 107.496 38.7265 108.455 38.1959C109.414 37.6653 110.224 36.9006 110.807 35.9729L116.194 39.9482ZM133.426 25.4422C132.17 25.4035 130.931 25.7405 129.868 26.41C128.805 27.0796 127.965 28.0513 127.458 29.2007C126.95 30.3501 126.797 31.6249 127.018 32.8618C127.239 34.0988 127.824 35.2415 128.699 36.1439C129.573 37.0462 130.697 37.667 131.927 37.9267C133.156 38.1864 134.435 38.0733 135.6 37.6019C136.764 37.1304 137.762 36.322 138.465 35.2802C139.167 34.2384 139.543 33.0107 139.543 31.7541C139.612 30.9203 139.501 30.0815 139.218 29.2943C138.934 28.5071 138.485 27.7901 137.9 27.1916C137.316 26.5931 136.609 26.1272 135.829 25.8254C135.049 25.5236 134.213 25.3929 133.377 25.4422M146.683 44.2319H139.543V40.9867C138.651 42.1763 137.499 43.1458 136.174 43.8208C134.849 44.4959 133.388 44.8585 131.901 44.8809C124.502 44.8809 119.634 39.5426 119.634 31.9975C119.634 25.069 123.95 18.7085 130.992 18.7085C132.473 18.5784 133.963 18.8051 135.338 19.3698C136.713 19.9344 137.932 20.8205 138.894 21.9537H138.992V7.6748H146.683V44.2319Z" fill="black"/>
+<path d="M202.175 -0.000216432H157.976C157.474 -0.00668441 156.976 0.0868692 156.51 0.274984C156.045 0.4631 155.622 0.742008 155.265 1.09544C154.909 1.44888 154.626 1.86976 154.434 2.33353C154.242 2.79731 154.144 3.29469 154.147 3.79666V48.1747C154.151 48.6725 154.253 49.1647 154.448 49.6228C154.643 50.0809 154.927 50.496 155.282 50.8443C155.638 51.1926 156.059 51.4671 156.522 51.6522C156.984 51.8373 157.478 51.9293 157.976 51.9229H202.175C202.678 51.9358 203.178 51.8487 203.647 51.6668C204.116 51.4848 204.544 51.2115 204.906 50.8628C205.268 50.5141 205.558 50.0969 205.757 49.6355C205.957 49.174 206.063 48.6775 206.07 48.1747V3.79666C206.07 3.28975 205.968 2.78794 205.772 2.32081C205.575 1.85369 205.286 1.43072 204.923 1.07685C204.56 0.722974 204.13 0.44536 203.658 0.260377C203.186 0.0753938 202.682 -0.0132142 202.175 -0.000216432ZM169.529 44.248H161.838V19.4709H169.529V44.248ZM165.683 16.1122C164.801 16.1122 163.938 15.8505 163.204 15.3602C162.47 14.8699 161.898 14.173 161.561 13.3576C161.223 12.5423 161.135 11.6451 161.307 10.7795C161.479 9.91393 161.904 9.11885 162.528 8.49481C163.152 7.87077 163.947 7.4458 164.813 7.27363C165.678 7.10145 166.575 7.18982 167.391 7.52755C168.206 7.86527 168.903 8.4372 169.393 9.17099C169.884 9.90479 170.145 10.7675 170.145 11.65C170.145 12.8335 169.675 13.9684 168.838 14.8052C168.002 15.642 166.867 16.1122 165.683 16.1122ZM198.346 44.248H190.655V32.2083C190.655 29.3363 190.655 25.7179 186.663 25.7179C182.672 25.7179 182.039 28.8495 182.039 32.0785V44.3291H174.348V19.4709H181.731V22.8784H181.828C182.57 21.6182 183.639 20.582 184.921 19.8794C186.204 19.1767 187.652 18.8338 189.113 18.8868C196.902 18.8868 198.346 24.0142 198.346 30.6831V44.248Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_57_48">
+<rect width="207.692" height="51.9231" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/svg/lucide_monitor-cog.svg b/public/images/svg/lucide_monitor-cog.svg
new file mode 100644
index 0000000..d0f2700
--- /dev/null
+++ b/public/images/svg/lucide_monitor-cog.svg
@@ -0,0 +1,4 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 23.375V28.875M19.6694 10.3537L20.9385 9.82847M20.9385 6.67147L19.6694 6.14484M23.1715 4.43847L22.6449 3.16797M23.1715 12.0615L22.6449 13.3306M26.3285 4.43847L26.8551 3.16797M26.8538 13.332L26.3285 12.0615M28.5615 6.67147L29.832 6.14484M28.5615 9.82847L29.832 10.3551M30.25 17.875V20.625C30.25 21.3543 29.9603 22.0538 29.4445 22.5695C28.9288 23.0852 28.2293 23.375 27.5 23.375H5.5C4.77065 23.375 4.07118 23.0852 3.55546 22.5695C3.03973 22.0538 2.75 21.3543 2.75 20.625V6.87497C2.75 6.14562 3.03973 5.44615 3.55546 4.93043C4.07118 4.4147 4.77065 4.12497 5.5 4.12497H15.125M11 28.875H22" stroke="#274B2D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.75 12.375C27.0282 12.375 28.875 10.5282 28.875 8.25C28.875 5.97183 27.0282 4.125 24.75 4.125C22.4718 4.125 20.625 5.97183 20.625 8.25C20.625 10.5282 22.4718 12.375 24.75 12.375Z" stroke="#274B2D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/svg/mage_email.svg b/public/images/svg/mage_email.svg
new file mode 100644
index 0000000..5fe4201
--- /dev/null
+++ b/public/images/svg/mage_email.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3182 2.91666H5.5682C3.72725 2.91666 2.23486 4.40904 2.23486 6.24999V13.75C2.23486 15.5909 3.72725 17.0833 5.5682 17.0833H14.3182C16.1591 17.0833 17.6515 15.5909 17.6515 13.75V6.24999C17.6515 4.40904 16.1591 2.91666 14.3182 2.91666Z" stroke="white" stroke-width="1.5"/>
+<path d="M2.27393 6.32498L8.27809 9.76665C8.78124 10.0586 9.35262 10.2124 9.93434 10.2124C10.5161 10.2124 11.0874 10.0586 11.5906 9.76665L17.6114 6.32498" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/svg/mdi_water-check-outline (1).svg b/public/images/svg/mdi_water-check-outline (1).svg
new file mode 100644
index 0000000..6e4e75f
--- /dev/null
+++ b/public/images/svg/mdi_water-check-outline (1).svg	
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.7812 30.4688L31.875 39.375L26.7188 33.75L28.8937 31.575L31.875 34.5563L38.6063 27.825L40.7812 30.4688ZM15 26.25C15 22.9312 18.75 16.8 22.5 11.9812C25.3125 15.6187 28.125 20.0063 29.3813 23.3813C30.5063 22.8938 31.7438 22.6125 33.0375 22.5C30.5813 15.1875 22.5 6.09375 22.5 6.09375C22.5 6.09375 11.25 18.75 11.25 26.25C11.25 32.4562 16.2938 37.5 22.5 37.5H23.1375C22.725 36.3 22.5 35.0625 22.5 33.75C18.3562 33.75 15 30.3937 15 26.25Z" fill="#274B2D"/>
+</svg>
diff --git a/public/images/svg/mdi_water-check-outline.svg b/public/images/svg/mdi_water-check-outline.svg
new file mode 100644
index 0000000..6e4e75f
--- /dev/null
+++ b/public/images/svg/mdi_water-check-outline.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.7812 30.4688L31.875 39.375L26.7188 33.75L28.8937 31.575L31.875 34.5563L38.6063 27.825L40.7812 30.4688ZM15 26.25C15 22.9312 18.75 16.8 22.5 11.9812C25.3125 15.6187 28.125 20.0063 29.3813 23.3813C30.5063 22.8938 31.7438 22.6125 33.0375 22.5C30.5813 15.1875 22.5 6.09375 22.5 6.09375C22.5 6.09375 11.25 18.75 11.25 26.25C11.25 32.4562 16.2938 37.5 22.5 37.5H23.1375C22.725 36.3 22.5 35.0625 22.5 33.75C18.3562 33.75 15 30.3937 15 26.25Z" fill="#274B2D"/>
+</svg>
diff --git a/public/images/svg/metallb-horizontal-white logo.svg b/public/images/svg/metallb-horizontal-white logo.svg
new file mode 100644
index 0000000..96dbf8d
--- /dev/null
+++ b/public/images/svg/metallb-horizontal-white logo.svg	
@@ -0,0 +1,5 @@
+<svg width="156" height="52" viewBox="0 0 156 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.2684 38.211C33.4282 35.4155 28.7984 32.7418 24.1692 30.0671C22.0322 28.8323 19.9077 27.5747 17.7522 26.3735C17.144 26.0343 17.0615 25.7531 17.3491 25.1028C19.3449 20.5893 21.287 16.052 23.2492 11.5236C23.5892 10.7393 23.8562 9.9051 24.9703 9.89129C26.0853 9.87747 26.3622 10.6778 26.7098 11.4801C30.4281 20.0621 34.1518 28.6419 37.8808 37.2193C37.987 37.4642 38.0758 37.7168 38.2684 38.211ZM16.416 27.2495C16.7009 26.5795 16.9295 26.4791 17.585 26.877C19.7983 28.2208 22.0596 29.4859 24.4477 30.8648L11.9199 38.1104" fill="black"/>
+<path d="M25.0807 48.8518C20.4883 48.8518 15.9991 47.49 12.1807 44.9386C8.36231 42.3873 5.38622 38.7609 3.62881 34.5181C1.87139 30.2753 1.41157 25.6067 2.30749 21.1026C3.20342 16.5985 5.41484 12.4612 8.66213 9.21389C11.9094 5.9666 16.0467 3.75517 20.5508 2.85925C25.0549 1.96333 29.7236 2.42315 33.9664 4.18056C38.2091 5.93798 41.8355 8.91407 44.3869 12.7325C46.9383 16.5509 48.3 21.0401 48.3 25.6325C48.3 28.6817 47.6995 31.701 46.5326 34.5181C45.3657 37.3352 43.6554 39.8949 41.4993 42.051C39.3431 44.2071 36.7835 45.9174 33.9664 47.0843C31.1492 48.2512 28.1299 48.8518 25.0807 48.8518ZM25.0807 4.88719C20.9777 4.88719 16.9668 6.10388 13.5552 8.38339C10.1437 10.6629 7.48473 13.9029 5.91457 17.6936C4.34441 21.4843 3.93358 25.6555 4.73404 29.6796C5.5345 33.7038 7.5103 37.4003 10.4116 40.3016C13.3129 43.2028 17.0093 45.1786 21.0335 45.9791C25.0577 46.7796 29.2289 46.3687 33.0196 44.7986C36.8103 43.2284 40.0502 40.5694 42.3297 37.1579C44.6093 33.7464 45.826 29.7355 45.826 25.6325C45.826 20.1305 43.6403 14.8538 39.7498 10.9633C35.8593 7.07284 30.5827 4.88719 25.0807 4.88719Z" fill="black"/>
+<path d="M72.2665 16.665H77.5268V34.1605H74.1204V22.3265C74.1204 21.9865 74.1244 21.5098 74.1324 20.8965C74.1398 20.2835 74.1436 19.8106 74.1439 19.478L70.8286 34.1605H67.2754L63.9841 19.478C63.9841 19.8104 63.9879 20.2832 63.9956 20.8965C64.0033 21.5095 64.0073 21.9862 64.0076 22.3265V34.1605H60.6016V16.6646H65.9209L69.1054 30.4213L72.2665 16.665ZM89.0668 21.4849C89.9788 21.8972 90.7543 22.5609 91.3026 23.3982C91.8454 24.1999 92.198 25.1149 92.3334 26.0735C92.4371 26.9252 92.4743 27.7837 92.4448 28.6412H83.0226C83.0748 29.939 83.5257 30.8489 84.3751 31.371C84.9376 31.7078 85.5848 31.8766 86.2401 31.8575C86.7689 31.899 87.2977 31.7795 87.7572 31.5147C88.2167 31.2499 88.5853 30.8522 88.8144 30.3739H92.2683C92.1123 31.2677 91.6726 32.0875 91.0143 32.7119C89.8554 33.9702 88.2329 34.5994 86.147 34.5997C84.4881 34.6216 82.8746 34.058 81.5901 33.008C80.2739 31.9464 79.6158 30.2197 79.6158 27.8281C79.6158 25.5871 80.2098 23.8686 81.3979 22.6725C82.0053 22.0728 82.7293 21.6042 83.5251 21.2956C84.3209 20.9871 85.1716 20.8452 86.0245 20.8788C87.0701 20.8625 88.1073 21.0691 89.0668 21.4849ZM84.0065 24.4068C83.4997 24.9611 83.1838 25.6631 83.1051 26.41H88.9332C88.93 26.0258 88.8484 25.6463 88.6934 25.2948C88.5384 24.9432 88.3133 24.627 88.0318 24.3656C87.4723 23.8931 86.7576 23.6446 86.0257 23.6679C85.6564 23.6452 85.2863 23.6991 84.9389 23.8263C84.5914 23.9534 84.2739 24.1511 84.0065 24.4068ZM92.8262 23.7508V21.3418H94.6302V17.7333H97.9776V21.3414H100.078V23.7508H97.9776V30.5875C97.9312 30.9312 98.0022 31.2805 98.1793 31.5788C98.314 31.7091 98.7255 31.7742 99.4139 31.7742C99.5165 31.7742 99.6254 31.773 99.74 31.7689C99.8547 31.7648 99.9674 31.7587 100.078 31.7507V34.2792L98.4762 34.3382C96.8776 34.3932 95.7856 34.1164 95.2001 33.5077C94.7816 33.0085 94.5768 32.3645 94.6302 31.7153V23.7507L92.8262 23.7508ZM107.375 26.2912C107.836 26.2513 108.29 26.1515 108.726 25.9944C108.934 25.9329 109.117 25.8064 109.248 25.6334C109.38 25.4604 109.452 25.2499 109.455 25.0328C109.478 24.8153 109.436 24.5961 109.337 24.4014C109.238 24.2067 109.084 24.0448 108.895 23.9351C108.38 23.7043 107.817 23.6004 107.253 23.632C106.443 23.632 105.87 23.8299 105.533 24.2258C105.27 24.5718 105.104 24.9815 105.051 25.413H101.787C101.815 24.4078 102.147 23.4348 102.741 22.6234C103.639 21.4839 105.181 20.9142 107.366 20.9142C108.679 20.8895 109.979 21.1785 111.157 21.7571C112.262 22.319 112.814 23.3792 112.814 24.9379V30.8724C112.814 31.284 112.822 31.7825 112.837 32.368C112.829 32.6808 112.898 32.9907 113.04 33.2699C113.168 33.4425 113.34 33.5777 113.538 33.6616V34.1605H109.859C109.763 33.9231 109.691 33.6765 109.645 33.4245C109.605 33.195 109.574 32.9338 109.55 32.641C109.076 33.1509 108.529 33.5871 107.926 33.935C107.169 34.3607 106.312 34.5777 105.443 34.5638C104.379 34.6039 103.339 34.2464 102.524 33.561C102.133 33.2027 101.826 32.7616 101.627 32.2698C101.428 31.778 101.341 31.2479 101.372 30.7182C101.372 29.1277 101.99 27.9764 103.226 27.2644C104.161 26.8013 105.175 26.5193 106.215 26.4331L107.375 26.2912ZM109.443 27.8697C109.235 27.9996 109.016 28.109 108.787 28.1963C108.491 28.2988 108.188 28.3761 107.879 28.4272L107.109 28.5699C106.569 28.6398 106.044 28.7961 105.554 29.0329C105.299 29.1728 105.089 29.3818 104.948 29.6358C104.806 29.8898 104.74 30.1785 104.755 30.4687C104.733 30.701 104.766 30.9352 104.851 31.1525C104.936 31.3699 105.07 31.5646 105.243 31.721C105.582 31.9831 106.002 32.1195 106.43 32.107C107.161 32.1094 107.875 31.8854 108.473 31.4658C109.095 31.0386 109.419 30.2593 109.443 29.1278L109.443 27.8697ZM119.224 34.1605H115.84V16.6646H119.224V34.1605ZM122.796 16.665H126.452V31.0147H135.188V34.1605H122.797L122.796 16.665ZM150.693 18.5284C151.24 19.3097 151.521 20.2459 151.496 21.1992C151.542 22.1268 151.254 23.0402 150.686 23.7747C150.312 24.1932 149.859 24.5323 149.351 24.7718C150.179 25.0458 150.89 25.5891 151.372 26.3148C151.845 27.0845 152.082 27.9756 152.054 28.8784C152.069 29.8638 151.798 30.8325 151.275 31.6679C150.927 32.2485 150.461 32.7494 149.907 33.1379C149.353 33.5264 148.723 33.7938 148.059 33.9226C147.245 34.0866 146.417 34.1663 145.587 34.1605H137.704V16.6646H146.159C148.292 16.6967 149.804 17.318 150.693 18.5284ZM141.193 19.7036V23.5607H145.446C146.09 23.5889 146.73 23.4391 147.296 23.1277C147.542 22.9595 147.738 22.7278 147.863 22.4572C147.988 22.1867 148.037 21.8873 148.006 21.5909C148.006 20.7758 147.693 20.2377 147.067 19.9766C146.397 19.7763 145.698 19.6842 144.999 19.7036L141.193 19.7036ZM141.193 26.457V31.1215H145.441C146.047 31.1503 146.652 31.0449 147.213 30.8131C147.98 30.4337 148.363 29.7058 148.363 28.6293C148.395 28.2396 148.305 27.8494 148.105 27.5132C147.906 27.1771 147.606 26.9116 147.248 26.7539C146.691 26.5381 146.096 26.4371 145.5 26.457L141.193 26.457Z" fill="black"/>
+</svg>
diff --git a/public/images/svg/microsoft logo.svg b/public/images/svg/microsoft logo.svg
new file mode 100644
index 0000000..30b8c00
--- /dev/null
+++ b/public/images/svg/microsoft logo.svg	
@@ -0,0 +1,10 @@
+<svg width="213" height="46" viewBox="0 0 213 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_57_42)">
+<path d="M0 0V21.5896H21.5896V0H0ZM23.8431 0V21.5896H45.4327V0H23.8431ZM199.023 7.07891C197.65 7.07891 196.452 7.39602 195.36 7.92431C194.269 8.52303 193.459 9.33294 192.86 10.4247C192.261 11.4813 191.944 12.679 191.944 14.0526V16.7642H188.74V20.4973H191.944V36.2757H196.558V20.533H203.461V30.5705C203.461 34.6911 205.398 36.7689 209.272 36.7689C209.906 36.7689 210.575 36.6634 211.209 36.5577C211.878 36.4169 212.372 36.2405 212.653 36.0996L212.689 36.0645V32.2957L212.512 32.4367C212.231 32.6128 211.984 32.7541 211.561 32.8597C211.209 32.9654 210.892 33.0001 210.646 33.0001C209.73 33.0001 209.096 32.7889 208.638 32.2606C208.216 31.7675 208.004 30.9576 208.004 29.7602V20.533H212.689V16.7642H208.075V10.9881L207.934 11.0239L203.567 12.3267L203.461 12.3618V16.7642H196.558V14.2988C196.558 13.1718 196.84 12.2918 197.333 11.7282C197.826 11.1647 198.566 10.8829 199.481 10.8829C200.115 10.8829 200.784 11.0233 201.524 11.3403L201.7 11.4462V7.46618L201.595 7.4311C200.961 7.21979 200.115 7.07891 199.023 7.07891ZM95.2327 8.52276C94.4579 8.52276 93.8239 8.80492 93.2956 9.29799C92.7674 9.79106 92.4853 10.4251 92.4853 11.2C92.4853 11.9396 92.7674 12.5731 93.2956 13.0662C93.8239 13.5592 94.4579 13.8056 95.2327 13.8056C96.0075 13.8056 96.6767 13.524 97.1697 13.0662C97.698 12.5731 97.9794 11.9396 97.9794 11.2C97.9794 10.4604 97.698 9.82628 97.1697 9.29799C96.7119 8.80492 96.0427 8.52276 95.2327 8.52276ZM82.0606 9.08681L75.0869 26.1681L73.8192 29.7602H73.7139C73.5026 28.9501 73.1152 27.7175 72.4813 26.2383L65.6837 9.15698H59.0271V36.3816H63.4295V19.5817C63.4295 18.5251 63.4297 17.3278 63.3945 15.8486C63.3592 15.109 63.2887 14.5454 63.2534 14.1227H63.3594C63.5707 15.1793 63.8168 15.954 63.9929 16.4471L72.1642 36.3108H75.263L83.3634 16.271C83.5395 15.8131 83.7156 14.8976 83.8917 14.1227H83.9977C83.892 16.1302 83.8217 17.9265 83.7865 19.0183V36.2757H88.4702V9.08681H82.0606ZM111.151 16.3067C109.074 16.3067 107.172 16.764 105.587 17.6797C104.002 18.5954 102.734 19.8637 101.924 21.4486C101.079 23.0687 100.657 24.9353 100.657 27.0837C100.657 28.9503 101.079 30.6052 101.889 32.1196C102.699 33.5988 103.826 34.7964 105.34 35.6064C106.784 36.4165 108.475 36.8391 110.377 36.8391C112.561 36.8391 114.427 36.3815 115.906 35.5363L115.941 35.5012V31.2749L115.765 31.4152C115.096 31.9083 114.321 32.3312 113.547 32.5777C112.737 32.8595 111.997 33.0001 111.363 33.0001C109.531 33.0001 108.088 32.4722 107.066 31.31C106.01 30.1829 105.481 28.6334 105.481 26.6964C105.481 24.6889 106.009 23.104 107.101 21.9418C108.193 20.7796 109.637 20.1808 111.398 20.1808C112.878 20.1808 114.391 20.6736 115.765 21.6598L115.941 21.8008V17.3275L115.906 17.2925C115.307 17.0459 114.638 16.7642 113.723 16.5881C112.877 16.412 111.997 16.3067 111.151 16.3067ZM160.775 16.3067C158.592 16.3067 156.795 16.8346 155.387 17.9968C153.978 19.0886 153.309 20.5683 153.309 22.294C153.309 23.2097 153.45 24.0193 153.767 24.6885C154.084 25.3576 154.541 25.992 155.175 26.5203C155.809 27.0134 156.725 27.5769 157.993 28.1052C159.049 28.563 159.86 28.9151 160.353 29.1968C160.846 29.4786 161.163 29.7957 161.41 30.0422C161.586 30.324 161.691 30.676 161.691 31.1339C161.691 32.437 160.705 33.0709 158.697 33.0709C157.923 33.0709 157.113 32.9298 156.162 32.6128C155.211 32.2958 154.33 31.8382 153.591 31.31L153.414 31.1689V35.6415L153.52 35.6773C154.19 35.9942 155 36.2053 155.986 36.4518C156.972 36.6279 157.852 36.7689 158.627 36.7689C160.987 36.7689 162.924 36.2404 164.297 35.0781C165.706 33.9511 166.446 32.5073 166.446 30.6407C166.446 29.3375 166.094 28.1753 165.319 27.2948C164.297 26.4496 163.029 25.569 161.198 24.8646C159.754 24.2659 158.839 23.8081 158.416 23.4207C158.064 23.0685 157.888 22.5757 157.888 21.9418C157.888 21.4135 158.099 20.8852 158.627 20.533C159.155 20.1808 159.754 20.0047 160.634 20.0047C161.409 20.0047 162.22 20.1456 162.994 20.3569C163.769 20.5683 164.473 20.885 165.037 21.3076L165.213 21.4486V17.1514L165.108 17.1164C164.579 16.9051 163.875 16.694 163.03 16.5179C162.184 16.377 161.409 16.3067 160.775 16.3067ZM141.299 16.3418C138.094 16.3418 135.523 17.2927 133.727 19.1594C131.895 21.026 131.015 23.5965 131.015 26.8367C131.015 29.8656 131.931 32.3313 133.692 34.1275C135.453 35.8884 137.848 36.804 140.841 36.804C143.976 36.804 146.476 35.8532 148.273 33.9514C150.104 32.0496 150.984 29.5138 150.984 26.3793C150.984 23.28 150.139 20.8145 148.414 19.0183C146.758 17.2222 144.328 16.3418 141.299 16.3418ZM178.526 16.3418C175.321 16.3418 172.75 17.2927 170.954 19.1594C169.158 21.026 168.242 23.5965 168.242 26.8367C168.242 29.8656 169.158 32.3313 170.919 34.1275C172.68 35.8884 175.074 36.804 178.068 36.804C181.202 36.804 183.703 35.8532 185.499 33.9514C187.33 32.0496 188.211 29.5138 188.211 26.3793C188.211 23.28 187.366 20.8145 185.64 19.0183C183.985 17.2222 181.555 16.3418 178.526 16.3418ZM128.832 16.4471C127.705 16.4471 126.648 16.7998 125.732 17.5394C124.958 18.1734 124.429 19.0891 123.971 20.1808H123.936V16.7642H119.358V36.2757H123.936V26.3084C123.936 24.6179 124.288 23.2094 125.063 22.1881C125.838 21.1315 126.824 20.6032 128.022 20.6032C128.444 20.6032 128.867 20.7089 129.395 20.7793C129.888 20.9202 130.24 21.0613 130.487 21.2374L130.663 21.3777V16.7993L130.557 16.7642C130.24 16.5529 129.607 16.4471 128.832 16.4471ZM92.9084 16.7642V36.2757H97.4869V16.7642H92.9084ZM141.088 20.11C142.708 20.11 143.976 20.6381 144.892 21.7299C145.807 22.8217 146.3 24.4066 146.3 26.4845C146.23 28.5977 145.842 30.2532 144.962 31.345C144.117 32.4368 142.778 32.965 141.123 32.965C139.468 32.965 138.129 32.4371 137.179 31.2749C136.228 30.1831 135.77 28.5979 135.77 26.5905C135.77 24.5125 136.263 22.9278 137.179 21.8008C138.129 20.6738 139.432 20.11 141.088 20.11ZM178.279 20.11C179.864 20.11 181.167 20.6381 182.083 21.7299C182.999 22.8217 183.492 24.4066 183.492 26.4845C183.492 28.5977 183.034 30.2532 182.153 31.345C181.308 32.4368 179.97 32.965 178.315 32.965C176.624 32.965 175.321 32.4371 174.37 31.2749C173.419 30.1831 172.961 28.5979 172.961 26.5905C172.961 24.5125 173.454 22.9278 174.37 21.8008C175.321 20.6738 176.624 20.11 178.279 20.11ZM0 23.8431V45.4327H21.5896V23.8431H0ZM23.8431 23.8431V45.4327H45.4327V23.8431H23.8431Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_57_42">
+<rect width="212.689" height="45.4327" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/svg/proicons_call.svg b/public/images/svg/proicons_call.svg
new file mode 100644
index 0000000..3d5eabe
--- /dev/null
+++ b/public/images/svg/proicons_call.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.52439 13.4758C4.73223 11.6802 3.35399 9.5147 2.48606 7.13082C2.00856 5.82749 2.44606 4.39582 3.42772 3.41416L4.03522 2.80749C4.19855 2.64384 4.39254 2.514 4.6061 2.42541C4.81966 2.33683 5.0486 2.29123 5.27981 2.29123C5.51101 2.29123 5.73995 2.33683 5.95351 2.42541C6.16707 2.514 6.36107 2.64384 6.52439 2.80749L7.94689 4.22999C8.11054 4.39331 8.24038 4.58731 8.32896 4.80087C8.41755 5.01443 8.46315 5.24337 8.46315 5.47457C8.46315 5.70578 8.41755 5.93471 8.32896 6.14828C8.24038 6.36184 8.11054 6.55583 7.94689 6.71916L7.59689 7.06916C7.45679 7.20922 7.34566 7.37551 7.26984 7.55853C7.19402 7.74155 7.15499 7.93772 7.15499 8.13582C7.15499 8.33393 7.19402 8.53009 7.26984 8.71311C7.34566 8.89613 7.45679 9.06242 7.59689 9.20249L10.7969 12.4033C10.937 12.5434 11.1032 12.6546 11.2863 12.7304C11.4693 12.8062 11.6655 12.8452 11.8636 12.8452C12.0617 12.8452 12.2578 12.8062 12.4408 12.7304C12.6239 12.6546 12.7902 12.5434 12.9302 12.4033L13.2811 12.0533C13.4444 11.8897 13.6384 11.7598 13.8519 11.6712C14.0655 11.5827 14.2944 11.5371 14.5256 11.5371C14.7568 11.5371 14.9858 11.5827 15.1993 11.6712C15.4129 11.7598 15.6069 11.8897 15.7702 12.0533L17.1927 13.4758C17.3564 13.6391 17.4862 13.8331 17.5748 14.0467C17.6634 14.2603 17.709 14.4892 17.709 14.7204C17.709 14.9516 17.6634 15.1805 17.5748 15.3941C17.4862 15.6077 17.3564 15.8017 17.1927 15.965L16.5861 16.5717C15.6044 17.5542 14.1727 17.9917 12.8694 17.5142C10.4855 16.6462 8.32003 15.268 6.52439 13.4758Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>
diff --git a/public/images/svg/whispering-logo.svg b/public/images/svg/whispering-logo.svg
new file mode 100644
index 0000000..62153cf
--- /dev/null
+++ b/public/images/svg/whispering-logo.svg
@@ -0,0 +1,12 @@
+<svg width="125" height="29" viewBox="0 0 125 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_97_93)">
+<path d="M47.3196 9.56261L49.62 3.36827H52.0663L48.5508 11.9943H46.4286L45.1163 8.44533L43.8203 11.9943H41.6981L38.1826 3.36827H40.6289L42.9293 9.56261L43.7231 7.21303L42.2327 3.36827H44.3063L45.1163 5.96431L45.9426 3.36827H48.0162L46.5096 7.21303L47.3196 9.56261ZM61.1384 6.47365V11.9943H58.5464V7.14731C58.5464 6.58867 58.4357 6.1779 58.2143 5.91501C57.9929 5.65212 57.6932 5.52068 57.3151 5.52068C57.1639 5.52068 56.9992 5.55628 56.821 5.62748C56.6428 5.69868 56.47 5.80274 56.3026 5.93966C56.1352 6.07658 55.9813 6.23815 55.8409 6.42436C55.7005 6.61058 55.5925 6.8187 55.5169 7.04872V11.9943H52.9249V0H55.5169V4.81416C55.8301 4.29934 56.2432 3.90227 56.7562 3.62295C57.2692 3.34363 57.839 3.20397 58.4654 3.20397C59.0378 3.20397 59.4995 3.30529 59.8505 3.50793C60.2015 3.71058 60.4715 3.96799 60.6605 4.28017C60.8495 4.59235 60.9764 4.94287 61.0412 5.33173C61.106 5.72059 61.1384 6.10123 61.1384 6.47365ZM65.4153 11.9943H62.8232V3.36827H65.4153V11.9943ZM65.4153 2.38244H62.8232V0H65.4153V2.38244ZM70.729 12.1586C70.3726 12.1586 70.0027 12.1313 69.6193 12.0765C69.2359 12.0217 68.8551 11.9478 68.4771 11.8547C68.0991 11.7616 67.7373 11.6466 67.3917 11.5096C67.0461 11.3727 66.7437 11.2221 66.4845 11.0578L67.5051 9.28329C68.0667 9.6119 68.6121 9.86383 69.1413 10.0391C69.6706 10.2144 70.1782 10.302 70.6642 10.302C71.0422 10.302 71.3311 10.2417 71.5309 10.1212C71.7307 10.0008 71.8306 9.8255 71.8306 9.59547C71.8306 9.36544 71.6956 9.18744 71.4256 9.06147C71.1556 8.9355 70.6912 8.78489 70.0324 8.60963C69.46 8.45628 68.9739 8.30293 68.5743 8.14958C68.1747 7.99622 67.8534 7.8237 67.6104 7.63201C67.3674 7.44032 67.1919 7.22398 67.0839 6.983C66.9759 6.74202 66.9219 6.45722 66.9219 6.12861C66.9219 5.69046 67.011 5.29065 67.1892 4.92918C67.3674 4.56771 67.6131 4.261 67.9263 4.00906C68.2395 3.75713 68.6094 3.55996 69.036 3.41756C69.4627 3.27517 69.9298 3.20397 70.4374 3.20397C71.0314 3.20397 71.6389 3.29433 72.2599 3.47507C72.8809 3.65581 73.4884 3.905 74.0824 4.22266L73.0618 5.88215C72.5326 5.5864 72.0601 5.37007 71.6443 5.23314C71.2285 5.09622 70.8262 5.02776 70.4374 5.02776C70.1134 5.02776 69.8461 5.08527 69.6355 5.20028C69.4249 5.3153 69.3196 5.49877 69.3196 5.75071C69.3196 5.8712 69.3466 5.97252 69.4006 6.05467C69.4546 6.13683 69.5437 6.2135 69.6679 6.2847C69.7921 6.3559 69.9568 6.42162 70.162 6.48187C70.3672 6.54211 70.621 6.61058 70.9234 6.68725C71.5498 6.85156 72.079 7.01586 72.511 7.18017C72.943 7.34448 73.294 7.52795 73.564 7.7306C73.834 7.93324 74.0284 8.16601 74.1472 8.42889C74.266 8.69178 74.3254 9.00397 74.3254 9.36544C74.3254 9.79263 74.2417 10.1788 74.0743 10.5238C73.9069 10.8688 73.6666 11.1619 73.3534 11.4028C73.0402 11.6438 72.6622 11.83 72.2194 11.9615C71.7766 12.0929 71.2798 12.1586 70.729 12.1586ZM80.9352 12.1586C80.2871 12.1586 79.7255 12.0217 79.2503 11.7479C78.7751 11.474 78.4025 11.0907 78.1325 10.5977V15.4941H75.5405V3.36827H77.8085V4.76487C78.1217 4.27195 78.5105 3.88857 78.9749 3.61473C79.4393 3.34089 79.9955 3.20397 80.6435 3.20397C81.216 3.20397 81.7452 3.31898 82.2312 3.54901C82.7172 3.77904 83.1357 4.09396 83.4867 4.49377C83.8377 4.89358 84.1131 5.36459 84.3129 5.9068C84.5127 6.44901 84.6126 7.03229 84.6126 7.65666C84.6126 8.30293 84.5208 8.89991 84.3372 9.44759C84.1536 9.99528 83.8971 10.469 83.5677 10.8688C83.2383 11.2687 82.8495 11.5836 82.4013 11.8136C81.9531 12.0436 81.4644 12.1586 80.9352 12.1586ZM80.0441 9.94051C80.3249 9.94051 80.5814 9.87753 80.8137 9.75156C81.0459 9.62559 81.2484 9.45855 81.4212 9.25043C81.594 9.0423 81.7263 8.79858 81.8181 8.51926C81.9099 8.23994 81.9558 7.94693 81.9558 7.64023C81.9558 7.32257 81.9045 7.02956 81.8019 6.76119C81.6993 6.49282 81.5589 6.26006 81.3807 6.06289C81.2025 5.86572 80.9892 5.71237 80.7407 5.60283C80.4923 5.4933 80.2169 5.43853 79.9145 5.43853C79.5581 5.43853 79.2179 5.54533 78.8939 5.75892C78.5699 5.97252 78.3161 6.26006 78.1325 6.62153V8.39603C78.3053 8.83418 78.5672 9.20113 78.9182 9.49688C79.2692 9.79263 79.6445 9.94051 80.0441 9.94051ZM89.9587 12.1586C89.2459 12.1586 88.606 12.0409 88.039 11.8054C87.472 11.5699 86.9914 11.2495 86.5971 10.8442C86.2029 10.4389 85.9032 9.97063 85.698 9.43938C85.4928 8.90812 85.3902 8.35222 85.3902 7.77167C85.3902 7.14731 85.4928 6.55855 85.698 6.00538C85.9032 5.45222 86.2002 4.96752 86.5891 4.55127C86.9779 4.13503 87.4558 3.80642 88.0228 3.56544C88.5898 3.32446 89.2351 3.20397 89.9587 3.20397C90.6823 3.20397 91.3249 3.32446 91.8865 3.56544C92.4481 3.80642 92.9234 4.13229 93.3122 4.54306C93.701 4.95382 93.9953 5.42757 94.1951 5.96431C94.3949 6.50104 94.4948 7.06516 94.4948 7.65666C94.4948 7.81001 94.4894 7.96062 94.4786 8.1085C94.4678 8.25637 94.4516 8.38508 94.43 8.49462H88.1443C88.1875 9.07517 88.3954 9.51605 88.768 9.81728C89.1406 10.1185 89.5645 10.2691 90.0397 10.2691C90.4177 10.2691 90.7822 10.176 91.1332 9.9898C91.4842 9.80359 91.7191 9.55165 91.8379 9.23399L94.0412 9.85836C93.7064 10.5375 93.188 11.0907 92.486 11.5178C91.7839 11.945 90.9415 12.1586 89.9587 12.1586ZM88.0957 6.86799H91.7569C91.7029 6.3203 91.5085 5.88763 91.1737 5.56997C90.8389 5.25231 90.4231 5.09348 89.9263 5.09348C89.4187 5.09348 89.0002 5.25505 88.6708 5.57819C88.3414 5.90132 88.1497 6.33126 88.0957 6.86799ZM101.056 3.25326V5.61926C100.429 5.63022 99.8652 5.73428 99.363 5.93144C98.8608 6.12861 98.4909 6.42436 98.2533 6.8187V11.9943H95.6612V3.36827H98.0426V5.10991C98.3451 4.52937 98.7258 4.07753 99.1848 3.75439C99.6438 3.43126 100.132 3.25873 100.651 3.23683C100.867 3.23683 101.002 3.2423 101.056 3.25326ZM104.75 11.9943H102.158V3.36827H104.75V11.9943ZM104.75 2.38244H102.158V0H104.75V2.38244ZM114.713 6.47365V11.9943H112.121V7.14731C112.121 6.57771 112.015 6.16421 111.805 5.9068C111.594 5.64939 111.316 5.52068 110.97 5.52068C110.787 5.52068 110.601 5.55902 110.412 5.63569C110.223 5.71237 110.044 5.81917 109.877 5.95609C109.71 6.09301 109.556 6.25458 109.415 6.44079C109.275 6.62701 109.167 6.82965 109.091 7.04872V11.9943H106.499V3.36827H108.832V4.81416C109.145 4.29934 109.588 3.90227 110.16 3.62295C110.733 3.34363 111.392 3.20397 112.137 3.20397C112.688 3.20397 113.133 3.30529 113.473 3.50793C113.814 3.71058 114.076 3.97347 114.259 4.2966C114.443 4.61974 114.564 4.97299 114.624 5.35637C114.683 5.73975 114.713 6.11218 114.713 6.47365ZM119.702 12.0272C119.141 12.0272 118.631 11.9122 118.171 11.6822C117.712 11.4521 117.318 11.1399 116.989 10.7456C116.659 10.3513 116.403 9.89122 116.219 9.36544C116.036 8.83966 115.944 8.27554 115.944 7.67309C115.944 7.03777 116.041 6.44901 116.236 5.9068C116.43 5.36459 116.7 4.89358 117.046 4.49377C117.391 4.09396 117.807 3.77904 118.293 3.54901C118.779 3.31898 119.314 3.20397 119.897 3.20397C120.534 3.20397 121.096 3.34363 121.582 3.62295C122.068 3.90227 122.456 4.28838 122.748 4.7813V3.36827H125V11.4028C125 12.0601 124.878 12.6516 124.635 13.1773C124.392 13.7031 124.055 14.1495 123.623 14.5164C123.191 14.8834 122.672 15.1654 122.068 15.3626C121.463 15.5598 120.799 15.6584 120.075 15.6584C119.157 15.6584 118.374 15.5105 117.726 15.2147C117.078 14.919 116.511 14.4918 116.025 13.9331L117.402 12.5037C117.715 12.8652 118.107 13.1527 118.576 13.3663C119.046 13.5799 119.546 13.6867 120.075 13.6867C120.388 13.6867 120.685 13.6429 120.966 13.5552C121.247 13.4676 121.495 13.3334 121.711 13.1527C121.927 12.972 122.097 12.7364 122.222 12.4462C122.346 12.1559 122.408 11.8081 122.408 11.4028V10.5649C122.149 11.0468 121.773 11.411 121.282 11.6575C120.791 11.904 120.264 12.0272 119.702 12.0272ZM120.61 9.94051C121.009 9.94051 121.363 9.82823 121.671 9.60368C121.979 9.37913 122.224 9.0916 122.408 8.74108V6.93371C122.235 6.47365 121.97 6.10944 121.614 5.84108C121.258 5.57271 120.88 5.43853 120.48 5.43853C120.199 5.43853 119.943 5.50151 119.711 5.62748C119.478 5.75345 119.279 5.92323 119.111 6.13683C118.944 6.35042 118.814 6.59688 118.722 6.8762C118.631 7.15552 118.585 7.44306 118.585 7.73881C118.585 8.05647 118.636 8.34948 118.739 8.61785C118.841 8.88621 118.982 9.11898 119.16 9.31615C119.338 9.51331 119.551 9.66667 119.8 9.7762C120.048 9.88574 120.318 9.94051 120.61 9.94051Z" fill="white"/>
+<path d="M43.7555 26.289L44.2415 28.3757C43.8851 28.5291 43.4801 28.6715 43.0265 28.8029C42.5729 28.9344 42.1085 29.0001 41.6333 29.0001C41.3093 29.0001 41.0042 28.959 40.718 28.8769C40.4318 28.7947 40.1807 28.6633 39.9646 28.4825C39.7486 28.3018 39.5785 28.0636 39.4543 27.7678C39.3301 27.4721 39.268 27.1161 39.268 26.6998V22.1978H38.1826V20.2097H39.268V17.4658H41.8601V20.2097H43.5935V22.1978H41.8601V25.7961C41.8601 26.0809 41.933 26.2863 42.0788 26.4123C42.2246 26.5382 42.4055 26.6012 42.6215 26.6012C42.8051 26.6012 42.9995 26.5684 43.2047 26.5026C43.4099 26.4369 43.5935 26.3657 43.7555 26.289ZM50.6244 20.0947V22.4607C49.998 22.4717 49.4337 22.5757 48.9315 22.7729C48.4293 22.9701 48.0594 23.2658 47.8218 23.6602V28.8358H45.2297V20.2097H47.6112V21.9514C47.9136 21.3708 48.2943 20.919 48.7533 20.5958C49.2123 20.2727 49.701 20.1002 50.2194 20.0783C50.4354 20.0783 50.5704 20.0838 50.6244 20.0947ZM55.8085 29.0001C55.0957 29.0001 54.4558 28.8823 53.8888 28.6468C53.3218 28.4113 52.8412 28.0909 52.447 27.6856C52.0528 27.2804 51.7531 26.8121 51.5478 26.2808C51.3426 25.7496 51.24 25.1937 51.24 24.6131C51.24 23.9888 51.3426 23.4 51.5478 22.8468C51.7531 22.2937 52.0501 21.809 52.4389 21.3927C52.8277 20.9765 53.3056 20.6479 53.8726 20.4069C54.4396 20.1659 55.0849 20.0454 55.8085 20.0454C56.5321 20.0454 57.1747 20.1659 57.7364 20.4069C58.298 20.6479 58.7732 20.9738 59.162 21.3845C59.5508 21.7953 59.8451 22.269 60.0449 22.8058C60.2447 23.3425 60.3446 23.9066 60.3446 24.4981C60.3446 24.6515 60.3392 24.8021 60.3284 24.95C60.3176 25.0978 60.3014 25.2265 60.2798 25.3361H53.9941C54.0373 25.9166 54.2452 26.3575 54.6178 26.6587C54.9904 26.96 55.4143 27.1106 55.8895 27.1106C56.2675 27.1106 56.632 27.0175 56.983 26.8313C57.334 26.645 57.569 26.3931 57.6878 26.0755L59.891 26.6998C59.5562 27.3789 59.0378 27.9321 58.3358 28.3593C57.6338 28.7865 56.7913 29.0001 55.8085 29.0001ZM53.9455 23.7094H57.6068C57.5528 23.1618 57.3583 22.7291 57.0235 22.4114C56.6887 22.0938 56.2729 21.9349 55.7761 21.9349C55.2685 21.9349 54.85 22.0965 54.5206 22.4196C54.1912 22.7428 53.9995 23.1727 53.9455 23.7094ZM65.5935 29.0001C64.8807 29.0001 64.2408 28.8823 63.6738 28.6468C63.1067 28.4113 62.6261 28.0909 62.2319 27.6856C61.8377 27.2804 61.538 26.8121 61.3328 26.2808C61.1276 25.7496 61.025 25.1937 61.025 24.6131C61.025 23.9888 61.1276 23.4 61.3328 22.8468C61.538 22.2937 61.835 21.809 62.2238 21.3927C62.6126 20.9765 63.0905 20.6479 63.6576 20.4069C64.2246 20.1659 64.8699 20.0454 65.5935 20.0454C66.3171 20.0454 66.9597 20.1659 67.5213 20.4069C68.0829 20.6479 68.5581 20.9738 68.9469 21.3845C69.3358 21.7953 69.6301 22.269 69.8299 22.8058C70.0297 23.3425 70.1296 23.9066 70.1296 24.4981C70.1296 24.6515 70.1242 24.8021 70.1134 24.95C70.1026 25.0978 70.0864 25.2265 70.0648 25.3361H63.7791C63.8223 25.9166 64.0302 26.3575 64.4028 26.6587C64.7754 26.96 65.1993 27.1106 65.6745 27.1106C66.0525 27.1106 66.417 27.0175 66.768 26.8313C67.119 26.645 67.3539 26.3931 67.4727 26.0755L69.676 26.6998C69.3412 27.3789 68.8227 27.9321 68.1207 28.3593C67.4187 28.7865 66.5763 29.0001 65.5935 29.0001ZM63.7305 23.7094H67.3917C67.3377 23.1618 67.1433 22.7291 66.8085 22.4114C66.4737 22.0938 66.0579 21.9349 65.5611 21.9349C65.0535 21.9349 64.635 22.0965 64.3056 22.4196C63.9762 22.7428 63.7845 23.1727 63.7305 23.7094ZM74.8601 29.0001C74.5036 29.0001 74.1337 28.9727 73.7503 28.9179C73.3669 28.8632 72.9862 28.7892 72.6082 28.6961C72.2302 28.603 71.8684 28.488 71.5228 28.3511C71.1772 28.2142 70.8748 28.0636 70.6156 27.8992L71.6362 26.1247C72.1978 26.4534 72.7432 26.7053 73.2724 26.8806C73.8016 27.0558 74.3092 27.1434 74.7952 27.1434C75.1733 27.1434 75.4622 27.0832 75.662 26.9627C75.8618 26.8422 75.9617 26.667 75.9617 26.4369C75.9617 26.2069 75.8267 26.0289 75.5567 25.9029C75.2867 25.777 74.8223 25.6263 74.1634 25.4511C73.591 25.2977 73.105 25.1444 72.7054 24.991C72.3058 24.8377 71.9845 24.6652 71.7415 24.4735C71.4985 24.2818 71.323 24.0654 71.215 23.8245C71.107 23.5835 71.053 23.2987 71.053 22.9701C71.053 22.5319 71.1421 22.1321 71.3203 21.7706C71.4985 21.4092 71.7442 21.1025 72.0574 20.8505C72.3706 20.5986 72.7405 20.4014 73.1671 20.259C73.5937 20.1166 74.0608 20.0454 74.5684 20.0454C75.1625 20.0454 75.77 20.1358 76.391 20.3165C77.012 20.4973 77.6195 20.7465 78.2135 21.0641L77.1929 22.7236C76.6637 22.4279 76.1912 22.2115 75.7754 22.0746C75.3596 21.9377 74.9573 21.8692 74.5684 21.8692C74.2444 21.8692 73.9771 21.9267 73.7665 22.0417C73.5559 22.1568 73.4506 22.3402 73.4506 22.5922C73.4506 22.7127 73.4776 22.814 73.5316 22.8961C73.5856 22.9783 73.6747 23.055 73.7989 23.1262C73.9231 23.1974 74.0878 23.2631 74.293 23.3233C74.4982 23.3836 74.752 23.452 75.0545 23.5287C75.6809 23.693 76.2101 23.8573 76.6421 24.0216C77.0741 24.1859 77.4251 24.3694 77.6951 24.5721C77.9651 24.7747 78.1595 25.0075 78.2783 25.2704C78.3971 25.5332 78.4565 25.8454 78.4565 26.2069C78.4565 26.6341 78.3728 27.0202 78.2054 27.3653C78.038 27.7103 77.7977 28.0033 77.4845 28.2443C77.1713 28.4853 76.7933 28.6715 76.3505 28.8029C75.9077 28.9344 75.4109 29.0001 74.8601 29.0001Z" fill="white"/>
+<path d="M16.738 15.1861V22.2813L20.2976 25.8915C20.6792 26.2785 20.6792 26.9056 20.2976 27.2927C20.1068 27.4862 19.857 27.5829 19.6068 27.5829C19.3566 27.5829 19.106 27.4862 18.9161 27.2927L15.7593 24.091L12.5813 27.2949C12.1988 27.6802 11.5796 27.6792 11.1998 27.2913C10.8191 26.9024 10.8209 26.2753 11.2034 25.8892L14.7841 22.2809V15.1756L12.5813 17.3964C12.3905 17.589 12.1417 17.6849 11.8924 17.6849C11.6413 17.6849 11.3906 17.5872 11.1998 17.3928C10.8191 17.0048 10.8209 16.3768 11.2034 15.9916L15.073 12.0912C15.0874 12.0766 15.1072 12.072 15.1225 12.0583C15.2026 11.9867 15.2886 11.9218 15.3885 11.8794C15.4983 11.8338 15.6144 11.8137 15.7309 11.8096C15.7413 11.8096 15.7498 11.8036 15.7606 11.8036H15.7615C15.8884 11.8036 16.0153 11.8297 16.1346 11.8799C16.2538 11.9301 16.3618 12.0026 16.4523 12.0939L20.2972 15.9934C20.6788 16.3805 20.6788 17.0076 20.2972 17.3946C19.9155 17.7816 19.2963 17.7816 18.9156 17.3946L16.7376 15.1865L16.738 15.1861ZM16.4518 6.29072C16.0711 5.9046 15.4537 5.90368 15.0735 6.28889L11.2038 10.1884C10.8213 10.5745 10.8195 11.2016 11.2002 11.5896C11.5801 11.9775 12.1993 11.9794 12.5818 11.5946L15.7597 8.39064L18.9165 11.5923C19.1064 11.7858 19.3571 11.8826 19.6073 11.8826C19.8575 11.8826 20.1073 11.7858 20.2981 11.5923C20.6797 11.2053 20.6797 10.5773 20.2981 10.1912L16.4518 6.29072ZM16.4518 0.488891C16.0711 0.102772 15.4537 0.10186 15.0735 0.487066L11.2038 4.38659C10.8213 4.77271 10.8195 5.39981 11.2002 5.78776C11.391 5.98219 11.6422 6.07986 11.8928 6.07986C12.1417 6.07986 12.391 5.98401 12.5818 5.79232L15.7597 2.58836L18.9165 5.78913C19.2972 6.17616 19.9164 6.17616 20.2981 5.78913C20.6797 5.4021 20.6797 4.77499 20.2981 4.38796L16.4523 0.488434L16.4518 0.488891ZM29.8324 17.3937C30.2131 17.7807 30.8323 17.7807 31.2139 17.3937C31.5955 17.0067 31.5955 16.3796 31.2139 15.9925L27.369 12.093C27.2786 12.0022 27.1706 11.9296 27.0522 11.8789C26.9321 11.8287 26.8061 11.8027 26.6783 11.8027H26.6774C26.6648 11.8027 26.6553 11.8087 26.6432 11.8096C26.5275 11.8132 26.4132 11.8338 26.3057 11.8785C26.2067 11.9209 26.1207 11.9848 26.0415 12.0565C26.0253 12.0702 26.0042 12.0757 25.9888 12.0903L22.1201 15.9907C21.7385 16.3759 21.7367 17.0039 22.1165 17.3919C22.3073 17.5863 22.5593 17.684 22.8091 17.684C23.0588 17.684 23.3082 17.5881 23.4981 17.3955L25.7008 15.1746V22.28L22.1201 25.8883C21.7385 26.2744 21.7367 26.9015 22.1165 27.2904C22.4972 27.6783 23.1164 27.6802 23.4981 27.294L26.676 24.0901L29.8328 27.2918C30.0227 27.4853 30.2734 27.582 30.5236 27.582C30.7738 27.582 31.0235 27.4853 31.2143 27.2918C31.5959 26.9047 31.5959 26.2776 31.2143 25.8906L27.6548 22.2804V15.1851L29.8328 17.3932L29.8324 17.3937ZM23.4976 11.5937L26.6756 8.38973L29.8324 11.5914C30.0223 11.7849 30.2729 11.8817 30.5231 11.8817C30.7733 11.8817 31.0231 11.7849 31.2139 11.5914C31.5955 11.2044 31.5955 10.5764 31.2139 10.1902L27.3681 6.2898C26.9883 5.90369 26.3714 5.90277 25.9884 6.28798L22.1197 10.1875C21.7381 10.5736 21.7363 11.2007 22.1161 11.5887C22.4968 11.9775 23.116 11.9784 23.4976 11.5937ZM8.00024 17.3937C8.38095 17.7807 9.00016 17.7807 9.38176 17.3937C9.76337 17.0067 9.76337 16.3796 9.38176 15.9925L5.5369 12.093C5.44645 12.0022 5.33845 11.9296 5.22009 11.8789C5.09994 11.8287 4.97394 11.8027 4.84614 11.8027H4.84524C4.83264 11.8027 4.82319 11.8087 4.81104 11.8096C4.69673 11.8132 4.58108 11.8338 4.47353 11.8785C4.37318 11.9209 4.28633 11.9857 4.20623 12.0574C4.19093 12.0711 4.17202 12.0757 4.15762 12.0903L0.288008 15.9907C-0.0944982 16.3759 -0.0962979 17.0039 0.284409 17.3919C0.475212 17.5863 0.726315 17.684 0.976969 17.684C1.22582 17.684 1.47513 17.5881 1.66593 17.3955L3.86872 15.1746V22.28L0.288008 25.8883C-0.0944982 26.2744 -0.0962979 26.9015 0.284409 27.2904C0.664215 27.6783 1.28343 27.6792 1.66593 27.294L4.84389 24.0901L8.00069 27.2918C8.19059 27.4853 8.44125 27.582 8.69145 27.582C8.94166 27.582 9.19141 27.4853 9.38221 27.2918C9.76382 26.9047 9.76382 26.2776 9.38221 25.8906L5.82265 22.2804V15.1851L8.00069 17.3932L8.00024 17.3937ZM5.536 6.29026C5.15619 5.90414 4.53923 5.90323 4.15762 6.28843L0.288008 10.188C-0.0944982 10.5741 -0.0962979 11.2012 0.284409 11.5891C0.664215 11.9771 1.28343 11.9789 1.66593 11.5941L4.84389 8.39018L8.00069 11.5919C8.19059 11.7854 8.44125 11.8821 8.69145 11.8821C8.94166 11.8821 9.19141 11.7854 9.38221 11.5919C9.76382 11.2048 9.76382 10.5768 9.38221 10.1907L5.536 6.29026Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_97_93">
+<rect width="125" height="29" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..46a2203
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+
+Sitemap: http://trees.falktron.com/sitemap.xml
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index 7705396..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/video/tree-sensor.mp4 b/public/video/tree-sensor.mp4
new file mode 100644
index 0000000..7cfcbbd
Binary files /dev/null and b/public/video/tree-sensor.mp4 differ
diff --git a/public/video/video-1.mp4 b/public/video/video-1.mp4
new file mode 100644
index 0000000..28165fb
Binary files /dev/null and b/public/video/video-1.mp4 differ
diff --git a/public/video/video-2.mp4 b/public/video/video-2.mp4
new file mode 100644
index 0000000..a4643c2
Binary files /dev/null and b/public/video/video-2.mp4 differ
diff --git a/public/window.svg b/public/window.svg
deleted file mode 100644
index b2b2a44..0000000
--- a/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/sections/About.tsx b/sections/About.tsx
new file mode 100644
index 0000000..a312091
--- /dev/null
+++ b/sections/About.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+const About = () => {
+  const aboutTitle = useRef<HTMLHeadingElement>(null);
+  const subHeadingRef = useRef<HTMLParagraphElement>(null);
+  const subHeading2Ref = useRef<HTMLParagraphElement>(null);
+  const mainHeadingRef = useRef<HTMLHeadingElement>(null);
+
+  const subSplit1 = useRef<SplitText | null>(null);
+  const subSplit2 = useRef<SplitText | null>(null);
+  const mainSplit = useRef<SplitText | null>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      // Split subheadings into words
+      const headingSplit = new SplitText(aboutTitle.current, { type: "chars" });
+      if (subHeadingRef.current) {
+        subSplit1.current = new SplitText(subHeadingRef.current, {
+          type: "words",
+          wordsClass: "word",
+        });
+      }
+      if (subHeading2Ref.current) {
+        subSplit2.current = new SplitText(subHeading2Ref.current, {
+          type: "words",
+          wordsClass: "word",
+        });
+      }
+
+      const allSubWords = [
+        ...(subSplit1.current?.words || []),
+        ...(subSplit2.current?.words || []),
+      ];
+      gsap.from(headingSplit.chars, {
+        yPercent: 100,
+        opacity: 0,
+        duration: 1,
+        ease: "expo.out",
+        stagger: 0.025,
+        scrollTrigger: {
+          trigger: aboutTitle.current,
+          start: "top 85%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      gsap.from(allSubWords, {
+        yPercent: 100,
+        opacity: 0,
+        duration: 1,
+        ease: "expo.out",
+        stagger: 0.02,
+        scrollTrigger: {
+          trigger: subHeadingRef.current,
+          start: "top 85%",
+          toggleActions: "play none none none",
+          // markers: true,
+        },
+      });
+
+      // MAIN HEADING fade-in per character
+      if (mainHeadingRef.current) {
+        mainSplit.current = new SplitText(mainHeadingRef.current, {
+          type: "chars",
+          charsClass: "char",
+        });
+
+        const chars = mainSplit.current.chars;
+
+        gsap.fromTo(
+          chars,
+          { opacity: 0.3 },
+          {
+            opacity: 1,
+            ease: "expo.out",
+            stagger: 0.04,
+            scrollTrigger: {
+              trigger: mainHeadingRef.current,
+              start: "top 85%",
+              end: "bottom 60%",
+              scrub: 1,
+            },
+          }
+        );
+      }
+    });
+
+    return () => {
+      ctx.revert();
+      subSplit1.current?.revert();
+      subSplit2.current?.revert();
+      mainSplit.current?.revert();
+    };
+  }, []);
+
+  return (
+    <section
+      id="about"
+      className="tab:flex-row tab:gap-0 tab:px-6 mx-auto flex h-fit w-full max-w-[1420px] items-start justify-between py-8 sm:flex-col sm:gap-4 sm:px-2.5 lg:px-0"
+    >
+      {/* Left */}
+      <div className="tab:w-3/12 sm:w-full">
+        <h1
+          ref={aboutTitle}
+          className="text-h-5-28 font-switzer leading-h4 text-left font-semibold text-black"
+        >
+          About Us
+        </h1>
+      </div>
+
+      {/* Right */}
+      <div className="tab:w-8/12 flex flex-col gap-5 sm:w-full">
+        {/* MAIN HEADING */}
+        <h2
+          ref={mainHeadingRef}
+          className="font-switzer sm:text-h-4-34 tab:text-h-6-38 tab:leading-h3 overflow-hidden font-semibold text-black sm:leading-10"
+        >
+          At{" "}
+          <span className="text-brand font-playfair font-semibold italic">
+            FalktronTrees
+          </span>{" "}
+          merges IoT, AI, and environmental intelligence to connect nature and
+          technology, creating smart solutions that monitor and improve the
+          health of trees and ecosystems.
+        </h2>
+
+        {/* Sub-heading 1 */}
+        <p
+          ref={subHeadingRef}
+          className="font-mium-reg text-b-2-17 leading-b2 w-full overflow-hidden text-left tracking-[-0.8px] text-black"
+        >
+          Based in Oelde, Germany, FalktronTrees brings together innovation,
+          data science, and environmental care to empower cities, organizations,
+          and individuals to manage natural resources intelligently.
+        </p>
+
+        {/* Sub-heading 2 */}
+        <p
+          ref={subHeading2Ref}
+          className="font-mium-reg text-b-2-17 leading-b2 w-full overflow-hidden text-left tracking-[-0.8px] text-black"
+        >
+          Under the leadership of Matthias Mut, co-founder and CEO, the company
+          combines expertise in AI-driven analytics, sensor technology, and
+          prompt engineering to deliver cutting-edge environmental monitoring
+          systems.
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default About;
diff --git a/sections/Benefit.tsx b/sections/Benefit.tsx
new file mode 100644
index 0000000..332863a
--- /dev/null
+++ b/sections/Benefit.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import gsap from "gsap";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+
+const Benefit = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  const benefits = [
+    {
+      icon: "/images/svg/mdi_water-check-outline (1).svg",
+      title: "Save Water & Costs",
+      description:
+        "Optimize irrigation with real-time data and reduce unnecessary water usage.",
+    },
+    {
+      icon: "/images/svg/entypo_tree.svg",
+      title: "Healthier Trees",
+      description:
+        "Detect stress early and ensure optimal growth and longevity.",
+    },
+    {
+      icon: "/images/svg/iconoir_reports.svg",
+
+      title: "Transparent Reports",
+      description:
+        "Provide actionable insights for councils, cities, and citizens alike.",
+    },
+    {
+      icon: "/images/svg/lucide_monitor-cog.svg",
+
+      title: "Fast Setup",
+      description:
+        "Deploy smart monitoring from pilot to full project within weeks.",
+    },
+  ];
+  useEffect(() => {
+    const cards = gsap.utils.toArray<HTMLDivElement>(".animation .card-inner");
+
+    cards.forEach((card) => {
+      gsap.from(card, {
+        x: -130,
+        opacity: 0,
+        duration: 1,
+        ease: "expo.out",
+        scrollTrigger: {
+          trigger: ".wrapper",
+          start: "top 80%",
+        },
+      });
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, []);
+  return (
+    <section
+      ref={containerRef}
+      id="benefits"
+      className="bg-light-200 relative h-full w-full"
+    >
+      <div className="tab:px-6 mx-auto flex w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:h-screen lg:px-0">
+        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
+          <Headline text="Benefits" />
+          <h1
+            ref={headingRef}
+            className="font-switzer sm:text-h-mobile-30 sm:leading-h5 tab:text-[50px] tab:leading-h3 lg:text-h-2-60 lg:leading-h2 overflow-hidden text-center font-semibold text-black"
+          >
+            Smarter Trees. Greener{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Cities.
+            </span>
+            Sustainable{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Future.{" "}
+            </span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+          >
+            Experience real-time insights, efficient water use, and healthier
+            urban forests — start your pilot or schedule a demo today.
+          </p>
+        </div>
+        <div className="tab:grid-cols-2 wrapper tab:gap-6 grid grid-cols-1 sm:grid-cols-1 sm:gap-3 md:grid-cols-3 lg:grid-cols-4">
+          {benefits.map((benefit, index) => (
+            <div
+              key={index}
+              className="animation tab:max-w-[320px] group h-[350px] overflow-hidden sm:w-full"
+            >
+              <div
+                className={`tab:max-w-[320px] card-inner relative flex h-[350px] cursor-pointer flex-col items-start justify-between overflow-hidden rounded-[20px] bg-white px-6 py-5 transition-colors duration-500 ease-in-out sm:w-full`}
+              >
+                <div className="bg-brand absolute top-5 left-6 h-20 w-20 scale-0 rounded-full transition-transform duration-500 ease-out group-hover:scale-[10]"></div>
+                <div className="bg-light-200 relative z-20 flex h-20 w-20 items-center justify-center rounded-full">
+                  <Image
+                    src={benefit.icon}
+                    alt={benefit.title}
+                    width={32}
+                    height={32}
+                    className="object-cover"
+                  />
+                </div>
+                <div className="relative z-20 h-[124px]">
+                  <h3
+                    className={`text-h-7-24 leading-h5 font-switzer mb-2.5 text-left font-semibold text-black group-hover:text-white`}
+                  >
+                    {benefit.title}
+                  </h3>
+                  <p
+                    className={`text-b-3-16 leading-b3 font-mium-reg tracking-[-0.8px] text-black group-hover:text-white`}
+                  >
+                    {benefit.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Benefit;
diff --git a/sections/CTA.tsx b/sections/CTA.tsx
new file mode 100644
index 0000000..a137a12
--- /dev/null
+++ b/sections/CTA.tsx
@@ -0,0 +1,75 @@
+"use client";
+import Button from "@/components/shared/Button";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Image from "next/image";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const CTA = () => {
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const paraRef = useRef<HTMLParagraphElement>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (buttonRef.current) {
+      gsap.from(buttonRef.current, {
+        opacity: 0,
+        y: 20,
+        duration: 0.8,
+        ease: "power2.out",
+        delay: 0.6,
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top 80%",
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      id="cta"
+      className="tab:mx-0 relative mx-auto h-full w-full sm:px-2.5"
+    >
+      <div className="tab:h-[450px] tab:my-6 relative mx-auto flex w-full max-w-[1420px] items-center justify-center overflow-hidden rounded-3xl bg-[url('/images/png/1-2.jpeg')] bg-cover bg-center sm:h-[490px]">
+        <div className="relative z-20 flex flex-col items-center justify-center gap-3 px-4">
+          <h1
+            ref={headingRef}
+            className="font-switzer tab:text-h-2-60 md:leading-h1 tab:leading-h2 text-center font-semibold text-white sm:text-[50px] sm:leading-[54px]"
+          >
+            Join the Future of Smart Tree Care
+          </h1>
+
+          <p
+            aria-hidden="true"
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg tab:w-9/12 text-center tracking-[-0.8px] text-white sm:w-full"
+          >
+            Experience real-time insights, efficient water use, and healthier
+            urban forests — start your pilot or schedule a demo today.
+          </p>
+
+          <div ref={buttonRef}>
+            <Button text="Book a Demo" />
+          </div>
+        </div>
+        <Image
+          src="/images/png/Blob 5.png"
+          width={700}
+          height={500}
+          alt="overlay"
+          className="absolute bottom-0 left-0 h-[410px] w-full object-cover"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CTA;
diff --git a/sections/CaseStudy.tsx b/sections/CaseStudy.tsx
new file mode 100644
index 0000000..0dccf2c
--- /dev/null
+++ b/sections/CaseStudy.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+import Image from "next/image";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import gsap from "gsap";
+import { useEffect, useRef } from "react";
+import { useCases } from "@/data/useCases";
+import { useRouter } from "next/navigation";
+import { usePageTransition } from "@/layout/Layout";
+
+const CaseStudy = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { startTransition } = usePageTransition();
+  useSplitHeading(headingRef, paraRef);
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const cards = gsap.utils.toArray<HTMLDivElement>(".use-card");
+
+    gsap.from(cards, {
+      y: 100,
+      opacity: 0,
+      duration: 1.2,
+      ease: "power3.out",
+      stagger: 0.19,
+      scrollTrigger: {
+        trigger: ".use-wrapper",
+        start: "top 80%",
+        end: "bottom 60%",
+        toggleActions: "play none none none",
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, []);
+
+  return (
+    <section
+      id="use-cases"
+      ref={containerRef}
+      className="bg-light-200 relative h-full w-full"
+    >
+      <div className="tab:px-6 mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:px-0">
+        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
+          <Headline text="Use Case" />
+          <h1
+            ref={headingRef}
+            className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+          >
+            One Technology, Many{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Applications
+            </span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+          >
+            Whether for municipalities, research, or contractors — FalktronTrees
+            brings actionable insights to every level of urban forestry.
+          </p>
+        </div>
+        <div className="tab:grid-cols-2 wrapper tab:gap-6 grid grid-cols-1 sm:grid-cols-1 sm:gap-3 md:grid-cols-3 lg:grid-cols-4">
+          {useCases.map((useCase, index) => (
+            <div
+              key={index}
+              className="group use-card relative overflow-hidden rounded-2xl bg-white p-3.5"
+            >
+              {/* Image */}
+              <div className="relative h-[190px] overflow-hidden rounded-2xl">
+                <Image
+                  src={useCase.image}
+                  alt={useCase.title}
+                  width={400}
+                  height={190}
+                  className="h-full w-full transform rounded-2xl object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                />
+              </div>
+
+              {/* Text Content */}
+              <div className="flex h-max flex-col items-start px-1 pt-6 pb-2 text-left">
+                <h3 className="text-b-1-20 font-switzer leading-b1 mb-2 text-left font-medium text-black">
+                  {useCase.title}
+                </h3>
+                <p className="text-gray font-mium-reg mb-6 line-clamp-3 text-left text-sm leading-5 tracking-[-0.8px]">
+                  {useCase.description}
+                </p>
+                <button
+                  onClick={() => startTransition(`/use-cases/${useCase.slug}`)}
+                  className="text-b-4-14 font-switzer bg-brand leading-b4 inline-flex cursor-pointer items-center gap-2 rounded-full px-4 py-3 font-normal text-white transition-all duration-300 hover:gap-3"
+                >
+                  Learn more
+                  <Image
+                    src="/images/svg/arrow.svg"
+                    alt="Learn more"
+                    className="h-4.5 w-4.5 object-contain"
+                    width={16}
+                    height={16}
+                  />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CaseStudy;
diff --git a/sections/FAQ.tsx b/sections/FAQ.tsx
new file mode 100644
index 0000000..ad1175c
--- /dev/null
+++ b/sections/FAQ.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { FAQ } from "@/components/ui/accordion";
+import Headline from "@/components/ui/headline";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+import { useRef } from "react";
+
+const FAQSection = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  const faq = [
+    {
+      question: "What is Whispering Trees?",
+      answer:
+        "Whispering Trees is an IoT and AI platform that monitors the health of urban trees in real time. Our sensors measure moisture, stress, and environmental data — helping cities make smarter irrigation and maintenance decisions.",
+    },
+
+    {
+      question: "How many trees can we monitor?",
+      answer:
+        "The system is fully scalable — from a single pilot district with 10 sensors to thousands of trees across multiple cities. You can start small and expand anytime without hardware changes.",
+    },
+    {
+      question: "How accurate are the sensors?",
+      answer:
+        "Whispering Trees sensors are scientifically validated with precision readings for moisture and electrical resistance, ensuring early stress detection with over 95% reliability in field conditions.",
+    },
+    {
+      question: "Do we need Wi-Fi or mobile data in the field?",
+      answer:
+        "No fixed Wi-Fi is required. The sensors communicate via low-power wireless networks (LoRaWAN or LTE-M), optimized for long range and minimal energy use — perfect for public spaces.",
+    },
+    {
+      question: "What kind of support is included?",
+      answer:
+        "We offer onboarding assistance, online documentation, and email support for all Starter/Core users. Enterprise plans include dedicated account management and advanced analytics.",
+    },
+    {
+      question: "How soon can we start a pilot project?",
+      answer:
+        "You can begin within 4–8 weeks. After the first sensor installation, data appears live on your dashboard — giving you immediate insights into your urban forest’s health.",
+    },
+  ];
+
+  return (
+    <section
+      ref={containerRef}
+      id="faq"
+      className="tab:px-0 flex h-full flex-col items-center justify-center pb-8 sm:px-2.5"
+    >
+      <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-6/12">
+        <Headline text="FAQ" />
+        <h1
+          ref={headingRef}
+          className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+        >
+          Whispering Trees{" "}
+          <span className="font-playfair text-brand font-semibold italic">
+            Explained
+          </span>
+        </h1>
+        <p
+          ref={paraRef}
+          className="text-b-3-16 leading-b3 font-mium-reg max-w-2xl text-center tracking-[-0.8px] text-black/80"
+        >
+          Learn how Whispering Trees helps cities grow greener and smarter.
+        </p>
+      </div>
+      <div className="tab:w-11/12 mt-10 w-full md:w-9/12">
+        <FAQ faqData={faq} />
+      </div>
+    </section>
+  );
+};
+
+export default FAQSection;
diff --git a/sections/Hero.tsx b/sections/Hero.tsx
new file mode 100644
index 0000000..09f250d
--- /dev/null
+++ b/sections/Hero.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { SplitText } from "gsap/SplitText";
+import Image from "next/image";
+import Button from "@/components/shared/Button";
+import SecondaryButton from "@/components/shared/Secondary";
+import Navbar from "@/components/shared/Navbar";
+import MobileNavbar from "@/components/ui/mobile-navbar";
+
+// Register plugins (once)
+gsap.registerPlugin(SplitText);
+
+const Hero = () => {
+  // ── Refs ─────────────────────────────────────────────────────────────────────
+  const containerRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const subHeadingRef = useRef<HTMLParagraphElement>(null);
+  const buttonWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      // ── 2. HEADING – char-by-char ───────────────────────────────────
+      if (!headingRef.current) return;
+      const headingSplit = new SplitText(headingRef.current, { type: "words" });
+      gsap.fromTo(
+        headingSplit.words,
+        { yPercent: 120, opacity: 0 },
+        {
+          yPercent: 0,
+          opacity: 1,
+          duration: 1.2,
+          ease: "expo.out",
+          stagger: 0.09,
+          delay: 0.3, // after navbar
+        }
+      );
+
+      // ── 3. SUB-HEADING – char-by-char ───────────────────────────────
+      if (subHeadingRef.current) {
+        const subSplit = new SplitText(subHeadingRef.current, {
+          type: "words",
+        });
+        gsap.fromTo(
+          subSplit.words,
+          { yPercent: 100, opacity: 0 },
+          {
+            yPercent: 0,
+            opacity: 1,
+            duration: 1,
+            ease: "expo.out",
+            stagger: 0.04,
+            delay: 0.6, // after heading
+          }
+        );
+      }
+
+      // ── 4. BUTTONS – slide up ───────────────────────────────────────
+      const buttons = buttonWrapperRef.current?.children;
+      if (buttons?.length) {
+        gsap.fromTo(
+          buttons,
+          { y: 40, opacity: 0 },
+          {
+            y: 0,
+            opacity: 1,
+            duration: 0.8,
+            ease: "power3.out",
+            stagger: 0.15,
+            delay: 0.9, // after sub-heading
+          }
+        );
+      }
+    }, containerRef);
+
+    // ── Cleanup ────────────────────────────────────────────────────────
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      id="home"
+      className="font-switzer tab:p-5 tab:h-[110vh] mx-auto max-h-[900px] w-full max-w-[1650px] overflow-hidden sm:h-screen sm:p-2.5"
+    >
+      {/* ── Desktop Navbar (wrapped) ───────────────────────────────────── */}
+      <Navbar />
+
+      {/* ── Mobile Navbar (wrapped) ────────────────────────────────────── */}
+      <MobileNavbar />
+
+      {/* ── Hero Content ───────────────────────────────────────────────── */}
+      <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-hidden rounded-2xl">
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 h-full w-full object-cover"
+        >
+          <source src="/video/video-1.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+
+        <div className="tab:p-0 tab:mt-0 tab:max-w-[600px] relative z-20 mx-auto flex flex-col gap-5 sm:mt-10 sm:px-3 md:max-w-[750px] lg:max-w-[850px]">
+          {/* Heading */}
+          <h1
+            ref={headingRef}
+            className="font-switzer sm:text-hero-mobile tab:text-h-2-60 lg:text-h-1-96 tab:leading-h2 text-center font-semibold text-white sm:leading-[54px] md:text-[75px] md:leading-[75px]"
+          >
+            Trees can talk. We help you{" "}
+            <span className="font-playfair font-semibold italic">listen.</span>
+          </h1>
+
+          {/* Sub-heading */}
+          <p
+            ref={subHeadingRef}
+            className="font-mium-reg tab:text-b-3-16 lg:text-b-1-20 sm:text-b-3-16 w-full text-center leading-normal text-white sm:tracking-[-0.6px]"
+          >
+            Whispering Trees shows you if a tree is healthy or thirsty — in real
+            time. So you water only when needed, save money, and keep trees
+            alive longer.
+          </p>
+
+          {/* Buttons */}
+          <div
+            ref={buttonWrapperRef}
+            className="tab:gap-5 flex w-full justify-center sm:flex-wrap sm:gap-3"
+          >
+            <Button text="Tree for Free" />
+            <SecondaryButton targetId="how-it-works" text="How It Works" />
+          </div>
+        </div>
+
+        {/* Blob overlay */}
+        <Image
+          src="/images/png/Blob 5.png"
+          width={700}
+          height={500}
+          alt="overlay"
+          className="tab:h-[550px] absolute bottom-0 left-0 w-full object-cover sm:h-[70vh]"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
diff --git a/sections/HeroCase.tsx b/sections/HeroCase.tsx
new file mode 100644
index 0000000..3cc6f5f
--- /dev/null
+++ b/sections/HeroCase.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(SplitText);
+
+interface HeroClientProps {
+  item: {
+    heroImage: string;
+    title: string;
+    description: string;
+  };
+}
+
+export default function HeroClient({ item }: HeroClientProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const subHeadingRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      if (!headingRef.current) return;
+
+      const headingSplit = new SplitText(headingRef.current, { type: "words" });
+      gsap.fromTo(
+        headingSplit.words,
+        { yPercent: 120, opacity: 0 },
+        {
+          yPercent: 0,
+          opacity: 1,
+          duration: 1.2,
+          ease: "expo.out",
+          stagger: 0.09,
+          delay: 0.3,
+        }
+      );
+
+      if (subHeadingRef.current) {
+        const subSplit = new SplitText(subHeadingRef.current, {
+          type: "words",
+        });
+        gsap.fromTo(
+          subSplit.words,
+          { yPercent: 100, opacity: 0 },
+          {
+            yPercent: 0,
+            opacity: 1,
+            duration: 1,
+            ease: "expo.out",
+            stagger: 0.04,
+            delay: 0.6,
+          }
+        );
+      }
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      className="font-switzer tab:p-5 tab:h-[90vh] relative mx-auto w-full max-w-[1650px] overflow-hidden sm:h-[80vh] sm:p-2.5"
+    >
+      <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-hidden rounded-2xl">
+        <Image
+          src={item.heroImage}
+          alt={item.title}
+          width={1200}
+          height={600}
+          className="absolute inset-0 h-full w-full rounded-2xl object-cover"
+        />
+        <div className="flex w-full max-w-[1420px] items-center px-5">
+          <div className="tab:p-0 tab:mt-0 relative z-20 flex w-full max-w-[850px] flex-col gap-5 sm:mt-10 sm:px-0">
+            <h1
+              ref={headingRef}
+              className="font-switzer sm:text-hero-mobile tab:text-h-1-96 tab:leading-h1 text-left font-semibold text-white sm:leading-[54px]"
+            >
+              {item.title}
+            </h1>
+            <p
+              ref={subHeadingRef}
+              className="font-mium-reg tab:text-b-1-20 sm:text-b-3-16 w-full text-left leading-normal text-white sm:tracking-[-0.6px]"
+            >
+              {item.description}
+            </p>
+          </div>
+        </div>
+        <Image
+          src="/images/png/Blob 5.png"
+          width={700}
+          height={500}
+          alt="overlay"
+          className="tab:h-[450px] absolute bottom-0 left-0 w-full object-cover sm:h-[40vh]"
+        />
+      </div>
+    </section>
+  );
+}
diff --git a/sections/HowWork.tsx b/sections/HowWork.tsx
new file mode 100644
index 0000000..89c7de5
--- /dev/null
+++ b/sections/HowWork.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+import Image from "next/image";
+import { useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const HowWork = () => {
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const paraRef = useRef<HTMLParagraphElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Refs for animation targets
+  const imageRef = useRef<HTMLImageElement>(null);
+  const leftStepsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const rightStepsRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  useSplitHeading(headingRef, paraRef);
+
+  const steps = [
+    {
+      id: "01",
+      text: "Deploy Whispering Trees Pulse sensor directly onto your tree.",
+      position: "left",
+    },
+    {
+      id: "02",
+      text: "Real-time data automatically streams to Whispering Trees Cloud.",
+      position: "left",
+    },
+    {
+      id: "03",
+      text: "Dashboard displays tree health, history, and irrigation requirements.",
+      position: "right",
+    },
+    {
+      id: "04",
+      text: "Export data or integrate seamlessly with city systems.",
+      position: "right",
+    },
+  ];
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: imageRef.current,
+          start: "top 70%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      // 1. Image: clip-path from bottom → top
+      if (imageRef.current) {
+        gsap.set(imageRef.current, { clipPath: "inset(100% 0% 0% 0%)" });
+        tl.to(imageRef.current, {
+          clipPath: "inset(0% 0% 0% 0%)",
+          duration: 1.2,
+          ease: "power3.out",
+        });
+      }
+      leftStepsRef.current.forEach((el, i) => {
+        if (el) {
+          gsap.set(el, { opacity: 0, x: -80 });
+          tl.to(
+            el,
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            i === 0 ? "-=0.8" : "-=0.6" // stagger
+          );
+        }
+      });
+      rightStepsRef.current.forEach((el, i) => {
+        if (el) {
+          gsap.set(el, { opacity: 0, x: 80 });
+          tl.to(
+            el,
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            i === 0 ? "-=0.8" : "-=0.6"
+          );
+        }
+      });
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      id="how-it-works"
+      className="tab:px-6 relative h-full w-full sm:px-2.5 lg:px-0"
+    >
+      <div className="mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:pt-8">
+        {/* Heading */}
+        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
+          <Headline text="How It Works" />
+          <h1
+            ref={headingRef}
+            className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+          >
+            The Whispering Trees{" "}
+            <span className="font-playfair text-brand italic">Process.</span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="font-mium-reg text-b-3-16 leading-b3 text-center tracking-[-0.8px] text-black"
+          >
+            Monitor tree health in real-time and optimize irrigation schedules
+            with our intelligent sensor system, ensuring urban forests thrive
+            while conserving water.
+          </p>
+        </div>
+
+        {/* Steps + Image */}
+        <div className="tab:flex-row tab:h-[500px] flex w-full items-center justify-between sm:flex-col">
+          {/* Left Steps */}
+          <div className="tab:w-4/12 flex h-full flex-col items-center justify-between sm:w-full">
+            {steps
+              .filter((s) => s.position === "left")
+              .map((step, i) => (
+                <div
+                  key={step.id}
+                  ref={(el) => {
+                    leftStepsRef.current[i] = el;
+                  }}
+                  className="tab:h-[200px] tab:w-[350px] flex h-[180px] w-full flex-col items-center gap-4 sm:h-[180px]"
+                >
+                  <h2 className="font-switzer text-h-4-34 leading-h4 font-medium text-black">
+                    {step.id}
+                  </h2>
+                  <p className="font-switzer text-b-1-20 leading-b1 text-center font-medium text-black">
+                    {step.text}
+                  </p>
+                </div>
+              ))}
+          </div>
+
+          {/* Center Image */}
+          <div className="tab:mt-0 tab:mb-0 tab:w-4/12 h-full sm:-mt-14 sm:mb-14 sm:w-full">
+            <Image
+              ref={imageRef}
+              alt="Product"
+              width={600}
+              height={600}
+              src="/images/png/product.png"
+              className="h-full w-full object-contain"
+            />
+          </div>
+
+          {/* Right Steps */}
+          <div className="tab:w-4/12 flex h-full flex-col items-center justify-between sm:w-full">
+            {steps
+              .filter((s) => s.position === "right")
+              .map((step, i) => (
+                <div
+                  key={step.id}
+                  ref={(el) => {
+                    rightStepsRef.current[i] = el;
+                  }}
+                  className="tab:h-[200px] tab:w-[350px] flex h-[180px] w-full flex-col items-center gap-4 sm:h-[180px]"
+                >
+                  <h2 className="font-switzer text-h-4-34 leading-h4 font-medium text-black">
+                    {step.id}
+                  </h2>
+                  <p className="font-switzer text-b-1-20 leading-b1 text-center font-medium text-black">
+                    {step.text}
+                  </p>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HowWork;
diff --git a/sections/ProductPreview.tsx b/sections/ProductPreview.tsx
new file mode 100644
index 0000000..8ef061b
--- /dev/null
+++ b/sections/ProductPreview.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import Image from "next/image";
+import gsap from "gsap";
+import { useEffect, useRef, useState } from "react";
+import Button from "@/components/shared/Button";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+
+const ProductPreview = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const headingRef2 = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const paraRef2 = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const imageRef = useRef<HTMLDivElement | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const listItemsRef = useRef<(HTMLLIElement | null)[]>([]);
+  useSplitHeading(headingRef, paraRef);
+  useSplitHeading(headingRef2, paraRef2);
+  const features = [
+    {
+      feature: "Tree Health View with Vitality Gauge",
+      Image: "/images/png/hero-bg.png",
+    },
+    {
+      feature: "Sensor Management System",
+      Image: "/images/png/hero-bg.png",
+    },
+    {
+      feature: "Data Export & Analytics Tools",
+      Image: "/images/png/hero-bg.png",
+    },
+    {
+      feature: "Multi-user Access and Permissions",
+      Image: "/images/png/hero-bg.png",
+    },
+  ];
+
+  useEffect(() => {
+    if (!imageRef.current) return;
+    gsap.fromTo(
+      imageRef.current,
+      { opacity: 0, scale: 0.97 },
+      { opacity: 1, scale: 1, duration: 0.8, ease: "power2.out" }
+    );
+  }, [activeIndex]);
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      setActiveIndex((prev) => (prev + 1) % features.length);
+    }, 4000);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+  /* --------------------------------------------------------------- */
+  /*  3. Scroll-triggered: Image clip-path + List stagger            */
+  /* --------------------------------------------------------------- */
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: ".report-wrapper",
+          start: "top 85%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      /* ---- Image: bottom → top clip-path ---- */
+      if (imageRef.current) {
+        gsap.set(imageRef.current, {
+          clipPath: "inset(100% 0% 0% 0%)",
+          opacity: 0,
+        });
+        tl.to(imageRef.current, {
+          clipPath: "inset(0% 0% 0% 0%)",
+          opacity: 1,
+          duration: 1.2,
+          ease: "power3.out",
+        });
+      }
+      const items = listItemsRef.current.filter(Boolean);
+      gsap.set(items, { y: 60 });
+      tl.to(
+        items,
+        {
+          y: 0,
+          duration: 0.8,
+          ease: "power2.out",
+          stagger: 0.15,
+        },
+        "-=0.8"
+      ); // overlap slightly with image reveal
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section ref={containerRef} className="relative h-full w-full">
+      <div className="tab:px-6 tab:py-8 mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 sm:px-2.5 sm:pb-8 lg:px-0">
+        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
+          <Headline text="Product Preview" />
+          <h1
+            ref={headingRef}
+            className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+          >
+            Manage Every Tree with{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Clarity.
+            </span>
+            and{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Confidence.{" "}
+            </span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+          >
+            A powerful all-in-one dashboard to monitor tree health, sensors, and
+            data insights — built for precision forestry and sustainability.
+          </p>
+        </div>
+        <div className="w-full lg:px-8">
+          <div className="tab:w-5/12 flex flex-col gap-2 sm:w-full">
+            <h1
+              ref={headingRef2}
+              className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-left font-semibold text-black"
+            >
+              Export for{" "}
+              <span className="font-playfair text-brand font-semibold italic">
+                Reports
+              </span>
+            </h1>
+            <p
+              ref={paraRef2}
+              className="text-b-3-16 leading-b3 font-mium-reg text-left tracking-[-0.8px] text-black"
+            >
+              Generate ready-to-share reports with insights for management,
+              research, or community updates.
+            </p>
+          </div>
+          <div className="tab:flex-row report-wrapper tab:mt-0 tab:gap-0 flex w-full items-center justify-between sm:mt-5 sm:flex-col-reverse sm:gap-4">
+            <div className="tab:w-6/12 w-full sm:w-full">
+              <ul className="mb-10 flex flex-col gap-3 overflow-hidden">
+                {features.map((item, idx) => (
+                  <li
+                    key={idx}
+                    ref={(el) => {
+                      listItemsRef.current[idx] = el;
+                    }}
+                    className={`flex items-center gap-3 transition-all duration-500 ${
+                      activeIndex === idx
+                        ? "scale-[1.02] opacity-100"
+                        : "scale-100 opacity-30"
+                    }`}
+                  >
+                    <div
+                      className={`flex h-10 w-10 items-center justify-center rounded-full transition-all duration-500 ${
+                        activeIndex === idx ? "bg-[#A3C9A8]" : "bg-[#C2D2C5]"
+                      }`}
+                    >
+                      <Image
+                        src="/images/svg/leaf.svg"
+                        alt="Leaf icon"
+                        width={20}
+                        height={20}
+                        className="h-5 w-5 object-contain"
+                      />
+                    </div>
+                    <p className="font-switzer text-b-1-20 leading-b1 font-medium text-black">
+                      {item.feature}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+              <Button text="Try for free" />
+            </div>
+
+            {/* RIGHT SIDE: Changing Image */}
+            <div
+              ref={imageRef}
+              key={features[activeIndex].Image}
+              className="tab:w-6/12 relative h-[400px] w-full overflow-hidden rounded-xl sm:w-full"
+            >
+              <Image
+                src={features[activeIndex].Image}
+                alt={features[activeIndex].feature}
+                width={600}
+                height={400}
+                className="h-full w-full rounded-xl object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductPreview;
diff --git a/sections/SocialProff.tsx b/sections/SocialProff.tsx
new file mode 100644
index 0000000..e641588
--- /dev/null
+++ b/sections/SocialProff.tsx
@@ -0,0 +1,48 @@
+import { Marquee } from "@/components/ui/logo-marquee";
+import Image from "next/image";
+
+const companies = [
+  { url: "/images/svg/googleplus logo.svg" },
+  { url: "/images/svg/linkedin-plain-wordmark logo.svg" },
+  { url: "/images/svg/metallb-horizontal-white logo.svg" },
+  { url: "/images/svg/microsoft logo.svg" },
+  // add more logopngeeded
+];
+
+const SocialProff = () => {
+  return (
+    <section
+      id="logos"
+      className="tab:px-6 relative z-20 mx-auto w-full max-w-[1420px] py-2 sm:px-2.5 lg:px-0"
+    >
+      <div className="tab:flex-row flex w-full flex-col items-center justify-between gap-2 md:gap-0">
+        <h3 className="font-switzer leading-b2 tab:w-3/12 tab:text-left tab:px-0 text-xl font-semibold text-black sm:w-full sm:px-7 sm:text-center lg:w-2/12">
+          Trusted by more than <span className="text-black">5k+</span> satisfied
+          clients
+        </h3>
+        <div className="tab:w-8/12 relative mt-2 overflow-hidden sm:w-full">
+          <Marquee gap="3rem" className="max-w-full [--duration:10s]">
+            {companies.map((company, idx) => (
+              <Image
+                key={idx}
+                width={112}
+                height={42}
+                src={company.url}
+                className="w-full object-contain grayscale transition-all duration-300 hover:grayscale-0 sm:h-10 md:h-10"
+                alt={`Company logo ${idx + 1}`}
+              />
+            ))}
+          </Marquee>
+
+          {/* left gradient fade */}
+          <div className="pointer-events-none absolute inset-y-0 left-0 h-full w-1/4 bg-gradient-to-r from-white to-transparent"></div>
+
+          {/* right gradient fade */}
+          <div className="pointer-events-none absolute inset-y-0 right-0 h-full w-1/4 bg-gradient-to-l from-white to-transparent"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SocialProff;
diff --git a/sections/Testimonial.tsx b/sections/Testimonial.tsx
new file mode 100644
index 0000000..2e6a79e
--- /dev/null
+++ b/sections/Testimonial.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { Marquee } from "@/components/ui/logo-marquee";
+import { TestimonialCard } from "@/components/ui/testimonial-marquee";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import SplitText from "gsap/SplitText";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Headline from "@/components/ui/headline";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+gsap.registerPlugin(SplitText, ScrollTrigger);
+
+const testimonials = [
+  {
+    id: 1,
+    name: "Dazzle Healer",
+    role: "Front End Developer",
+    avatar: "/images/png/Avatar.png",
+
+    message:
+      "I've used other kits, but this one is the best. The attention to detail and usability are truly amazing for all designers. I highly recommend it for any type of project.",
+  },
+  {
+    id: 2,
+    name: "Ammy Johnson",
+    role: "Scientific Advisor",
+    avatar: "/images/png/Avatar (2).png",
+
+    message:
+      "The level of accuracy and precision in the data analytics blew me away. Whispering Tree makes environmental monitoring so much easier for our teams.",
+  },
+  {
+    id: 3,
+    name: "Leo Smith",
+    role: "Urban Planner",
+    avatar: "/images/png/Avatar (1).png",
+
+    message:
+      "Integrating the IoT sensors into our city’s green spaces helped us reduce water usage by over 30%. It’s a game-changer for sustainable urban development.",
+  },
+  {
+    id: 4,
+    name: "Sofia Martins",
+    role: "Research Scientist",
+    avatar: "/images/png/Avatar (3).png",
+    message:
+      "Real-time health insights from trees have opened a whole new perspective for environmental research. It’s efficient, reliable, and visually elegant.",
+  },
+  {
+    id: 5,
+    name: "Michael Chen",
+    role: "Environmental Engineer",
+    avatar: "/images/png/Avatar (4).png",
+    message:
+      "Our city parks have become smarter and greener since adopting Whispering Tree. The platform’s clarity in reports is unmatched.",
+  },
+  {
+    id: 6,
+    name: "Laura Green",
+    role: "Sustainability Consultant",
+    avatar: "/images/png/Avatar (1).png",
+    message:
+      "It’s refreshing to see technology being used for nature’s benefit. The dashboards are intuitive and provide deep insights for eco-management.",
+  },
+  {
+    id: 7,
+    name: "David Kim",
+    role: "IoT Solutions Architect",
+    avatar: "/images/png/Avatar (4).png",
+    message:
+      "The ease of integrating sensors into existing infrastructure made implementation seamless. Great work by the Whispering Tree team!",
+  },
+  {
+    id: 8,
+    name: "Priya Nair",
+    role: "Climate Research Analyst",
+    avatar: "/images/png/Avatar.png",
+    message:
+      "This platform allows us to visualize and act on real environmental data in real time. The insights are helping cities adapt sustainably.",
+  },
+];
+const Testimonial = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  const middleIndex = Math.ceil(testimonials.length / 2);
+  const firstHalf = testimonials.slice(0, middleIndex);
+  const secondHalf = testimonials.slice(middleIndex);
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const cards = gsap.utils.toArray<HTMLDivElement>(".test-card");
+
+    gsap.from(cards, {
+      y: 100,
+      opacity: 0,
+      duration: 1.2,
+      ease: "power3.out",
+      stagger: 0.19,
+      scrollTrigger: {
+        trigger: ".test-wrapper",
+        start: "top 80%",
+        end: "bottom 60%",
+        toggleActions: "play none none none",
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      className="tab:px-6 mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:px-0"
+    >
+      <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-6/12">
+        <Headline text="Feedback" />
+        <h1
+          ref={headingRef}
+          className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+        >
+          Powered by{" "}
+          <span className="font-playfair text-brand font-semibold italic">
+            Trust.
+          </span>
+          <br />
+          Proven by{" "}
+          <span className="font-playfair text-brand font-semibold italic">
+            Nature.
+          </span>
+        </h1>
+        <p
+          ref={paraRef}
+          className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+        >
+          See how municipalities and partners use FalktronTrees to make smarter,
+          data-driven decisions for urban green spaces.
+        </p>
+      </div>
+      <div className="test-wrapper relative w-full overflow-hidden">
+        <Marquee gap="1rem" className="test-card max-w-full [--duration:120s]">
+          {firstHalf.map((test, idx) => (
+            <TestimonialCard
+              key={idx}
+              img={test.avatar}
+              id={idx + 1}
+              name={test.name}
+              title={test.role}
+              body={test.message}
+            />
+          ))}
+        </Marquee>
+        <Marquee
+          gap="1rem"
+          className="test-card max-w-full [--duration:120s]"
+          reverse
+          pauseOnHover
+        >
+          {secondHalf.map((test, idx) => (
+            <TestimonialCard
+              key={idx}
+              img={test.avatar}
+              id={idx + 1}
+              name={test.name}
+              title={test.role}
+              body={test.message}
+            />
+          ))}
+        </Marquee>
+
+        {/* left gradient fade */}
+        <div className="pointer-events-none absolute inset-y-0 left-0 h-full w-1/4 bg-gradient-to-r from-white to-transparent"></div>
+
+        {/* right gradient fade */}
+        <div className="pointer-events-none absolute inset-y-0 right-0 h-full w-1/4 bg-gradient-to-l from-white to-transparent"></div>
+      </div>
+    </section>
+  );
+};
+
+export default Testimonial;