Switch to version 3: modified src/app/shop/page.tsx
This commit is contained in:
@@ -3,111 +3,115 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "1", name: "AI Assistant Pro", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/blue-glowing-artificial-intelligence-brain-background_53876-135832.jpg", imageAlt: "AI Assistant Pro software icon"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Smart Scheduler Watch", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg", imageAlt: "Smartwatch displaying a calendar"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Productivity Boost E-book", price: "$9.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-desk-with-book-glasses_23-2148455806.jpg", imageAlt: "E-book on a desk"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Team Collaboration Hub", price: "$99.99", imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-working-office_23-2149307049.jpg", imageAlt: "Team collaborating on a large screen"
|
||||
},
|
||||
{
|
||||
id: "5", name: "AI Planner Extended License", price: "$249.99", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-office-work-station_23-2150190561.jpg", imageAlt: "Futuristic office workspace"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Data Analytics Module", price: "$149.99", imageSrc: "http://img.b2bpic.net/free-photo/business-graph-with-upward-arrow_1134-43.jpg", imageAlt: "Data analytics dashboard"
|
||||
}
|
||||
];
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="fluid"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="AI Planner Pro"
|
||||
/>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "#home"},
|
||||
{
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{
|
||||
name: "Shop", id: "/shop"},
|
||||
{
|
||||
name: "Cart", id: "/cart"}
|
||||
]}
|
||||
brandName="AI Planner Pro"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop-products" data-section="shop-products">
|
||||
<ProductCardOne
|
||||
title="Our Products"
|
||||
description="Discover our range of AI-powered planning tools."
|
||||
products={[
|
||||
{
|
||||
onProductClick: () => console.log('Product 1 clicked'),
|
||||
id: 'prod1',
|
||||
name: 'AI Planner Pro Basic',
|
||||
price: '$19.99',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg',
|
||||
imageAlt: 'AI Planner Pro Basic',
|
||||
},
|
||||
{
|
||||
onProductClick: () => console.log('Product 2 clicked'),
|
||||
id: 'prod2',
|
||||
name: 'AI Planner Pro Advanced',
|
||||
price: '$49.99',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/retro-flip-clock-off-white-background_53876-105924.jpg',
|
||||
imageAlt: 'AI Planner Pro Advanced',
|
||||
},
|
||||
{
|
||||
onProductClick: () => console.log('Product 3 clicked'),
|
||||
id: 'prod3',
|
||||
name: 'AI Planner Pro Ultimate',
|
||||
price: '$99.99',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/group-diverse-people-working-office_23-2149307049.jpg?_wi=1',
|
||||
imageAlt: 'AI Planner Pro Ultimate',
|
||||
},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="shop-products" data-section="shop-products" className="py-20 min-h-screen">
|
||||
<ProductCardOne
|
||||
title="Our Products"
|
||||
description="Discover intelligent tools and resources to boost your productivity."
|
||||
products={products.map(product => ({
|
||||
...product,
|
||||
onProductClick: () => window.location.href = `/shop/${product.id}`
|
||||
}))}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
<FooterBaseCard
|
||||
logoText="AI Planner Pro"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Features", href: "/"},
|
||||
{
|
||||
label: "Pricing", href: "/"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "/"},
|
||||
{
|
||||
label: "Testimonials", href: "/"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "FAQ", href: "/"},
|
||||
{
|
||||
label: "Contact Us", href: "/"}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect With Us", items: [
|
||||
{ label: "Facebook", href: "https://facebook.com/aiplannerpro" },
|
||||
{ label: "Twitter", href: "https://twitter.com/aiplannerpro" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com/company/aiplannerpro" },
|
||||
{ label: "Instagram", href: "https://instagram.com/aiplannerpro" }
|
||||
]
|
||||
}
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#features"},
|
||||
{ label: "Pricing", href: "#pricing"},
|
||||
{ label: "Integrations", href: "#"},
|
||||
{ label: "Shop", href: "/shop"}
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about"},
|
||||
{ label: "Testimonials", href: "#testimonials"},
|
||||
{ label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#faq"},
|
||||
{ label: "Contact Us", href: "#contact"},
|
||||
{ label: "Help Center", href: "#"},
|
||||
{ label: "Cart", href: "/cart"}
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 AI Planner Pro. All rights reserved."
|
||||
copyrightText="© 2024 AI Planner Pro. All rights reserved."
|
||||
onPrivacyClick={() => console.log('Privacy Policy clicked')}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user