Refactor page component and update export naming

app/(landing)/landing/page.tsx

@@ -2,22 +2,20 @@ import Navbar from "@/components/Navbar";
 import Companies from "@/components/Sections/Companies";
 import HeroSection from "@/components/Sections/HeroSection";
 import Stats from "@/components/Sections/Stats";
-import { PricingTable } from "@clerk/nextjs";
 import React from "react";
 
-const page = () => {
+const Page = () => {
   return (
-    <div className="bg-[#F6F7F9] h-screen">
-      <div className="flex justify-center pb-8 pt-4">
-        <Navbar />
-      </div>
+    <div className="bg-[#F6F7F9] min-h-screen flex flex-col">
+      {/* Navbar */}
+      <Navbar />
 
+      {/* Sections */}
       <HeroSection />
       <Companies />
       <Stats />
-      {/* <PricingTable /> */}
     </div>
   );
 };
 
-export default page;
+export default Page;

components/Navbar.tsx

@@ -1,86 +1,85 @@
 "use client";
+
 import { cn } from "@/lib/utils";
 import { SignedIn, SignedOut } from "@clerk/nextjs";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
-import { ModeToggle } from "./ModeToggle";
+import LandingMobileNav from "@/components/landing/MobileNav";
 
 const Navbar = () => {
   const pathname = usePathname();
-  const isActive = pathname === "";
+
   return (
-    <div className=" flex sticky bg-[#2d2d2d] rounded-[50px]">
-      <div className="flex flex-row justify-between items-center py-4 px-7 gap-24">
+    <header className="w-full sticky top-0 z-50 bg-[#2d2d2d]/90 backdrop-blur-xl">
+      <div className="max-w-6xl mx-auto flex items-center justify-between px-4 py-4">
+
         {/* Logo */}
-        <div className="flex flex-row gap-0.5">
-          <Image
-            src="/icon.svg"
-            alt="DesignFlow logo"
-            width={27.21}
-            height={16.45}
-          />
-          <h1 className="font-space text-2xl font-bold text-white">
+        <Link href="/" className="flex items-center gap-2">
+          <Image src="/icon.svg" alt="logo" width={30} height={30} />
+          <h1 className="font-space text-xl md:text-2xl font-bold text-white">
             DesignFlow
           </h1>
-        </div>
-        {/* Nav */}
-        <nav className="flex flex-row gap-3">
-          <div
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center gap-4 text-white font-space">
+          <Link
+            href="/landing"
             className={cn(
-              "flex justify-center items-center rounded-4xl text-white",
-              pathname == "/landing" && "bg-white text-black"
+              "px-4 py-2 rounded-3xl hover:bg-white/20 transition",
+              pathname === "/landing" && "bg-white text-black"
             )}
           >
-            <Link href="/landing" className="font-space py-2 px-6">
-              Home
-            </Link>
-          </div>
-          <div
-            className={cn(
-              "flex justify-center items-center rounded-4xl text-white",
-              pathname == "/landing#pricing" && "bg-white text-black"
-            )}
+            Home
+          </Link>
+
+          <Link
+            href="#partners"
+            className="px-4 py-2 rounded-3xl hover:bg-white/20 transition"
           >
-            <Link href="#partners" className="font-space py-2 px-6">
-              Partners
-            </Link>
-          </div>
-          <div
-            className={cn(
-              "flex justify-center items-center rounded-4xl text-white",
-              pathname == "/landing#why-us" && "bg-white text-black"
-            )}
+            Partners
+          </Link>
+
+          <Link
+            href="#why-us"
+            className="px-4 py-2 rounded-3xl hover:bg-white/20 transition"
           >
-            <Link href="#why-us" className="font-space py-2 px-6">
-              Why us?
-            </Link>
-          </div>
+            Why us?
+          </Link>
         </nav>
-        {/* Button */}
-        <div className="flex flex-row gap-0.5">
+
+        {/* Auth Buttons */}
+        <div className="hidden md:flex gap-3 text-white">
           <SignedIn>
-            <div className="flex bg-[#3285ff] justify-center items-center rounded-4xl text-white">
-              <Link href="/" className="font-space py-2 px-6">
-                Dashboard
-              </Link>
-            </div>
+            <Link
+              href="/"
+              className="px-5 py-2 bg-[#3285ff] text-white font-space rounded-3xl"
+            >
+              Dashboard
+            </Link>
           </SignedIn>
+
           <SignedOut>
-            <div className="flex flex-row gap-2.5 text-white">
-              <Link href="/sign-in" className="font-space py-2 px-6">
-                Sign In
-              </Link>
-              <Link href="/sign-up" className="font-space py-2 px-6">
-                Sign Up
-              </Link>
-            </div>
+            <Link href="/sign-in" className="px-4 py-2 rounded-3xl">
+              Sign In
+            </Link>
+            <Link
+              href="/sign-up"
+              className="px-5 py-2 bg-[#3285ff] text-white rounded-3xl"
+            >
+              Sign Up
+            </Link>
           </SignedOut>
-          {/* <ModeToggle /> */}
+        </div>
+
+        {/* Mobile Menu */}
+        <div className="md:hidden">
+          <LandingMobileNav />
         </div>
       </div>
-    </div>
+    </header>
   );
 };
 

components/Sections/Companies.tsx

@@ -1,25 +1,28 @@
 import Image from "next/image";
-import React from "react";
 
 const Companies = () => {
   return (
-    <div
-      className="flex flex-col py-16 items-center justify-center text-center font-space gap-9"
+    <section
       id="partners"
+      className="py-16 flex flex-col items-center gap-8 px-4 text-center font-space"
     >
-      <p className="font-medium text-2xl">
-        Trusted by over 14,540 businesses to enhance learning and drive
-        educational growth.
+      <p className="text-xl md:text-2xl font-medium max-w-2xl">
+        Trusted by over 14,540 businesses to enhance learning and drive educational growth.
       </p>
-      <div className="flex flex-row">
-        <Image src="/image 1.png" alt="" width={126} height={42} />
-        <Image src="/image 2.png" alt="" width={126} height={42} />
-        <Image src="/image 3.png" alt="" width={126} height={42} />
-        <Image src="/image 4.png" alt="" width={126} height={42} />
-        <Image src="/image 5.png" alt="" width={126} height={42} />
-        <Image src="/image 6.png" alt="" width={126} height={42} />
+
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 place-items-center">
+        {[1, 2, 3, 4, 5, 6].map((n) => (
+          <Image
+            key={n}
+            src={`/image ${n}.png`}
+            alt="Company Logo"
+            width={120}
+            height={40}
+            className="object-contain opacity-80 hover:opacity-100 transition"
+          />
+        ))}
       </div>
-    </div>
+    </section>
   );
 };
 

components/Sections/HeroSection.tsx

@@ -4,37 +4,36 @@ import Image from "next/image";
 import { BackgroundRippleEffect } from "../ui/BackgroundRippleEffect";
 import { Badge } from "@/components/ui/badge";
 
-import React from "react";
-
 const HeroSection = () => {
   return (
-    <div className="relative flex min-h-screen w-full flex-col items-center justify-start overflow-hidden max-h-[883px] gap-32 font-space">
+    <section className="relative flex flex-col items-center justify-start min-h-[90vh] w-full overflow-hidden pt-24 px-4">
+
       <BackgroundRippleEffect />
-      <div className="relative z-10 w-full">
-        <div className="flex flex-col items-center justify-center">
-          <Badge className="w-[259px] h-[49px] bg-white text-black text-bold font-space">
-            3500+ pro users
-          </Badge>
-          <div className="flex flex-col gap-9">
-            <h2 className="relative z-10 mx-auto max-w-4xl text-center text-2xl font-bold text-black md:text-4xl lg:text-7xl dark:text-neutral-100">
-              Simplify, Scale, Succeed with Our SaaS Solution
-            </h2>
-            <p className="relative z-10 mx-auto mt-4 max-w-xl text-center text-black text-2xl dark:text-neutral-500">
-              Empower your custom relations by getting trusted clients, faster
-              and easier
-            </p>
-          </div>
-        </div>
+
+      <div className="relative z-10 flex flex-col items-center text-center max-w-4xl">
+        <Badge className="px-6 py-2 bg-white text-black font-semibold text-sm md:text-base">
+          3500+ pro users
+        </Badge>
+
+        <h1 className="mt-8 font-space text-3xl md:text-5xl lg:text-7xl font-bold text-black dark:text-white leading-tight">
+          Simplify, Scale, Succeed with Our SaaS Solution
+        </h1>
+
+        <p className="mt-4 max-w-xl text-lg md:text-xl text-black/70 dark:text-neutral-400">
+          Empower your customer relations by getting trusted clients, faster and easier.
+        </p>
       </div>
+
       <Image
         src="/Leads (2) 1.png"
-        alt="DesignFlow leads dashboard preview"
+        alt="Dashboard Preview"
         width={1101}
         height={806}
-        className="relative z-10 w-full max-w-[1101px]"
+        className="relative z-10 w-full max-w-5xl mt-10 px-4"
         priority
       />
-    </div>
+
+    </section>
   );
 };
 

components/Sections/Stats.tsx

@@ -1,36 +1,32 @@
-import React from "react";
-
 const Stats = () => {
   return (
-    <div
-      className=" flex justify-center items-center py-10 font-space text-white"
+    <section
       id="why-us"
+      className="py-20 px-4 flex justify-center items-center font-space"
     >
-      <div className="max-w-[1224px] max-h-[572px] rounded-xl bg-[url('/image%207.png')] bg-cover bg-center bg-no-repeat">
-        <div className="py-24 flex flex-col gap-16">
-          <div className=" flex flex-col items-center justify-center">
-            <h1 className="text-white text-center font-medium text-5xl">
-              Empowering Growth and Innovation with Cutting-Edge Technology
-              Solutions
-            </h1>
+      <div className="w-full max-w-6xl rounded-xl bg-[url('/image%207.png')] bg-cover bg-center text-white p-10 md:p-20">
+
+        <h2 className="text-3xl md:text-5xl font-semibold text-center mb-12">
+          Empowering Growth and Innovation with Cutting-Edge Technology Solutions
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
+          <div>
+            <h1 className="text-5xl font-bold">2468+</h1>
+            <p className="text-xl">Pro Users</p>
           </div>
-          <div className="flex flex-row justify-center items-center gap-1">
-            <div className="flex flex-col text-center">
-              <h1 className="font-medium text-6xl text-center">2468+</h1>
-              <p className="text-2xl text-center">Pro Users</p>
-            </div>
-            <div className="flex flex-col text-center">
-              <h1 className="font-medium text-6xl">297+</h1>
-              <p className="text-2xl text-center">Customers Managed</p>
-            </div>
-            <div className="flex flex-col text-center">
-              <h1 className="font-medium text-6xl text-center">20,000+</h1>
-              <p className="text-2xl text-center">Leads Found</p>
-            </div>
+          <div>
+            <h1 className="text-5xl font-bold">297+</h1>
+            <p className="text-xl">Customers Managed</p>
+          </div>
+          <div>
+            <h1 className="text-5xl font-bold">20,000+</h1>
+            <p className="text-xl">Leads Found</p>
           </div>
         </div>
+
       </div>
-    </div>
+    </section>
   );
 };