Merge version_4 into main

Merge version_4 into main

src/app/account/order-tracking/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function OrderTrackingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Início",                id: "#hero"              },
+              {
+                name: "Shop",                id: "/shop"              },
+              {
+                name: "Carrinho",                id: "/cart"              },
+              {
+                name: "Conta",                id: "/account"              },
+              {
+                name: "Sobre",                id: "#sobre"              },
+              {
+                name: "FAQ",                id: "#faq"              },
+              {
+                name: "Contato",                id: "#contato"              }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+            logoAlt="Logo Vapes Kids"
+            brandName="Vapes Kids"
+            bottomLeftText="A Imaginação em Cada Puff"
+            bottomRightText="contato@vapeskids.com"
+          />
+        </div>
+        <div className="min-h-[calc(100vh-80px)] flex flex-col items-center justify-center p-8">
+          <h1 className="text-4xl font-bold text-foreground mb-4">Rastreamento de Pedidos</h1>
+          <p className="text-lg text-foreground">Aqui você pode ver o status dos seus pedidos.</p>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/account/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import Link from "next/link";
+
+export default function AccountPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Início",                id: "#hero"              },
+              {
+                name: "Shop",                id: "/shop"              },
+              {
+                name: "Carrinho",                id: "/cart"              },
+              {
+                name: "Conta",                id: "/account"              },
+              {
+                name: "Sobre",                id: "#sobre"              },
+              {
+                name: "FAQ",                id: "#faq"              },
+              {
+                name: "Contato",                id: "#contato"              }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+            logoAlt="Logo Vapes Kids"
+            brandName="Vapes Kids"
+            bottomLeftText="A Imaginação em Cada Puff"
+            bottomRightText="contato@vapeskids.com"
+          />
+        </div>
+        <div className="min-h-[calc(100vh-80px)] flex flex-col items-center justify-center p-8">
+          <h1 className="text-4xl font-bold text-foreground mb-4">Minha Conta</h1>
+          <Link href="/account/order-tracking" className="text-primary-cta hover:underline text-lg">
+            Ver Meus Pedidos
+          </Link>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Início",                id: "#hero"              },
+              {
+                name: "Shop",                id: "/shop"              },
+              {
+                name: "Carrinho",                id: "/cart"              },
+              {
+                name: "Conta",                id: "/account"              },
+              {
+                name: "Sobre",                id: "#sobre"              },
+              {
+                name: "FAQ",                id: "#faq"              },
+              {
+                name: "Contato",                id: "#contato"              }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+            logoAlt="Logo Vapes Kids"
+            brandName="Vapes Kids"
+            bottomLeftText="A Imaginação em Cada Puff"
+            bottomRightText="contato@vapeskids.com"
+          />
+        </div>
+        <div className="min-h-[calc(100vh-80px)] flex items-center justify-center p-8">
+          <h1 className="text-4xl font-bold text-foreground">Seu Carrinho de Compras</h1>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,9 +33,13 @@ export default function LandingPage() {
         {
           name: "Início",          id: "#hero"},
         {
-          name: "Sobre",          id: "#sobre"},
+          name: "Shop",          id: "/shop"},
         {
-          name: "Sabores",          id: "#sabores"},
+          name: "Carrinho",          id: "/cart"},
+        {
+          name: "Conta",          id: "/account"},
+        {
+          name: "Sobre",          id: "#sobre"},
         {
           name: "FAQ",          id: "#faq"},
         {
@@ -211,9 +215,11 @@ export default function LandingPage() {
             {
               label: "Início",              href: "#hero"},
             {
-              label: "Sobre",              href: "#sobre"},
+              label: "Shop",              href: "/shop"},
             {
-              label: "Sabores",              href: "#sabores"},
+              label: "Carrinho",              href: "/cart"},
+            {
+              label: "Conta",              href: "/account"},
           ],
         },
         {
@@ -241,4 +247,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/shop/[productId]/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React from "react";
+import ReactLenis from "lenis/react";
+import { useParams } from 'next/navigation';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+const allProducts = [
+  { id: "soda-cola", name: "Classic Cola", price: "$2.99", variant: "Soda", category: "Soda", imageSrc: "https://images.unsplash.com/photo-1596707328646-7c014798e217?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHNlYXJjaHwxfHxjb2xhJTIwYm90dGxlfGVufDB8fHx8MTcwMzgzMDU4MXww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Classic Cola bottle", description: "A timeless classic cola, perfectly carbonated for a refreshing experience." },
+  { id: "soda-orange", name: "Orange Fizz", price: "$2.99", variant: "Soda", category: "Soda", imageSrc: "https://images.unsplash.com/photo-1587884841777-a72120e2e96d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxvcmFuZ2UlMjBzb2RhJTIwYm90dGxlfGVufDB8fHx8MTcwMzgzMDU4MXww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Orange Fizz soda bottle", description: "Bright and bubbly orange soda with a zesty, sweet flavor that invigorates." },
+  { id: "juice-apple", name: "Apple Bliss Juice", price: "$3.49", variant: "Juice", category: "Juice", imageSrc: "https://images.unsplash.com/photo-1579603562638-51786576d1a9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHNlYXJjaHwxfHhhcHBsZSUyMGp1aWNlfGVufDB8fHx8MTcwMzgzMDU4Mnww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Apple juice bottle", description: "Pure, crisp apple juice, a delightful and healthy choice for any time of day." },
+  { id: "juice-grape", name: "Grape Delight Juice", price: "$3.49", variant: "Juice", category: "Juice", imageSrc: "https://images.unsplash.com/photo-1595180632512-dfa6ee7ee5e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxncmFwZSUyMGp1aWNlfGVufDB8fHx8MTcwMzgzMDU4Mnww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Grape juice bottle", description: "Sweet and tangy grape juice, made from the finest grapes for a rich taste." },
+  { id: "water-sparkling", name: "Sparkling Water", price: "$1.99", variant: "Water", category: "Water", imageSrc: "https://images.unsplash.com/photo-1558230283-a9a3f295b9b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxzcGFya2xpbmclMjB3YXRlcnxlbnwwfHx8fDE3MDM4MzA1ODJ8MA&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Sparkling water bottle", description: "Crisp and effervescent sparkling water, a refreshing alternative to still water." },
+  { id: "water-still", name: "Still Water", price: "$1.49", variant: "Water", category: "Water", imageSrc: "https://images.unsplash.com/photo-1582234057697-3932207b9a52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxzdGlsbCUyMHdhdGVyJTIwYm90dGxlfGVufDB8fHx8MTcwMzgzMDU4M3ww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Still water bottle", description: "Pure, natural still water, essential for hydration and everyday refreshment." },
+  { id: "tea-iced", name: "Iced Tea Peach", price: "$2.49", variant: "Tea", category: "Tea", imageSrc: "https://images.unsplash.com/photo-1596806509424-df3c513e9619?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxpY2VkJTIwdGVhJTIwcGVhY2h8ZW58MHx8fHwxNzAzODM2OTQ2fDA&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Iced tea bottle", description: "Chilled peach-flavored iced tea, sweet and soothing for a hot day." },
+  { id: "tea-green", name: "Green Tea Lemon", price: "$2.49", variant: "Tea", category: "Tea", imageSrc: "https://images.unsplash.com/photo-1622329249767-f311c6d860d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTUyMjl8MHwxfHxncmVlbiUyMHRlYSUyMGxlbW9ufGVufDB8fHx8MTcwMzgzNjk0N3ww&ixlib=rb-4.0.3&q=80&w=1080", imageAlt: "Green tea bottle", description: "Refreshing green tea with a hint of lemon, perfect for a gentle lift." }
+];
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const { productId } = params;
+
+  const product = allProducts.find(p => p.id === productId);
+
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+      >
+        <ReactLenis root>
+          <div id="nav" data-section="nav">
+            <NavbarStyleFullscreen
+              navItems={[
+                { name: "Início", id: "#hero" },
+                { name: "Sobre", id: "#sobre" },
+                { name: "Shop", id: "/shop" },
+                { name: "FAQ", id: "#faq" },
+                { name: "Contato", id: "#contato" },
+              ]}
+              logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+              logoAlt="Logo Vapes Kids"
+              brandName="Vapes Kids"
+              bottomLeftText="A Imaginação em Cada Puff"
+              bottomRightText="contato@vapeskids.com"
+            />
+          </div>
+          <div className="flex flex-col items-center justify-center min-h-screen-nav-footer">
+            <h1 className="text-4xl font-bold text-foreground">Produto não encontrado.</h1>
+            <p className="text-lg text-foreground-lighter mt-4">Por favor, retorne à <a href="/shop" className="text-primary-cta hover:underline">loja</a>.</p>
+          </div>
+          <div id="footer" data-section="footer">
+            <FooterBaseReveal
+              logoSrc="http://img.b2bpic.net/free-photo/abstract-background-with-colorful-puffs-smoke-generative-ai_169016-30156.jpg"
+              logoAlt="Logo Vapes Kids"
+              logoText="Vapes Kids"
+              columns={[
+                {
+                  title: "Navegação",                  items: [
+                    { label: "Início", href: "#hero" },
+                    { label: "Sobre", href: "#sobre" },
+                    { label: "Shop", href: "/shop" },
+                  ],
+                },
+                {
+                  title: "Suporte",                  items: [
+                    { label: "FAQ", href: "#faq" },
+                    { label: "Contato", href: "#contato" },
+                    { label: "Termos de Uso", href: "#" },
+                  ],
+                },
+                {
+                  title: "Legal",                  items: [
+                    { label: "Política de Privacidade", href: "#" },
+                    { label: "Isenção de Responsabilidade", href: "#" },
+                  ],
+                },
+              ]}
+              copyrightText="© 2024 Vapes Kids. Todos os direitos reservados. (Produto de brincar sem nicotina)"
+            />
+          </div>
+        </ReactLenis>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Início", id: "#hero" },
+              { name: "Sobre", id: "#sobre" },
+              { name: "Shop", id: "/shop" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Contato", id: "#contato" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+            logoAlt="Logo Vapes Kids"
+            brandName="Vapes Kids"
+            bottomLeftText="A Imaginação em Cada Puff"
+            bottomRightText="contato@vapeskids.com"
+          />
+        </div>
+
+        <div className="min-h-screen-nav-footer flex items-center justify-center p-4">
+          <ProductDetailCard
+            layout="page"
+            name={product.name}
+            price={product.price}
+            description={product.description}
+            images={[{ src: product.imageSrc, alt: product.imageAlt || product.name }]}
+            variants={[
+              {
+                label: "Size",                options: ["Small", "Medium", "Large"],
+                selected: "Medium",                onChange: (value) => console.log(`Selected size: ${value}`),
+              },
+            ]}
+            quantity={{
+              label: "Quantity",              options: ["1", "2", "3", "4", "5"],
+              selected: "1",              onChange: (value) => console.log(`Selected quantity: ${value}`),
+            }}
+            buttons={[
+              { text: "Add to Cart", onClick: () => console.log(`${product.name} added to cart`) },
+              { text: "Buy Now", href: "#" },
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoSrc="http://img.b2bpic.net/free-photo/abstract-background-with-colorful-puffs-smoke-generative-ai_169016-30156.jpg"
+            logoAlt="Logo Vapes Kids"
+            logoText="Vapes Kids"
+            columns={[
+              {
+                title: "Navegação",                items: [
+                  { label: "Início", href: "#hero" },
+                  { label: "Sobre", href: "#sobre" },
+                  { label: "Shop", href: "/shop" },
+                ],
+              },
+              {
+                title: "Suporte",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Contato", href: "#contato" },
+                  { label: "Termos de Uso", href: "#" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Política de Privacidade", href: "#" },
+                  { label: "Isenção de Responsabilidade", href: "#" },
+                ],
+              },
+            ]}
+            copyrightText="© 2024 Vapes Kids. Todos os direitos reservados. (Produto de brincar sem nicotina)"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function ShopPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLarge"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Início",                id: "#hero"              },
+              {
+                name: "Shop",                id: "/shop"              },
+              {
+                name: "Carrinho",                id: "/cart"              },
+              {
+                name: "Conta",                id: "/account"              },
+              {
+                name: "Sobre",                id: "#sobre"              },
+              {
+                name: "FAQ",                id: "#faq"              },
+              {
+                name: "Contato",                id: "#contato"              }
+            ]}
+            logoSrc="http://img.b2bpic.net/free-photo/blue-smoke-waves-black-background_23-2148211027.jpg"
+            logoAlt="Logo Vapes Kids"
+            brandName="Vapes Kids"
+            bottomLeftText="A Imaginação em Cada Puff"
+            bottomRightText="contato@vapeskids.com"
+          />
+        </div>
+        <div className="min-h-[calc(100vh-80px)] flex items-center justify-center p-8">
+          <h1 className="text-4xl font-bold text-foreground">Nossa Loja</h1>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}