Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
211
src/app/bundles/page.tsx
Normal file
211
src/app/bundles/page.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { NavbarStyleApple } from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import { HeroBillboardTestimonial } from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import { FeatureCardTwentyEight } from "@/components/sections/feature/FeatureCardTwentyEight";
|
||||
import { ProductCardOne } from "@/components/sections/product/ProductCardOne";
|
||||
import { PricingCardEight } from "@/components/sections/pricing/PricingCardEight";
|
||||
import { TestimonialCardTen } from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import { FaqBase } from "@/components/sections/faq/FaqBase";
|
||||
import { ContactCenter } from "@/components/sections/contact/ContactCenter";
|
||||
import { FooterSimple } from "@/components/sections/footer/FooterSimple";
|
||||
import { Star } from "lucide-react";
|
||||
|
||||
export default function BundlesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/components" },
|
||||
{ name: "Bundles", id: "/bundles" },
|
||||
{ name: "Promotions", id: "/promotions" }
|
||||
]}
|
||||
brandName="Bundles & Kits"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Unlock Value with Our Exclusive Bundles"
|
||||
description="Discover curated product packages designed to give you more for less. Boost your productivity, creativity, and savings today!"
|
||||
background={{ variant: "radial-gradient" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Jane Doe", handle: "@janedoe", testimonial: "The productivity bundle transformed my workflow! Highly recommend.", rating: 5,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "John Smith", handle: "@johnsmith", testimonial: "Great value, fantastic products. My go-to for software needs.", rating: 5,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore Bundles", href: "#products" },
|
||||
{ text: "Contact Sales", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/1024x768/0000FF/FFFFFF?text=Bundle+Offer?_wi=1"
|
||||
imageAlt="Product bundles illustration"
|
||||
mediaAnimation="opacity"
|
||||
tag="New"
|
||||
tagIcon={Star}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
title="Why Choose Our Bundles?"
|
||||
description="Each bundle is thoughtfully assembled to provide maximum benefit and unbeatable value."
|
||||
features={[
|
||||
{ id: "1", title: "Cost Savings", subtitle: "Save more when you buy together.", category: "Value", value: "Up to 30% Off" },
|
||||
{ id: "2", title: "Convenience", subtitle: "All essentials in one purchase.", category: "Efficiency", value: "Hassle-Free" },
|
||||
{ id: "3", title: "Enhanced Experience", subtitle: "Complementary products for best results.", category: "Quality", value: "Seamless Integration" },
|
||||
{ id: "4", title: "Exclusive Access", subtitle: "Get features only available in bundles.", category: "Premium", value: "Unique Content" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Benefits"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Featured Product Bundles"
|
||||
description="Browse our most popular product combinations."
|
||||
products={[
|
||||
{
|
||||
id: "bundle-1", name: "Creator's Starter Kit", price: "$199", imageSrc: "https://via.placeholder.com/400x300/FF0000/FFFFFF?text=Creator+Bundle?_wi=1", imageAlt: "Creator's Starter Kit"
|
||||
},
|
||||
{
|
||||
id: "bundle-2", name: "Developer's Essential Pack", price: "$249", imageSrc: "https://via.placeholder.com/400x300/00FF00/FFFFFF?text=Developer+Bundle?_wi=1", imageAlt: "Developer's Essential Pack"
|
||||
},
|
||||
{
|
||||
id: "bundle-3", name: "Designer's Pro Toolbox", price: "$179", imageSrc: "https://via.placeholder.com/400x300/0000FF/FFFFFF?text=Designer+Bundle?_wi=1", imageAlt: "Designer's Pro Toolbox"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
tag="Popular"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Simple & Flexible Bundle Pricing"
|
||||
description="Choose the plan that best fits your needs and budget."
|
||||
plans={[
|
||||
{
|
||||
id: "basic-bundle", badge: "Starter", price: "$99/month", subtitle: "For individuals and small teams.", buttons: [{ text: "Get Started", href: "#contact" }],
|
||||
features: ["2 Products", "Basic Support", "Community Access"]
|
||||
},
|
||||
{
|
||||
id: "pro-bundle", badge: "Pro", badgeIcon: Star,
|
||||
price: "$249/month", subtitle: "Designed for growing businesses.", buttons: [{ text: "Choose Pro", href: "#contact" }],
|
||||
features: ["5 Products", "Priority Support", "Advanced Analytics"]
|
||||
},
|
||||
{
|
||||
id: "enterprise-bundle", badge: "Enterprise", price: "Custom", subtitle: "Tailored for large organizations.", buttons: [{ text: "Contact Us", href: "#contact" }],
|
||||
features: ["Unlimited Products", "Dedicated Account Manager", "Custom Integrations"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Plans"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="What Our Customers Say"
|
||||
description="Hear from satisfied customers who've experienced the power of our bundles."
|
||||
testimonials={[
|
||||
{
|
||||
id: "test-1", title: "Exceptional Value!", quote: "The marketing bundle saved us so much time and money. Our campaigns are more effective than ever!", name: "Sarah Chen", role: "Marketing Director", imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
id: "test-2", title: "Game Changer", quote: "Never thought I could get such a comprehensive set of tools at this price. Absolutely fantastic!", name: "Mark Davis", role: "Small Business Owner", imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
id: "test-3", title: "Highly Recommended", quote: "The support is great, and the products work perfectly together. My team loves it.", name: "Emily White", role: "Team Lead", imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
tag="Reviews"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our product bundles."
|
||||
faqs={[
|
||||
{ id: "q1", title: "What is included in a bundle?", content: "Each bundle description details the specific products and services included. Please check the product page for full information." },
|
||||
{ id: "q2", title: "Can I customize a bundle?", content: "Some bundles offer limited customization options. Contact our sales team for custom solutions." },
|
||||
{ id: "q3", title: "What is your refund policy for bundles?", content: "Our standard refund policy applies to bundles. Please refer to our terms and conditions for details." },
|
||||
{ id: "q4", title: "How do I access my bundled products?", content: "Upon purchase, you will receive instructions on how to access and activate all products within your bundle." }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Support"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
title="Ready to Bundle Up?"
|
||||
description="Get in touch with our sales team to customize your perfect package and learn more about volume discounts."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Get a Custom Quote"
|
||||
useInvertedBackground={true}
|
||||
tagIcon={Star}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Bundles", href: "/bundles" },
|
||||
{ label: "Promotions", href: "/promotions" },
|
||||
{ label: "Solutions", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/components" },
|
||||
{ label: "Careers", href: "/components" },
|
||||
{ label: "Blog", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/components" },
|
||||
{ label: "Terms of Service", href: "/components" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 Bundles & Kits. All rights reserved."
|
||||
bottomRightText="Built with Webild"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
96
src/app/cart/page.tsx
Normal file
96
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TextBox from '@/components/Textbox';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function CartPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Order Conf", id: "/order-confirmation" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-8">
|
||||
<section id="cart" data-section="cart" className="w-full max-w-4xl py-12">
|
||||
<TextBox
|
||||
title="Your Shopping Cart"
|
||||
description="Review your items before proceeding to checkout. You can modify quantities or remove items here."
|
||||
textboxLayout="default"
|
||||
buttons={[
|
||||
{
|
||||
text: "Proceed to Checkout", href: "/checkout"
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div className="mt-8 space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg shadow-sm">
|
||||
<div>
|
||||
<h3 className="font-semibold">Product A</h3>
|
||||
<p className="text-sm text-gray-500">Quantity: 1</p>
|
||||
</div>
|
||||
<p className="font-medium">$99.00</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 border rounded-lg shadow-sm">
|
||||
<div>
|
||||
<h3 className="font-semibold">Product B</h3>
|
||||
<p className="text-sm text-gray-500">Quantity: 2</p>
|
||||
</div>
|
||||
<p className="font-medium">$150.00</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 border-t-2 mt-6 pt-6 font-bold text-lg">
|
||||
<span>Total:</span>
|
||||
<span>$249.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</TextBox>
|
||||
</section>
|
||||
|
||||
<section id="trust-signals-cart" data-section="trust-signals-cart" className="w-full max-w-4xl py-12">
|
||||
<SocialProofOne
|
||||
title="Secure & Trusted Shopping"
|
||||
description="Shop with confidence knowing your data is protected."
|
||||
names={['Stripe', 'PayPal', 'Shopify', 'McAfee Secure']}
|
||||
textboxLayout='default'
|
||||
showCard={true}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
96
src/app/checkout/page.tsx
Normal file
96
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TextBox from '@/components/Textbox';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function CheckoutPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Order Conf", id: "/order-confirmation" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-4 md:p-8">
|
||||
<section id="checkout" data-section="checkout" className="w-full max-w-4xl py-12">
|
||||
<TextBox
|
||||
title="Complete Your Order"
|
||||
description="Fill in your shipping and payment details to finalize your purchase. Your information is securely handled."
|
||||
textboxLayout="default"
|
||||
buttons={[
|
||||
{
|
||||
text: "Place Order", href: "/order-confirmation"
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div className="mt-8 space-y-6">
|
||||
<h3 className="font-semibold text-xl">Shipping Information</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input type="text" placeholder="Full Name" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Address Line 1" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Address Line 2 (Optional)" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="City" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="State/Province" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Postal Code" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Country" className="p-3 border rounded-lg w-full" />
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold text-xl mt-8">Payment Information</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input type="text" placeholder="Card Number" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Name on Card" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="Expiration (MM/YY)" className="p-3 border rounded-lg w-full" />
|
||||
<input type="text" placeholder="CVV" className="p-3 border rounded-lg w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</TextBox>
|
||||
</section>
|
||||
|
||||
<section id="trust-signals-checkout" data-section="trust-signals-checkout" className="w-full max-w-4xl py-12">
|
||||
<SocialProofOne
|
||||
title="Your Payment is Secure"
|
||||
description="We use industry-leading encryption to protect your payment information."
|
||||
names={['PCI DSS', 'HTTPS', '256-bit SSL', 'Fraud Protection']}
|
||||
textboxLayout='default'
|
||||
showCard={true}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
216
src/app/collections/[category]/page.tsx
Normal file
216
src/app/collections/[category]/page.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import Input from '@/components/form/Input';
|
||||
import ButtonExpandHover from '@/components/button/ButtonExpandHover';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ChevronLeft, ChevronRight, Filter, Search, SlidersHorizontal } from 'lucide-react';
|
||||
|
||||
// Dummy data for books
|
||||
const allBooks = [
|
||||
{ id: '1', name: 'The Art of Programming', price: '$29.99', imageSrc: '/book-programming.jpg', imageAlt: 'Book cover for The Art of Programming', category: 'technology' },
|
||||
{ id: '2', name: 'Science Fiction Masterpiece', price: '$19.99', imageSrc: '/book-scifi.jpg', imageAlt: 'Book cover for Science Fiction Masterpiece', category: 'fiction' },
|
||||
{ id: '3', name: 'A Culinary Journey', price: '$24.99', imageSrc: '/book-cooking.jpg', imageAlt: 'Book cover for A Culinary Journey', category: 'cooking' },
|
||||
{ id: '4', name: 'History of the World', price: '$35.00', imageSrc: '/book-history.jpg', imageAlt: 'Book cover for History of the World', category: 'history' },
|
||||
{ id: '5', name: 'Developing Modern Web Apps', price: '$39.99', imageSrc: '/book-webdev.jpg', imageAlt: 'Book cover for Developing Modern Web Apps', category: 'technology' },
|
||||
{ id: '6', name: 'Fantasy Realms Saga', price: '$22.50', imageSrc: '/book-fantasy.jpg', imageAlt: 'Book cover for Fantasy Realms Saga', category: 'fiction' },
|
||||
{ id: '7', name: 'Gourmet Baking Guide', price: '$28.00', imageSrc: '/book-baking.jpg', imageAlt: 'Book cover for Gourmet Baking Guide', category: 'cooking' },
|
||||
{ id: '8', name: 'Ancient Civilizations', price: '$32.00', imageSrc: '/book-ancient.jpg', imageAlt: 'Book cover for Ancient Civilizations', category: 'history' },
|
||||
{ id: '9', name: 'The Digital Frontier', price: '$31.99', imageSrc: '/book-digital.jpg', imageAlt: 'Book cover for The Digital Frontier', category: 'technology' },
|
||||
{ id: '10', name: 'Mythical Beasts', price: '$18.75', imageSrc: '/book-myth.jpg', imageAlt: 'Book cover for Mythical Beasts', category: 'fiction' }
|
||||
];
|
||||
|
||||
const ITEMS_PER_PAGE = 6;
|
||||
|
||||
export default function BookCollectionPage({ params }: { params: { category: string } }) {
|
||||
const router = useRouter();
|
||||
const { category } = params;
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | 'none'>('none');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Books", id: "/collections/all" }
|
||||
];
|
||||
|
||||
const filteredAndSortedBooks = useMemo(() => {
|
||||
let books = allBooks;
|
||||
|
||||
// Category filtering
|
||||
if (category !== 'all') {
|
||||
books = books.filter(book => book.category === category);
|
||||
}
|
||||
|
||||
// Search term filtering
|
||||
if (searchTerm) {
|
||||
books = books.filter(book =>
|
||||
book.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Sorting
|
||||
if (sortOrder === 'asc') {
|
||||
books = [...books].sort((a, b) => a.name.localeCompare(b.name));
|
||||
} else if (sortOrder === 'desc') {
|
||||
books = [...books].sort((a, b) => b.name.localeCompare(a.name));
|
||||
}
|
||||
|
||||
return books;
|
||||
}, [category, searchTerm, sortOrder]);
|
||||
|
||||
const totalPages = Math.ceil(filteredAndSortedBooks.length / ITEMS_PER_PAGE);
|
||||
const paginatedBooks = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
||||
const endIndex = startIndex + ITEMS_PER_PAGE;
|
||||
return filteredAndSortedBooks.slice(startIndex, endIndex);
|
||||
}, [filteredAndSortedBooks, currentPage]);
|
||||
|
||||
const handleCategoryChange = (newCategory: string) => {
|
||||
router.push(`/collections/${newCategory}`);
|
||||
setCurrentPage(1); // Reset page on category change
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
|
||||
const uniqueCategories = useMemo(() => {
|
||||
const categories = new Set(allBooks.map(book => book.category));
|
||||
return ['all', ...Array.from(categories)];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="BookShelf"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="BookShelf Logo"
|
||||
button={{ text: "Sign Up", href: "#" }}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto p-8">
|
||||
<h1 className="text-4xl font-bold text-center mb-8 capitalize">
|
||||
{category === 'all' ? 'All Books' : `${category} Books`}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 mb-8">
|
||||
{/* Category Filter */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-5 h-5" />
|
||||
<label htmlFor="category-filter" className="sr-only">Filter by Category</label>
|
||||
<select
|
||||
id="category-filter"
|
||||
value={category}
|
||||
onChange={(e) => handleCategoryChange(e.target.value)}
|
||||
className="px-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
|
||||
>
|
||||
{uniqueCategories.map(cat => (
|
||||
<option key={cat} value={cat} className="capitalize">
|
||||
{cat === 'all' ? 'All Categories' : cat}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-grow max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/60" />
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={setSearchTerm}
|
||||
placeholder="Search books..."
|
||||
className="w-full pl-10 pr-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
|
||||
ariaLabel="Search books"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sort Order */}
|
||||
<div className="flex items-center gap-2">
|
||||
<SlidersHorizontal className="w-5 h-5" />
|
||||
<label htmlFor="sort-order" className="sr-only">Sort Order</label>
|
||||
<select
|
||||
id="sort-order"
|
||||
value={sortOrder}
|
||||
onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc' | 'none')}
|
||||
className="px-4 py-2 rounded-lg border border-border bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:outline-none"
|
||||
>
|
||||
<option value="none">Sort By</option>
|
||||
<option value="asc">Name (A-Z)</option>
|
||||
<option value="desc">Name (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{paginatedBooks.length > 0 ? (
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
title="" // No title for the section itself, as the page title handles it
|
||||
description=""
|
||||
products={paginatedBooks.map(book => ({
|
||||
id: book.id,
|
||||
name: book.name,
|
||||
price: book.price,
|
||||
imageSrc: book.imageSrc,
|
||||
imageAlt: book.imageAlt
|
||||
// Add other necessary product props, e.g., onFavorite, onProductClick
|
||||
}))}
|
||||
className="mb-8"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center text-foreground/80 text-xl py-16">
|
||||
No books found for this category or search term.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex justify-center items-center gap-4 mt-8">
|
||||
<ButtonExpandHover
|
||||
text=""
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
ariaLabel="Previous page"
|
||||
className="w-10 h-10 p-0 flex items-center justify-center bg-secondary-cta hover:bg-secondary-cta/80 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
textClassName="sr-only"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</ButtonExpandHover>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => handlePageChange(page)}
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center text-lg font-medium
|
||||
${currentPage === page
|
||||
? 'bg-primary-cta text-primary-cta-foreground'
|
||||
: 'bg-card text-foreground hover:bg-card/80'
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
<ButtonExpandHover
|
||||
text=""
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
ariaLabel="Next page"
|
||||
className="w-10 h-10 p-0 flex items-center justify-center bg-secondary-cta hover:bg-secondary-cta/80 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
textClassName="sr-only"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</ButtonExpandHover>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
89
src/app/components/page.tsx
Normal file
89
src/app/components/page.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { NavbarStyleApple } from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import { HeroBillboardTestimonial } from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import { FooterSimple } from "@/components/sections/footer/FooterSimple";
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
export default function ComponentsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/components" },
|
||||
{ name: "Bundles", id: "/bundles" },
|
||||
{ name: "Promotions", id: "/promotions" }
|
||||
]}
|
||||
brandName="Webild"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Welcome to Our Platform"
|
||||
description="Explore our comprehensive offerings and discover how we can help your business thrive with innovative solutions."
|
||||
background={{ variant: "downward-rays-static" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Client One", handle: "@clientone", testimonial: "An amazing experience from start to finish! Highly recommend their services.", rating: 5,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "Client Two", handle: "@clienttwo", testimonial: "They truly understand our needs and deliver exceptional results every time.", rating: 5,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "/promotions" },
|
||||
{ text: "Learn More", href: "/bundles" }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/1024x768?_wi=1"
|
||||
imageAlt="Placeholder image for hero section"
|
||||
mediaAnimation="opacity"
|
||||
tag="Innovation"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Bundles", href: "/bundles" },
|
||||
{ label: "Promotions", href: "/promotions" },
|
||||
{ label: "Solutions", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/components" },
|
||||
{ label: "Careers", href: "/components" },
|
||||
{ label: "Blog", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/components" },
|
||||
{ label: "Terms of Service", href: "/components" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 Webild. All rights reserved."
|
||||
bottomRightText="Built with Webild"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
67
src/app/order-confirmation/page.tsx
Normal file
67
src/app/order-confirmation/page.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function OrderConfirmationPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Order Conf", id: "/order-confirmation" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
brandName="Webild"
|
||||
logoSrc="https://via.placeholder.com/40"
|
||||
button={{ text: "Continue Shopping", href: "/" }}
|
||||
/>
|
||||
<main className="flex min-h-screen flex-col items-center justify-between">
|
||||
<HeroCentered
|
||||
id="order-confirmation"
|
||||
title="Order Confirmed!"
|
||||
description="Thank you for your purchase. Your order #ABC123DEF has been placed and is now being processed. A confirmation email with details has been sent to your inbox."
|
||||
background={{ variant: 'downward-rays-static' }}
|
||||
avatars={[{ src: 'https://via.placeholder.com/150', alt: 'Confirmed 1' }, { src: 'https://via.placeholder.com/150', alt: 'Confirmed 2' }]}
|
||||
avatarText="You're all set!"
|
||||
buttons={[{ text: 'View Order Details', href: '/' }]}
|
||||
buttonAnimation='slide-up'
|
||||
/>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,62 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
'use client';
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
|
||||
export default function Home() {
|
||||
redirect('/components');
|
||||
}
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Order Conf", id: "/order-confirmation" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
|
||||
<main className="flex min-h-screen flex-col items-center justify-between">
|
||||
<HeroCentered
|
||||
id="hero"
|
||||
title="Welcome to Our Store!"
|
||||
description="Explore our amazing products and enjoy a seamless shopping experience from cart to checkout."
|
||||
background={{ variant: 'radial-gradient' }}
|
||||
avatars={[{ src: 'https://via.placeholder.com/150', alt: 'User 1' }, { src: 'https://via.placeholder.com/150', alt: 'User 2' }]}
|
||||
avatarText="Join thousands of happy shoppers!"
|
||||
buttons={[{ text: 'Start Shopping', href: '/' }]}
|
||||
buttonAnimation='slide-up'
|
||||
/>
|
||||
</main>
|
||||
<FooterBaseReveal
|
||||
logoText="Webild"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2023 Webild. All rights reserved."
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
162
src/app/products/[id]/page.tsx
Normal file
162
src/app/products/[id]/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from 'next-themes';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TextAnimation from '@/components/text/TextAnimation';
|
||||
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import { Sparkles, Star } from 'lucide-react';
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const book = {
|
||||
id: 'the-alchemist',
|
||||
title: 'The Alchemist',
|
||||
author: 'Paulo Coelho',
|
||||
description: 'A captivating novel about a young shepherd who journeys to the Egyptian desert in search of a treasure. His quest leads him to discover a different kind of treasure than he originally envisioned.',
|
||||
price: '$12.99',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-alchemist.png',
|
||||
imageAlt: 'The Alchemist book cover',
|
||||
rating: 4.8,
|
||||
reviewCount: 1500,
|
||||
};
|
||||
|
||||
const reviews = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Sophia M.',
|
||||
role: 'Avid Reader',
|
||||
testimonial: 'An inspiring and thought-provoking read that I couldn\'t put down. Highly recommended!',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-1.jpg',
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'John D.',
|
||||
role: 'Book Enthusiast',
|
||||
testimonial: 'The story is beautifully written and full of wisdom. A true classic that everyone should read.',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-2.jpg',
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Emily R.',
|
||||
role: 'Philosophy Student',
|
||||
testimonial: 'Changed my perspective on life and destiny. Deeply moving and thought-provoking.',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/customer-avatar-3.jpg',
|
||||
icon: Star,
|
||||
},
|
||||
];
|
||||
|
||||
const relatedProducts = [
|
||||
{
|
||||
id: 'little-prince',
|
||||
name: 'The Little Prince',
|
||||
price: '$9.99',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-little-prince.png',
|
||||
imageAlt: 'The Little Prince book cover',
|
||||
},
|
||||
{
|
||||
id: 'siddhartha',
|
||||
name: 'Siddhartha',
|
||||
price: '$11.50',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-siddhartha.png',
|
||||
imageAlt: 'Siddhartha book cover',
|
||||
},
|
||||
{
|
||||
id: 'jonathan-seagull',
|
||||
name: 'Jonathan Livingston Seagull',
|
||||
price: '$8.75',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-jonathan-seagull.png',
|
||||
imageAlt: 'Jonathan Livingston Seagull book cover',
|
||||
},
|
||||
{
|
||||
id: 'the-prophet',
|
||||
name: 'The Prophet',
|
||||
price: '$10.25',
|
||||
imageSrc: 'https://pub-8b4931a55099479ca4d5a9d685ac336c.r2.dev/book-cover-prophet.png',
|
||||
imageAlt: 'The Prophet book cover',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Products', id: '/products' },
|
||||
{ name: 'About', id: '/#about' }
|
||||
]}
|
||||
brandName="Bookish"
|
||||
button={{ text: 'Sign Up', href: '/#contact' }}
|
||||
/>
|
||||
<main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-16 relative z-10">
|
||||
{/* Book Information Section */}
|
||||
<section id="book-info" data-section="book-info" className="w-full max-w-6xl py-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<img
|
||||
src={book.imageSrc}
|
||||
alt={book.imageAlt}
|
||||
className="w-full max-w-xs md:max-w-sm rounded-lg shadow-2xl transition-transform duration-300 hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 text-center md:text-left">
|
||||
<TextAnimation
|
||||
title={book.title}
|
||||
type="entrance-slide"
|
||||
className="text-5xl md:text-6xl font-extrabold text-foreground leading-tight"
|
||||
/>
|
||||
<p className="text-xl text-primary-cta font-medium">By {book.author}</p>
|
||||
<p className="text-lg text-foreground-lighter">{book.description}</p>
|
||||
<div className="flex items-center justify-center md:justify-start gap-2 text-xl text-yellow-500">
|
||||
{Array.from({ length: Math.floor(book.rating) }).map((_, i) => (
|
||||
<Star key={i} fill="currentColor" stroke="none" size={20} />
|
||||
))}
|
||||
<span className="text-foreground text-base ml-1">({book.rating} / {book.reviewCount} reviews)</span>
|
||||
</div>
|
||||
<p className="text-4xl font-bold text-foreground mt-4">{book.price}</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4 mt-6">
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
className="w-20 p-3 border border-border-light rounded-md text-center bg-card text-foreground focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all duration-200"
|
||||
/>
|
||||
<ButtonTextShift text="Add to Cart" className="w-full sm:w-auto px-8 py-3 rounded-lg font-semibold" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<div id="reviews" data-section="reviews" className="w-full py-16">
|
||||
<TestimonialCardTwo
|
||||
testimonials={reviews}
|
||||
title="What Our Readers Say"
|
||||
description="Hear from our satisfied customers about their experience with this book."
|
||||
animationType="blur-reveal"
|
||||
carouselMode="buttons"
|
||||
uniformGridCustomHeightClasses="min-h-none"
|
||||
tag="Reviews"
|
||||
tagIcon={Sparkles}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Related Products Section */}
|
||||
<div id="related-products" data-section="related-products" className="w-full py-16">
|
||||
<ProductCardThree
|
||||
products={relatedProducts}
|
||||
title="You Might Also Like"
|
||||
description="Discover other captivating titles that share similar themes."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
tag="More Books"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
175
src/app/promotions/page.tsx
Normal file
175
src/app/promotions/page.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import { NavbarStyleApple } from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import { HeroBillboardTestimonial } from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import { ProductCardOne } from "@/components/sections/product/ProductCardOne";
|
||||
import { SocialProofOne } from "@/components/sections/socialProof/SocialProofOne";
|
||||
import { MetricCardFourteen } from "@/components/sections/metrics/MetricCardFourteen";
|
||||
import { TestimonialCardTen } from "@/components/sections/testimonial/TestimonialCardTen";
|
||||
import { ContactCenter } from "@/components/sections/contact/ContactCenter";
|
||||
import { FooterSimple } from "@/components/sections/footer/FooterSimple";
|
||||
import { Rocket } from "lucide-react";
|
||||
|
||||
export default function PromotionsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/components" },
|
||||
{ name: "Bundles", id: "/bundles" },
|
||||
{ name: "Promotions", id: "/promotions" }
|
||||
]}
|
||||
brandName="Promotions Central"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Limited-Time Offers & Exclusive Promotions!"
|
||||
description="Don't miss out on incredible deals across our product range. Act fast, these won't last!"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice Brown", handle: "@aliceb", testimonial: "Got an amazing deal, and the product quality is top-notch!", rating: 5,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "Bob Green", handle: "@bobg", testimonial: "Always check here for the best prices. Never disappointed.", rating: 4,
|
||||
imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View All Deals", href: "#products" },
|
||||
{ text: "Subscribe for Updates", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://via.placeholder.com/1024x768/FFD700/000000?text=Promotion+Sale?_wi=1"
|
||||
imageAlt="Promotional sale banner"
|
||||
mediaAnimation="opacity"
|
||||
tag="Flash Sale"
|
||||
tagIcon={Rocket}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Hot Deals & Special Discounts"
|
||||
description="Explore our currently running promotions on popular products and services. Grab them before they're gone!"
|
||||
products={[
|
||||
{
|
||||
id: "promo-1", name: "Advanced Analytics Software", price: "$99 (was $149)", imageSrc: "https://via.placeholder.com/400x300/FF5733/FFFFFF?text=Analytics+Software?_wi=1", imageAlt: "Advanced Analytics Software"
|
||||
},
|
||||
{
|
||||
id: "promo-2", name: "Premium Video Editor", price: "$79 (was $129)", imageSrc: "https://via.placeholder.com/400x300/33FF57/FFFFFF?text=Video+Editor?_wi=1", imageAlt: "Premium Video Editor"
|
||||
},
|
||||
{
|
||||
id: "promo-3", name: "Cloud Storage Pro", price: "$29 (was $49)", imageSrc: "https://via.placeholder.com/400x300/3357FF/FFFFFF?text=Cloud+Storage?_wi=1", imageAlt: "Cloud Storage Pro"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Deals"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Industry Leaders"
|
||||
description="Our promotions are designed to bring premium quality to everyone, endorsed by companies big and small."
|
||||
names={[
|
||||
"TechCorp", "InnovateLabs", "Global Solutions", "Future Systems", "DesignHub", "DataStream"
|
||||
]}
|
||||
speed={50}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
tag="Partners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Impact of Our Promotions"
|
||||
tag="Results"
|
||||
metrics={[
|
||||
{ id: "m1", value: "50K+", description: "Satisfied Customers" },
|
||||
{ id: "m2", value: "30%", description: "Average Savings" },
|
||||
{ id: "m3", value: "100+", description: "Unique Offers Monthly" }
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Success Stories from Our Promos"
|
||||
description="Real results from real people who leveraged our special offers to achieve their goals."
|
||||
testimonials={[
|
||||
{
|
||||
id: "promo-test-1", title: "Boosted My Business!", quote: "The marketing suite promotion was exactly what I needed. My online presence has never been better.", name: "David Lee", role: "E-commerce Entrepreneur", imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
},
|
||||
{
|
||||
id: "promo-test-2", title: "Unbeatable Price", quote: "I finally got the design software I wanted at a price I couldn't resist. Fantastic deal!", name: "Sophia Kim", role: "Freelance Designer", imageSrc: "https://via.placeholder.com/150?_wi=1"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
tag="Customer Stories"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Don't Miss Out"
|
||||
title="Stay Tuned for More!"
|
||||
description="Sign up for our newsletter to get exclusive access to future promotions, early bird discounts, and special announcements."
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttonText="Sign Up Now"
|
||||
useInvertedBackground={false}
|
||||
tagIcon={Rocket}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Bundles", href: "/bundles" },
|
||||
{ label: "Promotions", href: "/promotions" },
|
||||
{ label: "Solutions", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/components" },
|
||||
{ label: "Careers", href: "/components" },
|
||||
{ label: "Blog", href: "/components" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "/components" },
|
||||
{ label: "Terms of Service", href: "/components" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2024 Promotions Central. All rights reserved."
|
||||
bottomRightText="Built with Webild"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user