Update src/app/shop/page.tsx

Merge version_3 into main

src/app/cart/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
+import Link from 'next/link';
+
+export default function CartPage() {
+  const updatedNavItems = [
+    { name: "Home", id: "/#hero" },
+    { name: "About Us", id: "/#about" },
+    { name: "Shop", id: "/shop" },
+    { name: "Cart", id: "/cart" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="medium"
+      background="floatingGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={updatedNavItems}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo-placeholder.png"
+            logoAlt="Techy Tamiami Logo"
+            brandName="Techy Tamiami"
+          />
+        </div>
+
+        <div id="cart-content" className="container mx-auto py-16 px-4 min-h-[60vh]">
+          <h1 className="text-4xl font-bold mb-8 text-center">Your Shopping Cart</h1>
+          <div className="bg-card p-8 rounded-lg shadow-lg max-w-2xl mx-auto">
+            <p className="text-foreground/80 text-center mb-6">Your cart is currently empty. Visit our <Link href="/shop" className="text-primary-cta hover:underline">shop</Link> to add items!</p>
+            {/* Placeholder for actual cart items */}
+            {/* Example: */}
+            {/* <div className="flex justify-between items-center py-4 border-b border-border"> */}
+            {/*   <h2 className="text-lg font-semibold">Product Name</h2> */}
+            {/*   <p className="text-md">$XX.XX</p> */}
+            {/* </div> */}
+            {/* <div className="text-right mt-6"> */}
+            {/*   <p className="text-xl font-bold mb-4">Total: $XX.XX</p> */}
+            {/*   <Link href="/checkout" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 bg-primary-cta text-primary-cta-foreground shadow hover:bg-primary-cta/90"> */}
+            {/*     Proceed to Checkout */}
+            {/*   </Link> */}
+            {/* </div> */}
+          </div>
+          <div className="text-center mt-8">
+            <Link href="/shop" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 bg-secondary-cta text-secondary-cta-foreground shadow hover:bg-secondary-cta/90">
+                Continue Shopping
+            </Link>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780503847637-w07zok86.png"
+            logoAlt="Techy Tamiami Logo"
+            logoText="Techy Tamiami"
+            copyrightText="© 2024 Techy Tamiami. All rights reserved."
+            socialLinks={[
+              { icon: Facebook, href: "https://facebook.com/techytamiami", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "https://instagram.com/techytamiami", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "https://twitter.com/techytamiami", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "https://linkedin.com/company/techytamiami", ariaLabel: "LinkedIn" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,20 +33,22 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",          id: "#hero"},
+          name: "Home",          id: "/#hero"},
         {
-          name: "About Us",          id: "#about"},
+          name: "About Us",          id: "/#about"},
         {
           name: "Shop",          id: "/shop"},
         {
-          name: "Testimonials",          id: "#testimonials"},
+          name: "Cart",          id: "/cart"},
         {
-          name: "FAQ",          id: "#faq"},
+          name: "Testimonials",          id: "/#testimonials"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "FAQ",          id: "/#faq"},
+        {
+          name: "Contact",          id: "/#contact"}
       ]}
       logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo-placeholder.png"
-      logoAlt="Business Logo"
+      logoAlt="Techy Tamiami Logo"
       brandName="Techy Tamiami"
     />
   </div>
@@ -59,9 +61,9 @@ export default function LandingPage() {
       description="Techy Tamiami provides swift, reliable, and professional repair services for phones, laptops, tablets, and more. Get your tech working like new again."
       buttons={[
         {
-          text: "Get a Free Quote",          href: "#contact"},
+          text: "Get a Free Quote",          href: "/#contact"},
         {
-          text: "View Services",          href: "/shop"},
+          text: "View Services",          href: "/shop"}
       ]}
       avatars={[
         {
@@ -73,7 +75,7 @@ export default function LandingPage() {
         {
           src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg",          alt: "Customer 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-dancer_107420-63943.jpg",          alt: "Satisfied Customer 5"},
+          src: "http://img.b2bpic.net/free-photo/portrait-smiling-dancer_107420-63943.jpg",          alt: "Satisfied Customer 5"}
       ]}
       avatarText="Trusted by 500+ happy customers"
       imageSrc="http://img.b2bpic.net/free-photo/miniature-workers-working-chip-motherboard_1252-830.jpg"
@@ -88,7 +90,7 @@ export default function LandingPage() {
         {
           type: "text",          text: "90-Day Warranty"},
         {
-          type: "text",          text: "Customer Satisfaction"},
+          type: "text",          text: "Customer Satisfaction"}
       ]}
     />
   </div>
