Merge version_9 into main

Merge version_9 into main

src/app/layout.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
   title: "Pepper Peak | Gourmet Hot Sauce Company",  description: "Experience the peak of flavor with Pepper Peak's gourmet hot sauces. Crafted with passion from the finest chili peppers for an unforgettable culinary experience.",  openGraph: {
     title: "Pepper Peak Gourmet Hot Sauce",    description: "Crafted with passion, bottled with fire. Experience the peak of flavor with our gourmet hot sauces.",    url: "https://www.pepperpeak.com",    siteName: "Pepper Peak",    images: [
       {
-        url: "https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg",        alt: "Gourmet hot sauce bottle with chili peppers"},
+        url: "https://img.b2bpic.net/free-photo/chili-sauce-peppers-dark-wooden-surface_1150-42161.jpg",        alt: "Gourmet hot sauce bottle with chili peppers"}
     ],
   },
   twitter: {
@@ -1404,4 +1404,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -3,14 +3,14 @@
 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 HeroLogo from '@/components/sections/hero/HeroLogo';
 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';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function LandingPage() {
   return (
@@ -30,27 +30,28 @@ export default function LandingPage() {
         <NavbarStyleApple
           brandName="Pepper Peak"
           navItems={[
-            { name: "About", id: "about" },
-            { name: "Flavors", id: "flavors" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "About", id: "#about" },
+            { name: "Flavors", id: "#flavors" },
+            { name: "Testimonials", id: "#testimonials" },
+            { name: "Contact", id: "#contact" },
+            { name: "Privacy Policy", id: "/privacy" },
+            { name: "Terms of Service", id: "/terms" }
           ]}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
+        <HeroLogo
           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"
+          buttonAnimation="blur-reveal"
+          showDimOverlay={true}
           ariaLabel="Hero section with Pepper Peak logo and hot sauce bottle"
         />
       </div>
@@ -58,7 +59,7 @@ export default function LandingPage() {
       <div id="about" data-section="about">
         <MediaAbout
           title="The Art of Flavor"
-          description="At Pepper Peak, we believe in the perfect blend of heat and taste. Our sauces are meticulously crafted from the finest, hand-picked chili peppers and natural ingredients, delivering an unforgettable culinary experience that elevates every dish."
+          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"
@@ -71,10 +72,10 @@ export default function LandingPage() {
       <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" }
+            { id: "mild-sauce", name: "Smokey Chipotle", price: "$12.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/smoky-pepper-hot-1771593988177-90862242.png", imageAlt: "Mild chipotle hot sauce bottle" },
+            { id: "medium-sauce", name: "Fiery Habanero", price: "$13.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/habanero-1771593959884-62a7f9cb.png", imageAlt: "Medium habanero hot sauce bottle" },
+            { id: "hot-sauce", name: "Ghost Pepper Blast", price: "$14.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/ghost-pepper-1771594304332-ae1dba58.png", imageAlt: "Hot ghost pepper sauce bottle" },
+            { id: "extra-hot-sauce", name: "Carolina Reaper Fury", price: "$15.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/carolina-reaper-1771593730563-90c00cbc.png", 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."
@@ -90,9 +91,9 @@ export default function LandingPage() {
         <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: "2", name: "Mark T.", handle: "@SpicyEats", testimonial: "I've tried countless hot sauces, but Pepper Peak's are definitely the hottest and most flavorful! The Fiery Habanero is my absolute favorite.", 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: "4", name: "David K.", handle: "@HeatSeeker", testimonial: "As a true heat-seeker, I can confidently say Pepper Peak delivers the hottest sauces out there. The Carolina Reaper Fury is not just intensely hot, it's packed with amazing flavor too.", 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" }
           ]}
@@ -113,14 +114,14 @@ export default function LandingPage() {
               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" }
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/jar-of-hot-sause-1771594380756-f2ae1fac.png", 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" }
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/jar-of-hot-sause-1771594468564-e8d86109.png", imageAlt: "Dish seasoned with hot sauce" },
+                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/tmp/jar-of-flamable-hot-sause-1771594878421-660036df.png", imageAlt: "Gourmet food pairing with hot sauce" }
               ]
             }
           ]}
@@ -172,19 +173,17 @@ export default function LandingPage() {
       </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"
+        <FooterBaseCard
           columns={[
-            { title: "Shop", items: [{ label: "Hot Sauces", href: "#flavors" }, { label: "Bundles", href: "/bundles" }, { label: "Merchandise", href: "/merch" }] },
+            { title: "Shop", items: [{ label: "Hot Sauces", href: "#flavors" }] },
             { 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"
+          ariaLabel="Site footer with navigation"
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/privacy/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import LegalSection from '@/components/legal/LegalSection';
+
+export default function PrivacyPage() {
+  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" },
+            { name: "Privacy Policy", id: "/privacy" },
+            { name: "Terms of Service", id: "/terms" }
+          ]}
+        />
+      </div>
+      <div id="privacy-policy" data-section="privacy-policy">
+        <LegalSection
+          layout="page"
+          title="Privacy Policy"
+          subtitle="Last updated: January 15, 2025"
+          sections={[
+            { heading: "1. Information We Collect", content: [{ type: "paragraph", text: "We collect various types of information in connection with the services we provide, including personal data you voluntarily provide and data collected automatically." }, { type: "list", items: ["Personal identification information (Name, email address, phone number, etc.)", "Usage data (IP address, browser type, pages visited, etc.)", "Transaction data (purchase history, payment method, etc.)"] }] },
+            { heading: "2. How We Use Your Information", content: [{ type: "paragraph", text: "We use the information we collect to provide, maintain, and improve our services, process transactions, send marketing communications, and for security purposes." }, { type: "numbered-list", items: ["To process and fulfill your orders and requests.", "To communicate with you about products, services, offers, and promotions.", "To analyze and understand how you use our services to enhance user experience.", "To detect and prevent fraud and other malicious activities."] }] },
+            { heading: "3. Sharing Your Information", content: [{ type: "paragraph", text: "We do not sell your personal data to third parties. We may share your information with trusted third-party service providers who assist us in operating our website, conducting our business, or serving our users, so long as those parties agree to keep this information confidential." }] },
+            { heading: "4. Your Data Protection Rights", content: [{ type: "paragraph", text: "You have certain rights regarding your personal data, including the right to access, correct, or delete your information. Please contact us to exercise these rights." }] }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #250c0d;;
-  --primary-cta: #b82b40;;
-  --secondary-cta: #ffffff;;
-  --accent: #b90941;;
-  --background-accent: #e8a8b6;; */
+  /* --background: #060000;;;
+  --card: #1d0d0d;;;
+  --foreground: #ffe6e6;;;
+  --primary-cta: #ff3d4a;;;
+  --secondary-cta: #1f0a0a;;;
+  --accent: #7b2d2d;;;
+  --background-accent: #b8111f;;; */
 
-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #250c0d;;
-  --primary-cta: #b82b40;;
-  --secondary-cta: #ffffff;;
-  --accent: #b90941;;
-  --background-accent: #e8a8b6;;
+  --background: #060000;;;
+  --card: #1d0d0d;;;
+  --foreground: #ffe6e6;;;
+  --primary-cta: #ff3d4a;;;
+  --secondary-cta: #1f0a0a;;;
+  --accent: #7b2d2d;;;
+  --background-accent: #b8111f;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/terms/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import LegalSection from '@/components/legal/LegalSection';
+
+export default function TermsPage() {
+  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" },
+            { name: "Privacy Policy", id: "/privacy" },
+            { name: "Terms of Service", id: "/terms" }
+          ]}
+        />
+      </div>
+      <div id="terms-of-service" data-section="terms-of-service">
+        <LegalSection
+          layout="page"
+          title="Terms of Service"
+          subtitle="Last updated: January 15, 2025"
+          sections={[
+            { heading: "1. Acceptance of Terms", content: [{ type: "paragraph", text: "By accessing and using our website and services, you accept and agree to be bound by the terms and provisions of this agreement. If you do not agree to abide by the above, please do not use this service." }] },
+            { heading: "2. Use of Service", content: [{ type: "paragraph", text: "Our services are provided for your personal and non-commercial use. You agree not to use the service for any illegal or unauthorized purpose." }] },
+            { heading: "3. User Accounts", content: [{ type: "paragraph", text: "If you create an account on our website, you are responsible for maintaining the security of your account and you are fully responsible for all activities that occur under the account and any other actions taken in connection with the account." }] },
+            { heading: "4. Intellectual Property", content: [{ type: "paragraph", text: "The service and its original content (excluding content provided by users), features, and functionality are and will remain the exclusive property of Pepper Peak and its licensors." }] },
+            { heading: "5. Limitation of Liability", content: [{ type: "paragraph", text: "In no event shall Pepper Peak, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or use of or inability to access or use the Service." }] }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}