Add src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -28,22 +28,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",
+        { name: "Services", id: "services" },
-          id: "about",
+        { name: "Projects", id: "projects" },
-        },
+        { name: "Products", id: "products" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Projects",
-          id: "projects",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Yasir Khan"
     />
@@ -52,105 +41,17 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Digital Marketing Specialist & Business Growth Strategist"
       description="I bridge the gap between marketing strategy and technical execution. Results-driven, data-focused, and ready to grow your business online."
       testimonials={[
-        {
+        { name: "Sarah J.", handle: "@techcorp", testimonial: "Increased organic traffic by over 40% in just three months. Truly an SEO genius.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729681.jpg" },
-          name: "Sarah J.",
+        { name: "Michael R.", handle: "@startupxyz", testimonial: "Achieved 3x ROAS on our paid ad campaigns. Expert results.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-s-with-blue-eyes-portrait_633478-325.jpg" },
-          handle: "@techcorp",
+        { name: "David C.", handle: "@growthco", testimonial: "Transformed our sales funnel and improved conversion rates significantly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2076.jpg" }
-          testimonial: "Increased organic traffic by over 40% in just three months. Truly an SEO genius.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729681.jpg",
-        },
-        {
-          name: "Michael R.",
-          handle: "@startupxyz",
-          testimonial: "Achieved 3x ROAS on our paid ad campaigns. Expert results.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-s-with-blue-eyes-portrait_633478-325.jpg",
-        },
-        {
-          name: "David C.",
-          handle: "@growthco",
-          testimonial: "Transformed our sales funnel and improved conversion rates significantly.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2076.jpg",
-        },
-        {
-          name: "Emily K.",
-          handle: "@marketlab",
-          testimonial: "Best digital strategist I've worked with. Professional and very analytical.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
-        },
-        {
-          name: "Alex P.",
-          handle: "@retailhub",
-          testimonial: "Excellent technical SEO skills combined with amazing creative marketing insight.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
-        },
-      ]}
-      buttons={[
-        {
-          text: "View My Work",
-          href: "#projects",
-        },
-        {
-          text: "Contact Me",
-          href: "#contact",
-        },
       ]}
+      buttons={[{ text: "View My Work", href: "#projects" }, { text: "Contact Me", href: "#contact" }]}
       imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-asian-man-sitting-restaurant_1262-1558.jpg"
       imageAlt="Yasir Khan Digital Marketing Specialist"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-pretty-woman-smiling_23-2148729681.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beauty-woman-s-with-blue-eyes-portrait_633478-325.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-standing-bakery-shop_1170-2076.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Trusted by 50+ partners"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "SEO Optimization",
-        },
-        {
-          type: "text",
-          text: "PPC Management",
-        },
-        {
-          type: "text",
-          text: "Conversion Strategy",
-        },
-        {
-          type: "text",
-          text: "Analytics & Growth",
-        },
-        {
-          type: "text",
-          text: "Digital Strategy",
-        },
-      ]}
     />
   </div>
 
@@ -159,24 +60,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Data-Driven Marketing, Built for Growth"
       description="As a Computer Science student with a passion for digital growth, I provide comprehensive marketing services including SEO, PPC, and full-stack web solutions. I turn clicks into customers."
-      metrics={[
+      metrics={[{ value: "40%+", title: "Organic Traffic Growth" }, { value: "3x", title: "ROAS on Ad Campaigns" }, { value: "75%", title: "SEO Traffic Boost" }]}
-        {
-          value: "40%+",
-          title: "Organic Traffic Growth",
-        },
-        {
-          value: "3x",
-          title: "ROAS on Ad Campaigns",
-        },
-        {
-          value: "75%",
-          title: "SEO Traffic Boost",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-16001.jpg?_wi=1"
       imageAlt="Yasir Khan About Me"
-      mediaAnimation="slide-up"
-      metricsAnimation="blur-reveal"
     />
   </div>
 
@@ -186,27 +72,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "1", title: "SEO & SEM Strategy", description: "On-page/off-page auditing, backlink strategy, and keyword optimization to rank your business on top.", tag: "Ranking" },
-          id: "1",
+        { id: "2", title: "PPC & Ad Campaigns", description: "Highly targeted Facebook, Instagram, and Google Ads management with precise audience segmentation.", tag: "Paid Growth" },
-          title: "SEO & SEM Strategy",
+        { id: "3", title: "Business Growth", description: "Full-stack marketing solutions, from landing page design to conversion rate optimization and analytics.", tag: "Full Cycle" }
-          description: "On-page/off-page auditing, backlink strategy, and keyword optimization to rank your business on top.",
-          tag: "Ranking",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-different-business-notes-notepad-dark-surface-business-job-teamwork-marketing-leadership-plan-strategy-work_179666-19757.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          title: "PPC & Ad Campaigns",
-          description: "Highly targeted Facebook, Instagram, and Google Ads management with precise audience segmentation.",
-          tag: "Paid Growth",
-          imageSrc: "http://img.b2bpic.net/free-photo/inbound-marketing-strategy-commerce-solution-concept_53876-120487.jpg?_wi=1",
-        },
-        {
-          id: "3",
-          title: "Business Growth",
-          description: "Full-stack marketing solutions, from landing page design to conversion rate optimization and analytics.",
-          tag: "Full Cycle",
-          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904313.jpg?_wi=1",
-        },
       ]}
       title="My Core Expertise"
       description="Comprehensive digital solutions tailored to elevate your brand identity and maximize conversions."