@@ -104,7 +106,7 @@ export default function LandingPage() {
         {
           value: "98%",          title: "Repair Success"},
         {
-          value: "24 Hr",          title: "Turnaround"},
+          value: "24 Hr",          title: "Turnaround"}
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/repairman-using-tweezers-hold-electronic-components-printed-circuit-board-while-repairing-mobile-phone-microscope_343059-496.jpg"
       imageAlt="Technician's hands repairing a smartphone"
@@ -127,7 +129,7 @@ export default function LandingPage() {
         {
           title: "Tablet Battery Replacement",          description: "Extend the life of your tablet with a new, high-performance battery replacement.",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-storage-device-laptop_23-2149319341.jpg",          imageAlt: "Tablet battery being replaced"},
         {
-          title: "Gaming Console HDMI Repair",          description: "Get your gaming back on track with professional HDMI port repair for all major consoles.",          imageSrc: "http://img.b2bpic.net/free-photo/person-placing-cassette-tape-vintage-player_23-2148289127.jpg",          imageAlt: "Gaming console with glowing HDMI port"},
+          title: "Gaming Console HDMI Repair",          description: "Get your gaming back on track with professional HDMI port repair for all major consoles.",          imageSrc: "http://img.b2bpic.net/free-photo/person-placing-cassette-tape-vintage-player_23-2148289127.jpg",          imageAlt: "Gaming console with glowing HDMI port"}
       ]}
       title="Comprehensive Repair Services"
       description="From shattered screens to software glitches, our certified technicians handle a wide range of electronic issues with precision and care."
@@ -150,7 +152,7 @@ export default function LandingPage() {
         {
           id: "4",          name: "David L.",          date: "2024-02-10",          title: "Data Recovery Success!",          quote: "Thought my old hard drive was completely gone, but Techy Tamiami managed to recover all my important files. Couldn't be happier.",          tag: "Data Recovery",          avatarSrc: "http://img.b2bpic.net/free-photo/young-girl-white-t-shirt-hat-standing-with-crossed-arms-looking-confident-front-view_176474-39366.jpg",          avatarAlt: "David L. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/group-four-south-asian-men-s-posed-business-meeting-cafe-indians-having-conversation_627829-5246.jpg",          imageAlt: "Cafe background"},
         {
-          id: "5",          name: "Jessica M.",          date: "2024-01-28",          title: "Best Console Repair in Town",          quote: "My gaming console's HDMI port was broken. They fixed it fast, and now I'm back to gaming in high definition!",          tag: "Console Repair",          avatarSrc: "http://img.b2bpic.net/free-photo/bearded-grey-haired-elderly-man-wearing-formal-suit_273609-5596.jpg",          avatarAlt: "Jessica M. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/medical-tubes-blue-background_23-2148958403.jpg",          imageAlt: "Laboratory background"},
+          id: "5",          name: "Jessica M.",          date: "2024-01-28",          title: "Best Console Repair in Town",          quote: "My gaming console's HDMI port was broken. They fixed it fast, and now I'm back to gaming in high definition!",          tag: "Console Repair",          avatarSrc: "http://img.b2bpic.net/free-photo/bearded-grey-haired-elderly-man-wearing-formal-suit_273609-5596.jpg",          avatarAlt: "Jessica M. avatar",          imageSrc: "http://img.b2bpic.net/free-photo/medical-tubes-blue-background_23-2148958403.jpg",          imageAlt: "Laboratory background"}
       ]}
       title="What Our Customers Say"
       description="Hear from satisfied clients who chose Techy Tamiami for their electronic repair needs."
