diff --git a/src/app/bundles/page.tsx b/src/app/bundles/page.tsx new file mode 100644 index 0000000..30bae9b --- /dev/null +++ b/src/app/bundles/page.tsx @@ -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 ( + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +} diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx new file mode 100644 index 0000000..bb79ca8 --- /dev/null +++ b/src/app/cart/page.tsx @@ -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 ( + + +
+
+ +
+
+
+

Product A

+

Quantity: 1

+
+

$99.00

+
+
+
+

Product B

+

Quantity: 2

+
+

$150.00

+
+
+ Total: + $249.00 +
+
+ +
+ +
+ +
+
+ + + ); +} diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..73575dd --- /dev/null +++ b/src/app/checkout/page.tsx @@ -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 ( + + +
+
+ +
+

Shipping Information

+
+ + + + + + + +
+ +

Payment Information

+
+ + + + +
+
+ +
+ +
+ +
+
+ + + ); +} diff --git a/src/app/collections/[category]/page.tsx b/src/app/collections/[category]/page.tsx new file mode 100644 index 0000000..b049e29 --- /dev/null +++ b/src/app/collections/[category]/page.tsx @@ -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 ( +
+ + +
+

+ {category === 'all' ? 'All Books' : `${category} Books`} +

+ +
+ {/* Category Filter */} +
+ + + +
+ + {/* Search Input */} +
+ + +
+ + {/* Sort Order */} +
+ + + +
+
+ + {paginatedBooks.length > 0 ? ( + ({ + 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" + /> + ) : ( +
+ No books found for this category or search term. +
+ )} + + {/* Pagination */} + {totalPages > 1 && ( +
+ 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" + > + + + {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => ( + + ))} + 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" + > + + +
+ )} +
+
+ ); +} \ No newline at end of file diff --git a/src/app/components/page.tsx b/src/app/components/page.tsx new file mode 100644 index 0000000..c987feb --- /dev/null +++ b/src/app/components/page.tsx @@ -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 ( + + + +
+ +
+ + + + ); +} diff --git a/src/app/order-confirmation/page.tsx b/src/app/order-confirmation/page.tsx new file mode 100644 index 0000000..8d9c771 --- /dev/null +++ b/src/app/order-confirmation/page.tsx @@ -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 ( + + +
+ +
+ + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index d39d6c0..3723130 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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'); -} \ No newline at end of file + const navItems = [ + { name: "Home", id: "/" }, + { name: "Cart", id: "/cart" }, + { name: "Checkout", id: "/checkout" }, + { name: "Order Conf", id: "/order-confirmation" } + ]; + + return ( + + +
+ +
+ + + ); +} diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx new file mode 100644 index 0000000..88e4bb4 --- /dev/null +++ b/src/app/products/[id]/page.tsx @@ -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 ( + + +
+ {/* Book Information Section */} +
+
+ {book.imageAlt} +
+
+ +

By {book.author}

+

{book.description}

+
+ {Array.from({ length: Math.floor(book.rating) }).map((_, i) => ( + + ))} + ({book.rating} / {book.reviewCount} reviews) +
+

{book.price}

+
+ + +
+
+
+ + {/* Reviews Section */} +
+ +
+ + {/* Related Products Section */} + +
+ + ); +} \ No newline at end of file diff --git a/src/app/promotions/page.tsx b/src/app/promotions/page.tsx new file mode 100644 index 0000000..9bc76cf --- /dev/null +++ b/src/app/promotions/page.tsx @@ -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 ( + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + ); +}