Update src/app/visual-search/page.tsx

Merge version_2 into main

src/app/design-canvas/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import { Move3d, ArrowRight } from "lucide-react";
+
+export default function DesignCanvasPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="largeSmall"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="DesignLens"
+          navItems={[
+            { name: "Features", id: "#features" },
+            { name: "Products", id: "#products" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Contact", id: "#contact" },
+            { name: "Start Designing", id: "https://app.designlens.io" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="Interactive Design Canvas"
+          description="Position your logos on any garment template with precise controls. Rotate, scale, and preview your designs in real-time before moving to supplier matching."
+          tag="Design Tools"
+          tagIcon={Move3d}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/an-interactive-canvas-showing-a-white-t--1772801642764-d0d6cce3.png?_wi=2"
+          imageAlt="Interactive canvas for logo placement"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={false}
+          buttons={[
+            { text: "Start Designing", href: "https://app.designlens.io" },
+            { text: "Back to Home", href: "/" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -66,12 +66,12 @@ export default function LandingPage() {
               buttonHref: "#products"
             },
             {
-              title: "Interactive Canvas Placement",              description: "Position logos on any garment template with precise controls. Rotate, scale, and preview in real-time",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/an-interactive-canvas-showing-a-white-t--1772801642764-d0d6cce3.png",              imageAlt: "Canvas logo placement tool",              buttonIcon: Move3d,
+              title: "Interactive Canvas Placement",              description: "Position logos on any garment template with precise controls. Rotate, scale, and preview in real-time",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/an-interactive-canvas-showing-a-white-t--1772801642764-d0d6cce3.png?_wi=1",              imageAlt: "Canvas logo placement tool",              buttonIcon: Move3d,
-              buttonHref: "#products"
+              buttonHref: "/design-canvas"
             },
             {
-              title: "AI Visual Search",              description: "Scan your design and instantly match with real suppliers. 2-second matching powered by Google Lens",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/a-visual-search-animation-with-a-2-secon-1772801642749-42d73384.png",              imageAlt: "Visual search scanning animation",              buttonIcon: Zap,
+              title: "AI Visual Search",              description: "Scan your design and instantly match with real suppliers. 2-second matching powered by Google Lens",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/a-visual-search-animation-with-a-2-secon-1772801642749-42d73384.png?_wi=1",              imageAlt: "Visual search scanning animation",              buttonIcon: Zap,
-              buttonHref: "#products"
+              buttonHref: "/visual-search"
             },
             {
               title: "Supplier Discovery",              description: "Browse matching products from vetted suppliers worldwide. Compare prices and quality in seconds",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/a-bottom-sheet-product-grid-showing-6-8--1772801643125-e215bede.png?_wi=1",              imageAlt: "Product grid showing supplier matches",              buttonIcon: ShoppingCart,

src/app/visual-search/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import { Zap, ArrowRight } from "lucide-react";
+
+export default function VisualSearchPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="largeSmall"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="DesignLens"
+          navItems={[
+            { name: "Features", id: "#features" },
+            { name: "Products", id: "#products" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Contact", id: "#contact" },
+            { name: "Start Designing", id: "https://app.designlens.io" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroOverlay
+          title="AI Visual Search Lookup"
+          description="Scan your design and instantly match with real suppliers. Our AI-powered visual search powered by Google Lens identifies matching products in just 2 seconds."
+          tag="Search Technology"
+          tagIcon={Zap}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZYNcpRFV3V44D4fPITDL3yqoO/a-visual-search-animation-with-a-2-secon-1772801642749-42d73384.png?_wi=2"
+          imageAlt="Visual search scanning animation"
+          textPosition="bottom-left"
+          showBlur={true}
+          showDimOverlay={false}
+          buttons={[
+            { text: "Start Searching", href: "https://app.designlens.io" },
+            { text: "Back to Home", href: "/" },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}