@@ -180,7 +182,7 @@ export default function LandingPage() {
         {
           id: "faq-3",          title: "Do you offer a warranty on your repairs?",          content: "Yes, all our repairs come with a standard 90-day warranty on parts and labor, giving you peace of mind that your device is in good hands."},
         {
-          id: "faq-4",          title: "Can I get a quote before bringing in my device?",          content: "Absolutely! You can contact us via phone or email with details about your device and the issue, and we'll provide a free, no-obligation estimate. For complex issues, an in-person diagnostic might be required."},
+          id: "faq-4",          title: "Can I get a quote before bringing in my device?",          content: "Absolutely! You can contact us via phone or email with details about your device and the issue, and we'll provide a free, no-obligation estimate. For complex issues, an in-person diagnostic might be required."}
       ]}
       title="Frequently Asked Questions"
       description="Find quick answers to common questions about our repair process, warranties, and services."
@@ -198,15 +200,15 @@ export default function LandingPage() {
         {
           text: "Call Now: (941) 555-0123",          href: "tel:+19415550123"},
         {
-          text: "Email Us",          href: "mailto:info@techytamiami.com"},
+          text: "Email Us",          href: "mailto:info@techytamiami.com"}
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterCard
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo-placeholder.png"
+      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780503847637-w07zok86.png"
-      logoAlt="Business Logo"
+      logoAlt="Techy Tamiami Logo"
       logoText="Techy Tamiami"
       copyrightText="© 2024 Techy Tamiami. All rights reserved."
       socialLinks={[
@@ -221,7 +223,7 @@ export default function LandingPage() {
           href: "https://twitter.com/techytamiami",          ariaLabel: "Twitter"},
         {
           icon: Linkedin,
-          href: "https://linkedin.com/company/techytamiami",          ariaLabel: "LinkedIn"},
+          href: "https://linkedin.com/company/techytamiami",          ariaLabel: "LinkedIn"}
       ]}
     />
   </div>

