8 Commits

Author SHA1 Message Date
68fafa21e2 Update src/app/blog/page.tsx 2026-03-05 18:58:41 +00:00
a320887a5a Add src/app/products/page.tsx 2026-03-05 18:57:43 +00:00
9ebe25ebe5 Update src/app/page.tsx 2026-03-05 18:57:43 +00:00
11d9d58869 Add src/app/faq/page.tsx 2026-03-05 18:57:42 +00:00
40c67694d0 Add src/app/contact/page.tsx 2026-03-05 18:57:42 +00:00
9e95807012 Add src/app/blog/page.tsx 2026-03-05 18:57:41 +00:00
b0759be450 Add src/app/about/page.tsx 2026-03-05 18:57:41 +00:00
4103ba54fe Merge version_2 into main
Merge version_2 into main
2026-03-05 18:55:35 +00:00
6 changed files with 662 additions and 7 deletions

142
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,142 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Facebook, Globe, Heart, Instagram, Leaf, Mail, Sparkles, Twitter, Users } from 'lucide-react';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="large"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
}}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="Our Story"
description="Born from a passion for exceptional coffee and sustainable farming, Artisan Coffee Co. started with a simple mission: to connect coffee lovers with the world's finest beans."
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "Founded in 2015", description: "Started as a small roastery with big dreams to revolutionize specialty coffee", icon: Sparkles
},
{
title: "Direct Trade Relationships", description: "We work directly with farmers to ensure fair prices and sustainable practices", icon: Globe
},
{
title: "Award-Winning Roasts", description: "Our dedication to quality has earned us numerous industry recognitions", icon: Award
},
{
title: "Community Focused", description: "We believe in building relationships with our customers and giving back locally", icon: Heart
}
]}
imageSrc="http://img.b2bpic.net/free-photo/barista-making-coffee_23-2149372213.jpg"
imageAlt="Our roastery and team"
mediaAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features">
<FeatureCardOne
title="Why Choose Us"
description="Discover what sets Artisan Coffee Co. apart in the specialty coffee world."
tag="Our Values"
tagIcon={Leaf}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
features={[
{
title: "Sustainability First", description: "Every purchase supports eco-friendly farming practices and reforestation initiatives.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-plantation-morning-mist_93675-45321.jpg", imageAlt: "Sustainable coffee farm"
},
{
title: "Freshly Roasted", description: "We roast on-demand to guarantee maximum freshness and flavor in every cup.", imageSrc: "http://img.b2bpic.net/free-photo/roasting-coffee-beans-close-up_93675-78912.jpg", imageAlt: "Coffee roasting process"
},
{
title: "Expert Curation", description: "Our master roasters carefully select and blend beans from the world's best origins.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-expert-tasting_93675-65432.jpg", imageAlt: "Coffee tasting and curation"
}
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
title="Meet Our Team"
description="The passionate people behind every exceptional cup."
tag="Our Experts"
tagIcon={Users}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
members={[
{
id: "1", name: "Maria Santos", role: "Head Roaster", imageSrc: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=1"
},
{
id: "2", name: "James Mitchell", role: "Sourcing Director", imageSrc: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=2"
},
{
id: "3", name: "Elena Rossi", role: "Community Manager", imageSrc: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=3"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to join our coffee community and experience the difference quality makes?"
animationType="entrance-slide"
buttons={[
{ text: "Shop Now", href: "/products" },
{ text: "Contact Us", href: "/contact" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Artisan Coffee Co."
copyrightText="© 2025 Artisan Coffee Co. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
/>
</div>
</ThemeProvider>
);
}

118
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,118 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, BookOpen, Coffee, Facebook, Instagram, Mail, Twitter } from 'lucide-react';
export default function BlogPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="large"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Coffee Stories & Insights"
description="Explore brewing tips, coffee origins, sustainability practices, and stories from our community. Discover what makes specialty coffee truly special."
tag="Coffee Knowledge"
tagIcon={BookOpen}
background={{ variant: "radial-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/coffee-blog-coffee-cup-notebook_93675-345678.jpg"
imageAlt="Coffee blog and stories"
imagePosition="right"
buttons={[
{ text: "Read Latest", href: "#blog" },
{ text: "All Articles", href: "#all-articles" }
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="blog" data-section="blog">
<BlogCardOne
title="Latest Articles"
description="Tips, stories, and insights to enhance your coffee experience."
tag="Blog"
tagIcon={Coffee}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
carouselMode="buttons"
blogs={[
{
id: "1", category: "Brewing Guide", title: "The Art of Pour Over Coffee", excerpt: "Master the perfect pour over technique with our step-by-step guide. Learn how water temperature, grind size, and pour rate affect your cup.", imageSrc: "http://img.b2bpic.net/free-photo/pour-over-coffee-brewing_93675-234567.jpg", imageAlt: "Pour over coffee brewing", authorName: "Maria Santos", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=1", date: "15 Jan 2025"
},
{
id: "2", category: "Origin Stories", title: "From Farm to Cup: Ethiopian Highlands", excerpt: "Discover the journey of our Ethiopian Highlands coffee. Meet the farmers, explore the landscape, and understand what makes this origin special.", imageSrc: "http://img.b2bpic.net/free-photo/ethiopian-coffee-farm_93675-345678.jpg", imageAlt: "Ethiopian coffee farm", authorName: "James Mitchell", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=2", date: "12 Jan 2025"
},
{
id: "3", category: "Sustainability", title: "Our Commitment to Sustainable Coffee", excerpt: "Learn about our direct trade relationships and environmental initiatives. See how your coffee choice supports positive change.", imageSrc: "http://img.b2bpic.net/free-photo/sustainable-farming-practices_93675-456789.jpg", imageAlt: "Sustainable coffee farming", authorName: "Elena Rossi", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=3", date: "10 Jan 2025"
},
{
id: "4", category: "Tasting Notes", title: "Understanding Coffee Flavor Profiles", excerpt: "Unlock the language of coffee tasting. Learn how to identify flavor notes, acidity levels, and body characteristics in your cup.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-tasting-setup_93675-567890.jpg", imageAlt: "Coffee tasting setup", authorName: "Maria Santos", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=1", date: "08 Jan 2025"
},
{
id: "5", category: "Brewing Guide", title: "Espresso Extraction Mastery", excerpt: "Dive deep into the science of espresso extraction. Discover how to dial in your grinder and achieve the perfect shot every time.", imageSrc: "http://img.b2bpic.net/free-photo/espresso-machine-extraction_93675-678901.jpg", imageAlt: "Espresso extraction", authorName: "James Mitchell", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=2", date: "05 Jan 2025"
},
{
id: "6", category: "Community", title: "Meet Our Community: Coffee Stories", excerpt: "Featuring stories from our coffee-loving community. Learn how people around the world are enjoying and celebrating specialty coffee.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-community-gathering_93675-789012.jpg", imageAlt: "Coffee community event", authorName: "Elena Rossi", authorAvatar: "http://img.b2bpic.net/free-vector/collection-professional-avatars_23-2147667908.jpg?_wi=3", date: "01 Jan 2025"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Subscribe to our newsletter for exclusive coffee tips, new article releases, and special offers."
animationType="entrance-slide"
buttons={[
{ text: "Subscribe", href: "#contact" },
{ text: "Share Your Story", href: "/contact" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Artisan Coffee Co."
copyrightText="© 2025 Artisan Coffee Co. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
/>
</div>
</ThemeProvider>
);
}

110
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,110 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Heart, Instagram, Mail, MapPin, MessageSquare, Phone, Twitter } from 'lucide-react';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="large"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Get In Touch"
description="Have questions about our coffee, shipping, or anything else? We'd love to hear from you. Reach out anytime and our team will get back to you promptly."
tag="Contact Us"
tagIcon={Mail}
background={{ variant: "radial-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-contact_93675-890123.jpg"
imageAlt="Contact us"
imagePosition="right"
buttons={[
{ text: "Send Message", href: "#contact-form" },
{ text: "View Hours", href: "#contact-methods" }
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactCenter
tag="Newsletter"
title="Stay Updated"
description="Subscribe to our newsletter for exclusive offers, new products, and coffee brewing tips delivered to your inbox."
tagIcon={Heart}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
inputPlaceholder="your@email.com"
buttonText="Subscribe"
termsText="We respect your privacy. You can unsubscribe anytime."
/>
</div>
<div id="contact-methods" data-section="contact-methods">
<FeatureCardOne
title="Other Ways to Reach Us"
description="Choose your preferred way to get in touch with our friendly team."
tag="Contact Methods"
tagIcon={MessageSquare}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
features={[
{
title: "Email Us", description: "Send us an email and we'll respond within 24 business hours. hello@artisancoffeeco.com", imageSrc: "http://img.b2bpic.net/free-photo/email-contact_93675-901234.jpg", imageAlt: "Email contact", button: { text: "Send Email", href: "mailto:hello@artisancoffeeco.com" }
},
{
title: "Call Us", description: "Speak directly with our team during business hours. Monday-Friday, 9am-6pm EST. +1 (555) 123-4567", imageSrc: "http://img.b2bpic.net/free-photo/phone-contact_93675-012345.jpg", imageAlt: "Phone contact", button: { text: "Call Now", href: "tel:+15551234567" }
},
{
title: "Visit Us", description: "Stop by our roastery and café. Taste our latest batches and meet the team in person. 123 Coffee Lane, Portland, OR 97201", imageSrc: "http://img.b2bpic.net/free-photo/coffee-roastery-location_93675-123456.jpg", imageAlt: "Our location", button: { text: "Get Directions", href: "https://maps.google.com" }
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Artisan Coffee Co."
copyrightText="© 2025 Artisan Coffee Co. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
/>
</div>
</ThemeProvider>
);
}

136
src/app/faq/page.tsx Normal file
View File

@@ -0,0 +1,136 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Coffee, Facebook, HelpCircle, Instagram, Mail, Twitter } from 'lucide-react';
export default function FAQPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="large"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Frequently Asked Questions"
description="Find answers to common questions about our coffee, shipping, brewing, and more. Can't find what you're looking for? Reach out to our team!"
tag="Help & Support"
tagIcon={HelpCircle}
background={{ variant: "radial-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/coffee-faq-help_93675-234567.jpg"
imageAlt="FAQ and help"
imagePosition="right"
buttons={[
{ text: "Browse FAQs", href: "#faqs" },
{ text: "Contact Support", href: "/contact" }
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="faqs" data-section="faqs">
<FaqDouble
title="Common Questions"
description="Here are answers to the most frequently asked questions from our community."
tag="FAQs"
tagIcon={Coffee}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
animationType="smooth"
faqs={[
{
id: "1", title: "How is your coffee roasted?", content: "Our coffee is small-batch roasted in-house using traditional drum roasting techniques. We roast on-demand to ensure maximum freshness. Each batch is carefully monitored to bring out the unique characteristics of the beans, and we roast to order based on customer demand to guarantee you receive the freshest coffee possible."
},
{
id: "2", title: "What does 'single-origin' mean?", content: "Single-origin coffee comes from one specific location, region, or farm. This contrasts with blends, which combine beans from multiple origins. Single-origin coffees showcase the unique flavor characteristics, terroir, and quality of their specific growing region. Each origin has distinct flavor notes influenced by altitude, climate, soil, and processing methods."
},
{
id: "3", title: "How should I store my coffee?", content: "Store your coffee in an airtight container away from light, heat, and moisture. Whole beans are best kept in a cool, dark cupboard. For optimal freshness, consume your coffee within 2-4 weeks of the roast date. Avoid storing in the refrigerator or freezer, as the temperature fluctuations can affect the flavor. Grinding just before brewing preserves the maximum aroma and flavor."
},
{
id: "4", title: "What's the best brewing method?", content: "The 'best' method depends on your preferences and lifestyle. Pour-over offers precision and control, French press creates a full-bodied cup, espresso provides intensity and crema, AeroPress is versatile and portable, and Moka pot is traditional and reliable. We recommend experimenting with different methods to find your favorite. Each brewing method highlights different aspects of the coffee's flavor profile."
},
{
id: "5", title: "How long does shipping take?", content: "We offer several shipping options: Standard Shipping (5-7 business days), Express Shipping (2-3 business days), and Overnight Delivery. Orders are processed and shipped within 24 hours. Once your order ships, you'll receive tracking information via email. We ship from our roastery in Portland, Oregon to locations throughout the United States."
},
{
id: "6", title: "Do you offer international shipping?", content: "Currently, we offer shipping to all 50 U.S. states. International shipping is coming soon! If you're interested in international delivery, please contact us and we'll be happy to discuss options or add you to our international waitlist. We're working with logistics partners to expand our reach."
},
{
id: "7", title: "What is direct trade?", content: "Direct trade means we work directly with coffee farmers and their cooperatives, bypassing traditional middlemen. This ensures farmers receive a fair price for their quality beans, usually 25% above commodity prices. It also allows us to have direct relationships, understand growing practices, and ensure sustainability and quality standards. We visit our partner farms annually."
},
{
id: "8", title: "How long does coffee stay fresh after grinding?", content: "Ground coffee begins to lose its aromatic compounds immediately after grinding. For the best flavor, brew ground coffee within 30 minutes of grinding. If you must pre-grind, store it in an airtight container and use within 1-2 hours. This is why we recommend grinding immediately before brewing. Whole beans maintain freshness for 2-4 weeks when stored properly."
},
{
id: "9", title: "Can I return or exchange products?", content: "We want you to be completely satisfied with your coffee. If for any reason you're not happy with your purchase, you can return it within 30 days of receipt for a full refund or exchange. If the coffee arrived damaged, we'll replace it at no cost. Contact us at support@artisancoffeeco.com to start the return process."
},
{
id: "10", title: "Do you have a subscription service?", content: "Yes! Our subscription service delivers fresh coffee to your door on a schedule you choose (weekly, bi-weekly, or monthly). Subscribers receive a 10% discount on all orders and can customize their selection based on preferences. You can pause, skip, or modify your subscription anytime. Visit our shop or contact us for more details."
},
{
id: "11", title: "What's the roast date?", content: "The roast date is printed on every bag of our coffee. This tells you exactly when the beans were roasted, making it easy to gauge freshness. We recommend consuming coffee within 2-4 weeks of the roast date for optimal flavor. Properly stored coffee can remain good for up to 6 weeks, but flavor quality begins to decline after the 4-week mark."
},
{
id: "12", title: "Do you offer wholesale or bulk orders?", content: "Yes! We offer wholesale pricing for cafés, restaurants, and corporate accounts. We also provide bulk discounts for large personal orders. Contact our wholesale team at wholesale@artisancoffeeco.com to discuss your needs and receive a custom quote."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Didn't find your answer? Our friendly team is ready to help with any questions about our coffee, brewing, or products."
animationType="entrance-slide"
buttons={[
{ text: "Get Support", href: "/contact" },
{ text: "Email Us", href: "mailto:hello@artisancoffeeco.com" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Artisan Coffee Co."
copyrightText="© 2025 Artisan Coffee Co. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
/>
</div>
</ThemeProvider>
);
}

View File

@@ -29,11 +29,11 @@ export default function LandingPage() {
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "About", id: "about" },
{ name: "Products", id: "products" },
{ name: "Story", id: "metrics" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
@@ -52,8 +52,8 @@ export default function LandingPage() {
imageAlt="Specialty coffee brewing"
imagePosition="right"
buttons={[
{ text: "Explore Collection", href: "#products" },
{ text: "Learn Our Story", href: "#about" }
{ text: "Explore Collection", href: "/products" },
{ text: "Learn Our Story", href: "/about" }
]}
mediaAnimation="blur-reveal"
/>

149
src/app/products/page.tsx Normal file
View File

@@ -0,0 +1,149 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Coffee, Facebook, Gift, Instagram, Sparkles, Twitter } from 'lucide-react';
export default function ProductsPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="large"
background="none"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Artisan Coffee Co."
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Products", id: "/products" },
{ name: "Blog", id: "/blog" },
{ name: "Contact", id: "/contact" }
]}
button={{
text: "Shop Now", href: "https://example.com/shop"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Our Coffee Collections"
description="Explore our carefully curated selection of premium coffee beans from around the world. Each blend is roasted to perfection and designed to deliver an exceptional cup."
tag="Premium Collections"
tagIcon={Coffee}
background={{ variant: "radial-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/assortment-coffee-beans-different-varieties_93675-123456.jpg"
imageAlt="Coffee collection display"
imagePosition="right"
buttons={[
{ text: "Browse All", href: "#products" },
{ text: "Gift Sets", href: "#gift-sets" }
]}
mediaAnimation="blur-reveal"
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Single-Origin Collections"
description="Discover the unique character of coffee from specific regions around the world."
tag="Best Sellers"
tagIcon={Sparkles}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1", brand: "Artisan Coffee Co.", name: "Ethiopian Highlands", price: "$18.99", rating: 5,
reviewCount: "342", imageSrc: "http://img.b2bpic.net/free-photo/coffee-beans-glass-jar-black-background-closeup-selective-focus-vertical-frame-roasting-preparing-coffee-vertical-frame_166373-2308.jpg", imageAlt: "Ethiopian Highlands Coffee"
},
{
id: "2", brand: "Artisan Coffee Co.", name: "Kenyan AA Grade", price: "$21.99", rating: 5,
reviewCount: "156", imageSrc: "http://img.b2bpic.net/free-photo/premium-coffee-bag-open_93675-234567.jpg", imageAlt: "Kenyan AA Coffee"
},
{
id: "3", brand: "Artisan Coffee Co.", name: "Colombian Silky Smooth", price: "$19.99", rating: 4,
reviewCount: "215", imageSrc: "http://img.b2bpic.net/free-photo/hot-latte-coffee-cup_1339-4032.jpg", imageAlt: "Colombian Silky Smooth Coffee"
},
{
id: "4", brand: "Artisan Coffee Co.", name: "Brazilian Bold Roast", price: "$16.99", rating: 5,
reviewCount: "289", imageSrc: "http://img.b2bpic.net/free-photo/double-espresso-coffee-mug-with-cinnamon-sticks-coffee-beans-wooden-board_181624-57338.jpg", imageAlt: "Brazilian Bold Roast Coffee"
},
{
id: "5", brand: "Artisan Coffee Co.", name: "Costa Rican Volcano", price: "$19.99", rating: 5,
reviewCount: "178", imageSrc: "http://img.b2bpic.net/free-photo/coffee-packaging-design_93675-345678.jpg", imageAlt: "Costa Rican Volcano Coffee"
},
{
id: "6", brand: "Artisan Coffee Co.", name: "Indonesian Dark Roast", price: "$17.99", rating: 4,
reviewCount: "142", imageSrc: "http://img.b2bpic.net/free-photo/dark-roast-coffee-beans_93675-456789.jpg", imageAlt: "Indonesian Dark Roast Coffee"
}
]}
/>
</div>
<div id="gift-sets" data-section="gift-sets">
<FeatureCardOne
title="Perfect Gift Sets"
description="Beautifully curated coffee gift sets for the coffee lover in your life."
tag="Gift Ideas"
tagIcon={Gift}
textboxLayout="default"
useInvertedBackground={false}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
features={[
{
title: "Connoisseur Set", description: "A premium selection of three of our finest single-origin coffees, perfect for exploring different flavor profiles.", imageSrc: "http://img.b2bpic.net/free-photo/luxury-coffee-gift-set_93675-567890.jpg", imageAlt: "Connoisseur coffee gift set", button: { text: "View Set", href: "https://example.com/gift-sets/connoisseur" }
},
{
title: "Beginner's Trio", description: "Three carefully selected blends with tasting notes to help new coffee enthusiasts discover their favorites.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-gift-box-beginner_93675-678901.jpg", imageAlt: "Beginner's coffee set", button: { text: "View Set", href: "https://example.com/gift-sets/beginners" }
},
{
title: "Espresso Lover's Bundle", description: "Dark roasted beans perfect for espresso, paired with a premium coffee cup and guide.", imageSrc: "http://img.b2bpic.net/free-photo/espresso-gift-set_93675-789012.jpg", imageAlt: "Espresso lover's gift bundle", button: { text: "View Bundle", href: "https://example.com/gift-sets/espresso" }
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Have questions about our products? Our coffee experts are here to help you find the perfect brew."
animationType="entrance-slide"
buttons={[
{ text: "Contact Support", href: "/contact" },
{ text: "View FAQ", href: "/faq" }
]}
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Artisan Coffee Co."
copyrightText="© 2025 Artisan Coffee Co. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" }
]}
/>
</div>
</ThemeProvider>
);
}