Merge version_4 into main #5
85
src/app/cart/page.tsx
Normal file
85
src/app/cart/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -38,6 +38,8 @@ export default function LandingPage() {
|
||||
name: "About Us", id: "/#about"},
|
||||
{
|
||||
name: "Shop", id: "/shop"},
|
||||
{
|
||||
name: "Cart", id: "/cart"},
|
||||
{
|
||||
name: "Testimonials", id: "/#testimonials"},
|
||||
{
|
||||
@@ -228,4 +230,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
99
src/app/shop/page.tsx
Normal file
99
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
"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}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user