191 lines
12 KiB
TypeScript
191 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Flame, HeartCrack } from "lucide-react";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Pepper Peak"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Flavors", id: "flavors" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Pepper Peak"
|
|
description="Crafted with passion, bottled with fire. Experience the peak of flavor with our gourmet hot sauces."
|
|
buttons={[
|
|
{ text: "Shop Now", href: "/shop" },
|
|
{ text: "Explore Flavors", href: "#flavors" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg?_wi=1"
|
|
imageAlt="Gourmet hot sauce bottle with chili peppers, minimalist style"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="card"
|
|
ariaLabel="Hero section with Pepper Peak logo and hot sauce bottle"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="The Art of Flavor"
|
|
description="Discover the perfect balance of heat and flavor. We meticulously craft our sauces from hand-picked chili peppers and all-natural ingredients, creating an unforgettable experience that elevates any meal."
|
|
tag="Our Story"
|
|
buttons={[{ text: "Learn More", href: "#story" }]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/side-close-up-view-vegetables-bowl-lentil-herbs-vegetables-spices-citrus-fruits-with-leaves_140725-73599.jpg"
|
|
imageAlt="Fresh chili peppers and spices on a rustic table"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About our hot sauce company"
|
|
/>
|
|
</div>
|
|
|
|
<div id="flavors" data-section="flavors">
|
|
<ProductCardOne
|
|
products={[
|
|
{ id: "mild-sauce", name: "Smokey Chipotle", price: "$12.99", imageSrc: "https://img.b2bpic.net/free-photo/pair-lime-herbal-soup_140725-4371.jpg", imageAlt: "Mild chipotle hot sauce bottle" },
|
|
{ id: "medium-sauce", name: "Fiery Habanero", price: "$13.99", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=1", imageAlt: "Medium habanero hot sauce bottle" },
|
|
{ id: "hot-sauce", name: "Ghost Pepper Blast", price: "$14.99", imageSrc: "https://img.b2bpic.net/free-photo/chili-sauce-bottle-peppers-dark-wooden-surface_1150-42209.jpg?_wi=1", imageAlt: "Hot ghost pepper sauce bottle" },
|
|
{ id: "extra-hot-sauce", name: "Carolina Reaper Fury", price: "$15.99", imageSrc: "https://img.b2bpic.net/free-photo/chili-sauce-bottle-peppers-dark-wooden-surface_1150-42209.jpg?_wi=2", imageAlt: "Extra hot carolina reaper sauce bottle" }
|
|
]}
|
|
title="Discover Our Fiery Flavors"
|
|
description="From a subtle kick to an intense inferno, find your perfect heat level."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
ariaLabel="Our hot sauce product range"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
testimonials={[
|
|
{ id: "1", name: "Chef Emily R.", handle: "@GourmetGrill", testimonial: "Pepper Peak sauces have revolutionized my kitchen. The depth of flavor is unmatched, and the heat is always just right! A true game-changer.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-waiter-carrying-tray-salad-restaurant_1170-2078.jpg?_wi=1", imageAlt: "Chef Emily R. avatar" },
|
|
{ id: "2", name: "Mark T.", handle: "@SpicyEats", testimonial: "I've tried countless hot sauces, but Pepper Peak stands out. The Fiery Habanero is my absolute favorite, perfect for everything!", imageSrc: "https://img.b2bpic.net/free-photo/dreams-young-woman-sitting-kitchen-looking-thoughtful_259150-57957.jpg?_wi=1", imageAlt: "Mark T. avatar" },
|
|
{ id: "3", name: "Sarah L.", handle: "@FoodieAdventures", testimonial: "Incredible quality and fantastic taste. Every bottle is a journey for your taste buds. Highly recommend the Smokey Chipotle!", imageSrc: "https://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg", imageAlt: "Sarah L. avatar" },
|
|
{ id: "4", name: "David K.", handle: "@HeatSeeker", testimonial: "As a heat-seeker, I can confidently say the Carolina Reaper Fury delivers. It's intensely hot but still packed with amazing flavor.", imageSrc: "https://img.b2bpic.net/free-photo/expressive-young-lady-posing-studio_176474-80630.jpg", imageAlt: "David K. avatar" },
|
|
{ id: "5", name: "Lisa M.", handle: "@FlavorFanatic", testimonial: "The variety is impressive, and each sauce tells its own story. Pepper Peak has earned a permanent spot in my pantry.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-waiter-carrying-tray-salad-restaurant_1170-2078.jpg?_wi=2", imageAlt: "Lisa M. avatar" },
|
|
{ id: "6", name: "James P.", handle: "@TasteBudTrek", testimonial: "From marinades to tacos, these sauces elevate every meal. Pure, delicious heat!", imageSrc: "https://img.b2bpic.net/free-photo/dreams-young-woman-sitting-kitchen-looking-thoughtful_259150-57957.jpg?_wi=2", imageAlt: "James P. avatar" }
|
|
]}
|
|
animationType="slide-up"
|
|
title="What Our Fans Are Saying"
|
|
description="Hear from food enthusiasts and chefs who've elevated their dishes with Pepper Peak hot sauce."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
ariaLabel="Customer testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta-feature" data-section="cta-feature">
|
|
<FeatureCardTwentyFive
|
|
features={[
|
|
{
|
|
title: "Crafted with Care", description: "Each bottle of Pepper Peak hot sauce is a testament to quality, made with meticulously sourced ingredients and traditional methods for unparalleled flavor.", icon: HeartCrack,
|
|
mediaItems: [
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=2", imageAlt: "Artisan hot sauce bottling process" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=3", imageAlt: "Selection of fresh chili peppers" }
|
|
]
|
|
},
|
|
{
|
|
title: "Unleash Your Inner Chef", description: "Elevate your culinary creations. Our diverse range of sauces inspires experimentation, turning everyday meals into gourmet experiences.", icon: Flame,
|
|
mediaItems: [
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=4", imageAlt: "Dish seasoned with hot sauce" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-various-sauces-glass-jars_181624-58324.jpg?_wi=5", imageAlt: "Gourmet food pairing with hot sauce" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="depth-3d"
|
|
title="Spice Up Your Life"
|
|
description="Discover the passion and quality in every drop of Pepper Peak."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Call to action features for hot sauce"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
faqs={[
|
|
{ id: "1", title: "What makes Pepper Peak sauces unique?", content: "Our sauces are unique due to our commitment to using only the freshest, high-quality chili peppers and natural ingredients. We prioritize complex flavor profiles over just heat." },
|
|
{ id: "2", title: "Are your hot sauces all-natural?", content: "Yes, all Pepper Peak hot sauces are made with 100% natural ingredients, with no artificial flavors, colors, or preservatives." },
|
|
{ id: "3", title: "Do you offer international shipping?", content: "Currently, we ship within the United States and Canada. We are working on expanding our international shipping options soon!" },
|
|
{ id: "4", title: "What's the best way to store hot sauce?", content: "For optimal freshness and flavor, store your hot sauce in a cool, dark place. Refrigeration after opening is recommended." }
|
|
]}
|
|
sideTitle="Burning Questions? We've Got Answers."
|
|
sideDescription="Find answers to the most common questions about our products and company."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
showCard={true}
|
|
ariaLabel="Frequently asked questions about hot sauce"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch With Pepper Peak"
|
|
description="Have a question, comment, or just want to share your favorite spicy recipe? We'd love to hear from you."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://img.b2bpic.net/free-photo/selective-focus-pasta-cereals-glass-jars_482257-82853.jpg"
|
|
imageAlt="Hot sauce bottles on a shelf"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
ariaLabel="Contact form"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg?_wi=2"
|
|
imageAlt="Hot sauce bottles background"
|
|
columns={[
|
|
{ title: "Shop", items: [{ label: "Hot Sauces", href: "#flavors" }, { label: "Bundles", href: "/bundles" }, { label: "Merchandise", href: "/merch" }] },
|
|
{ title: "Company", items: [{ label: "Our Story", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact Us", href: "#contact" }] },
|
|
{ title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
|
|
]}
|
|
logoText="Pepper Peak"
|
|
copyrightText="© 2024 Pepper Peak. All rights reserved."
|
|
ariaLabel="Site footer with navigation and hot sauce imagery"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|