Add src/app/shop/page.tsx
This commit is contained in:
159
src/app/shop/page.tsx
Normal file
159
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { ShoppingBag, Zap, Headphones } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPods"
|
||||
navItems={[
|
||||
{ name: "Products", id: "/shop" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Why AirPods", id: "metrics" },
|
||||
{ name: "Support", id: "faq" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
button={{ text: "Home", href: "/" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Our Complete Product Lineup"
|
||||
description="Explore PodsX Pro and PodsX 4 models with cutting-edge technology, premium build quality, and exceptional sound. Each model is engineered for excellence and designed to elevate your audio experience."
|
||||
background={{ variant: "noise" }}
|
||||
kpis={[
|
||||
{ value: "2", label: "Premium Models" },
|
||||
{ value: "4K+", label: "5-Star Reviews" },
|
||||
{ value: "99%", label: "Customer Satisfaction" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="Shop Now"
|
||||
tagIcon={ShoppingBag}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Browse Products", href: "#products" },
|
||||
{ text: "Compare Models", href: "#products" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/a-sleek-premium-product-shot-of-airpods--1772884352155-5b47d23f.png"
|
||||
imageAlt="Premium audio products showcase"
|
||||
mediaAnimation="blur-reveal"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
title="PodsX Pro & PodsX 4 Collection"
|
||||
description="Discover our flagship models featuring premium specifications, floating effect animations, and exceptional build quality. Each product is meticulously crafted for the discerning audiophile."
|
||||
tag="Premium Audio"
|
||||
tagIcon={ShoppingBag}
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "podsx-pro-max", name: "PodsX Pro Max", price: "$399", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-max-over-ear-headphones-displaye-1772884352294-e666eff4.png", imageAlt: "PodsX Pro Max - Premium over-ear headphones with floating effect", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "podsx-pro", name: "PodsX Pro", price: "$299", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/high-quality-product-photography-of-airp-1772884351466-337fed24.png", imageAlt: "PodsX Pro - Premium earbuds with active noise cancellation", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "podsx-4", name: "PodsX 4", price: "$199", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/airpods-2nd-generation-with-charging-cas-1772884351239-d2c575a8.png", imageAlt: "PodsX 4 - Advanced model with premium sound quality", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "podsx-pro-lite", name: "PodsX Pro Lite", price: "$249", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/abstract-visualization-of-active-noise-c-1772884352205-cdd837a4.png", imageAlt: "PodsX Pro Lite - Compact premium audio solution", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "podsx-4-standard", name: "PodsX 4 Standard", price: "$179", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/spatial-audio-visualization-showing-3d-s-1772884352783-6a2daab8.png", imageAlt: "PodsX 4 Standard - Reliable daily audio companion", initialQuantity: 1,
|
||||
},
|
||||
{
|
||||
id: "podsx-pro-ultra", name: "PodsX Pro Ultra", price: "$449", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcG4WbdmgnoUEgMn6GlqKFPyhF/apple-ecosystem-integration-showing-ipho-1772884352656-6d2f7cb3.png", imageAlt: "PodsX Pro Ultra - Flagship model with cutting-edge technology", initialQuantity: 1,
|
||||
},
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Special Offer"
|
||||
tagIcon={Headphones}
|
||||
tagAnimation="slide-up"
|
||||
title="Secure Your Premium Audio Experience"
|
||||
description="Order now and receive premium packaging with floating effect presentation, extended warranty, and exclusive accessory bundle. Free shipping on all orders. Experience the difference premium audio makes."
|
||||
buttons={[
|
||||
{ text: "Complete Purchase", href: "#products" },
|
||||
{ text: "View Details", href: "#products" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "noise" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "PodsX Pro Max", href: "#products" },
|
||||
{ label: "PodsX Pro", href: "#products" },
|
||||
{ label: "PodsX 4", href: "#products" },
|
||||
{ label: "All Products", href: "#products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Shop", items: [
|
||||
{ label: "New Arrivals", href: "#products" },
|
||||
{ label: "Best Sellers", href: "#products" },
|
||||
{ label: "Bundle Deals", href: "#products" },
|
||||
{ label: "Gift Cards", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Product Guide", href: "#" },
|
||||
{ label: "Specifications", href: "#" },
|
||||
{ label: "Warranty", href: "#" },
|
||||
{ label: "Contact Us", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 PodsX. All rights reserved."
|
||||
bottomRightText="Premium Audio Excellence"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user