src/app/shop/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
+
+export default function ShopPage() {
+  const products = [
+    {
+      id: "1",      name: "Smartphone Screen Repair",      price: "$99.99",      variant: "Standard",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780504028868-qsj0vu76.jpg",      imageAlt: "Phone screen repair",      rating: 4.5,
+      reviewCount: "120"
+    },
+    {
+      id: "2",      name: "Laptop Diagnostic",      price: "$49.00",      variant: "Initial Fee",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780504028868-b9iqmtgo.jpg",      imageAlt: "Laptop diagnostic",      rating: 4.8,
+      reviewCount: "85"
+    },
+    {
+      id: "3",      name: "Tablet Battery Replacement",      price: "$79.99",      variant: "Premium",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780504028868-pa088lxv.jpg",      imageAlt: "Tablet battery replacement",      rating: 4.2,
+      reviewCount: "60"
+    },
+    {
+      id: "4",      name: "Gaming Console HDMI Fix",      price: "$129.99",      variant: "Advanced",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780504028868-diq7d7sn.jpg",      imageAlt: "Gaming console HDMI repair",      rating: 4.7,
+      reviewCount: "95"
+    },
+    {
+      id: "5",      name: "Data Recovery Service",      price: "Starting at $150",      variant: "Complex",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780504028868-dznb26s4.jpg",      imageAlt: "Data recovery service",      rating: 4.9,
+      reviewCount: "45"
+    },
+    {
+      id: "6",      name: "Protective Phone Case",      price: "$25.00",      variant: "Accessory",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/default_image.jpg",      imageAlt: "Protective phone case",      rating: 4.0,
+      reviewCount: "200"
+    }
+  ];
+
+  const updatedNavItems = [
+    { name: "Home", id: "/#hero" },
+    { name: "About Us", id: "/#about" },
+    { name: "Shop", id: "/shop" },
+    { name: "Cart", id: "/cart" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQ", id: "/#faq" },
+    { name: "Contact", id: "/#contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="medium"
+      background="floatingGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={updatedNavItems}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo-placeholder.png"
+            logoAlt="Techy Tamiami Logo"
+            brandName="Techy Tamiami"
+          />
+        </div>
+
+        <div id="shop-products" data-section="shop-products">
+          <ProductCardFour
+            title="Our Services & Products"
+            description="Explore our range of expert repair services and high-quality accessories."
+            products={products}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            textboxLayout="default"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EdGtL5EJ2VFkceq2NeCE7dtSEz/uploaded-1780503847637-w07zok86.png"
+            logoAlt="Techy Tamiami Logo"
+            logoText="Techy Tamiami"
+            copyrightText="© 2024 Techy Tamiami. All rights reserved."
+            socialLinks={[
+              { icon: Facebook, href: "https://facebook.com/techytamiami", ariaLabel: "Facebook" },
+              { icon: Instagram, href: "https://instagram.com/techytamiami", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "https://twitter.com/techytamiami", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "https://linkedin.com/company/techytamiami", ariaLabel: "LinkedIn" }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #000000;
   --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #000000;
   --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
   --accent: #535353;
-  --background-accent: #CEE7FF;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/lib/dummyProducts.ts

@@ -0,0 +1,79 @@
+import { ImagePlus } from "lucide-react";
+import React from "react";
+
+export const dummyProducts = [
+  {
+    id: '1',
+    brand: 'TechGadget',
+    name: 'Smartphone Screen Repair Kit',
+    price: '$49.99',
+    rating: 4.5,
+    reviewCount: '120 reviews',
+    imageSrc: 'http://img.b2bpic.net/free-photo/flat-lay-broken-screen-smartphone-accessories_23-2148401306.jpg?_wi=1',
+    imageAlt: 'Smartphone screen repair kit',
+    description: 'DIY kit for repairing common smartphone screen cracks. Includes tools and replacement glass for most popular models.',
+  },
+  {
+    id: '2',
+    brand: 'LaptopCare',
+    name: 'High-Performance Laptop Battery',
+    price: '$89.99',
+    rating: 4.8,
+    reviewCount: '85 reviews',
+    imageSrc: 'http://img.b2bpic.net/free-photo/broken-laptop-repair-tools-table_343059-548.jpg',
+    imageAlt: 'High-performance laptop battery',
+    description: 'Long-lasting replacement battery for various laptop brands. Enjoy extended usage and reliable power.',
+  },
+  {
+    id: '3',
+    brand: 'TabletFix',
+    name: 'Universal Tablet Charging Port',
+    price: '$29.99',
+    rating: 4.2,
+    reviewCount: '50 reviews',
+    imageSrc: 'http://img.b2bpic.net/free-photo/computer-repair-engineer-working-pc_177995-1565.jpg?_wi=1',
+    imageAlt: 'Universal tablet charging port',
+    description: 'Replace your faulty charging port with this universal solution. Compatible with most tablet models.',
+  },
+  {
+    id: '4',
+    brand: 'GamerGear',
+    name: 'Gaming Console HDMI Port',
+    price: '$59.99',
+    rating: 4.6,
+    reviewCount: '95 reviews',
+    imageSrc: 'http://img.b2bpic.net/free-photo/gamepad-gaming-headset-blue-background_23-2148281358.jpg',
+    imageAlt: 'Gaming console HDMI port',
+    description: 'High-quality HDMI port replacement for popular gaming consoles. Restore your crisp visuals and audio.',
+  },
+  {
+    id: '5',
+    brand: 'DataSecure',
+    name: 'External SSD Data Recovery Service',
+    price: '$199.99',
+    rating: 4.9,
+    reviewCount: '70 reviews',
+    imageSrc: 'http://img.b2bpic.net/free-photo/hard-disk-drive-inside_1252-817.jpg',
+    imageAlt: 'External SSD for data recovery',
+    description: 'Professional data recovery for external SSDs. We can retrieve lost or corrupted files from damaged drives.',
+  },
+];
+
+export const dummyCartItems = [
+  {
+    id: '1',
+    name: 'Smartphone Screen Repair Kit',
+    price: '$49.99',
+    quantity: 1,
+    imageSrc: 'http://img.b2bpic.net/free-photo/flat-lay-broken-screen-smartphone-accessories_23-2148401306.jpg?_wi=2',
+    imageAlt: 'Smartphone screen repair kit',
+  },
+  {
+    id: '3',
+    name: 'Universal Tablet Charging Port',
+    price: '$29.99',
+    quantity: 2,
+    imageSrc: 'http://img.b2bpic.net/free-photo/computer-repair-engineer-working-pc_177995-1565.jpg?_wi=2',
+    imageAlt: 'Universal tablet charging port',
+  },
+];