@@ -219,62 +87,6 @@ export default function LandingPage() {
       textboxLayout="split"
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          brand: "E-Commerce",
-          name: "Brand Growth Campaign (2024)",
-          price: "3x ROAS",
-          rating: 5,
-          reviewCount: "150+ conversions",
-          imageSrc: "http://img.b2bpic.net/free-photo/employee-holding-laptop-with-business-diagrams-company-office-management-presentation-diagrams-graphs-computer-screen-data-report-research-information-pc-close-up_482257-50104.jpg",
-        },
-        {
-          id: "p2",
-          brand: "Local SEO",
-          name: "SEO Audit Project (2025)",
-          price: "Page 4 to Page 1",
-          rating: 5,
-          reviewCount: "75% traffic increase",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-different-business-notes-notepad-dark-surface-business-job-teamwork-marketing-leadership-plan-strategy-work_179666-19757.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          brand: "Campaign",
-          name: "Social Media Growth",
-          price: "5,000+ Followers",
-          rating: 5,
-          reviewCount: "Consistent Strategy",
-          imageSrc: "http://img.b2bpic.net/free-photo/inbound-marketing-strategy-commerce-solution-concept_53876-120487.jpg?_wi=2",
-        },
-        {
-          id: "p4",
-          brand: "Digital",
-          name: "Mailchimp Email Seq",
-          price: "32% Open Rate",
-          rating: 5,
-          reviewCount: "Automated Flow",
-          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904313.jpg?_wi=2",
-        },
-        {
-          id: "p5",
-          brand: "Tech",
-          name: "Landing Page UX",
-          price: "Lower Bounce",
-          rating: 5,
-          reviewCount: "Speed Optimized",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-16001.jpg?_wi=2",
-        },
-        {
-          id: "p6",
-          brand: "SEO",
-          name: "Backlink Strategy",
-          price: "Domain Authority+",
-          rating: 5,
-          reviewCount: "Full Audit",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-different-business-notes-notepad-dark-surface-business-job-teamwork-marketing-leadership-plan-strategy-work_179666-19757.jpg?_wi=3",
-        },
-      ]}
       title="Key Client Successes"
       description="Measurable results delivered through data-driven campaigns and strategic implementation."
     />
@@ -283,9 +95,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "radial-gradient" }}
-        variant: "radial-gradient",
-      }}
       tag="Let's Connect"
       title="Ready to Grow Your Business?"
       description="Available for freelance projects & full-time opportunities. Let's work together to turn clicks into loyal customers."
@@ -295,36 +105,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Socials", items: [{ label: "LinkedIn", href: "https://www.linkedin.com/in/yasir-khan-expert/" }, { label: "Email", href: "mailto:yasirkhanofficial2500@gmail.com" }] },
-          title: "Socials",
+        { title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Projects", href: "#projects" }, { label: "Products", href: "/products" }] }
-          items: [
-            {
-              label: "LinkedIn",
-              href: "https://www.linkedin.com/in/yasir-khan-expert/",
-            },
-            {
-              label: "Email",
-              href: "mailto:yasirkhanofficial2500@gmail.com",
-            },
-          ],
-        },
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "About",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#services",
-            },
-            {
-              label: "Projects",
-              href: "#projects",
-            },
-          ],
-        },
       ]}
       logoText="Yasir Khan"
     />
@@ -332,4 +114,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSmall"
+        background="noiseDiagonalGradient"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="radial-glow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/#about" },
+            { name: "Services", id: "/#services" },
+            { name: "Projects", id: "/#projects" },
+            { name: "Products", id: "/products" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          brandName="Yasir Khan"
+        />
+        
+        <main className="pt-32 pb-20">
+            <ProductCatalog 
+                layout="page" 
+                products={[]}
+            />
+        </main>
+
+        <FooterBase
+          columns={[
+            { title: "Navigation", items: [
+                { label: "Home", href: "/" },
+                { label: "Products", href: "/products" }
+            ] }
+          ]}
+          logoText="Yasir Khan"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}