Update src/app/styles/variables.css

Merge version_6 into main

src/app/blog/page.tsx

@@ -30,18 +30,22 @@ export default function BlogPage() {
             headingFontWeight="light"
         >
             <ReactLenis root>
-                <NavbarStyleFullscreen
+                <div id="nav" data-section="nav">
-                    navItems={[
+                    <NavbarStyleFullscreen
-                        { name: "Home", id: "/" },
+                        navItems={[
-                        { name: "About", id: "about" },
+                            { name: "Home", id: "/" },
-                        { name: "Shop", id: "products" },
+                            { name: "About", id: "/#about" },
-                        { name: "Testimonials", id: "testimonials" },
+                            { name: "Pricing", id: "/#pricing" },
-                        { name: "Contact", id: "contact" },
+                            { name: "Shop", id: "/shop" },
-                    ]}
+                            { name: "Team", id: "/#team" },
-                    brandName="Angola"
+                            { name: "Testimonials", id: "/#testimonials" },
-                    bottomLeftText="Experience the Beauty"
+                            { name: "Contact", id: "/#contact" }
-                    bottomRightText="hello@angola.com"
+                        ]}
-                />
+                        brandName="Angola"
+                        bottomLeftText="Experience the Beauty"
+                        bottomRightText="hello@angola.com"
+                    />
+                </div>
 
                 <main>
                     {isLoading ? (
@@ -61,34 +65,35 @@ export default function BlogPage() {
                     )}
                 </main>
 
-                <FooterMedia
+                <div id="footer" data-section="footer">
-                    imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=2"
+                    <FooterMedia
-                    imageAlt="Soft, blurred pastel flowers in a tranquil setting"
+                        imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=2"
-                    columns={[
+                        imageAlt="Soft, blurred pastel flowers in a tranquil setting"
-                        {
+                        columns={[
-                            title: "Shop",                            items: [
+                            {
-                                { label: "Bouquets", href: "#products" },
+                                title: "Shop",                                items: [
-                                { label: "Arrangements", href: "#products" },
+                                    { label: "Bouquets", href: "/shop" },
-                                { label: "Custom Orders", href: "#contact" },
+                                    { label: "Arrangements", href: "/shop" },
-                            ],
+                                    { label: "Custom Orders", href: "/#contact" },
-                        },
+                                ],
-                        {
+                            },
-                            title: "Company",                            items: [
+                            {
-                                { label: "About Us", href: "#about" },
+                                title: "Company",                                items: [
-                                { label: "FAQ", href: "#faq" },
+                                    { label: "About Us", href: "/#about" },
-                                { label: "Contact", href: "#contact" },
+                                    { label: "Contact", href: "/#contact" },
-                            ],
+                                ],
-                        },
+                            },
-                        {
+                            {
-                            title: "Connect",                            items: [
+                                title: "Connect",                                items: [
-                                { label: "Instagram", href: "https://instagram.com/angola_flowers" },
+                                    { label: "Instagram", href: "https://instagram.com/angola_flowers" },
-                                { label: "Facebook", href: "https://facebook.com/angola_flowers" },
+                                    { label: "Facebook", href: "https://facebook.com/angola_flowers" },
-                            ],
+                                ],
-                        },
+                            },
-                    ]}
+                        ]}
-                    logoText="Angola"
+                        logoText="Angola"
-                    copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
+                        copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
-                />
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/page.tsx

@@ -4,11 +4,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Shield, Users } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -27,11 +29,13 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "Home", id: "home" },
+            { name: "Home", id: "/" },
-            { name: "About", id: "about" },
+            { name: "About", id: "/#about" },
-            { name: "Shop", id: "products" },
+            { name: "Pricing", id: "/#pricing" },
-            { name: "Testimonials", id: "testimonials" },
+            { name: "Shop", id: "/shop" },
-            { name: "Contact", id: "contact" },
+            { name: "Team", id: "/#team" },
+            { name: "Testimonials", id: "/#testimonials" },
+            { name: "Contact", id: "/#contact" }
           ]}
           brandName="Angola"
           bottomLeftText="Experience the Beauty"
@@ -44,8 +48,8 @@ export default function LandingPage() {
           logoText="Angola"
           description="Crafting exquisite floral arrangements for every occasion, bringing beauty and joy to your special moments."
           buttons={[
-            { text: "Shop Now", href: "#products" },
+            { text: "Shop Now", href: "/shop" },
-            { text: "Our Story", href: "#about" },
+            { text: "Our Story", href: "/#about" },
           ]}
           slides={[
             {
@@ -67,13 +71,37 @@ export default function LandingPage() {
             "At Angola, we believe in the power of flowers to express emotions, celebrate milestones, and create unforgettable memories. Our studio is dedicated to sourcing the freshest, most beautiful blooms and transforming them into stunning works of art.",            "Every arrangement is crafted with meticulous care and a keen eye for design, ensuring that each bouquet tells its own unique story. We pour our heart into every petal, bringing beauty and elegance to your world."]}
           buttons={[
             { text: "Meet Our Team", href: "#team" },
-            { text: "Contact Us", href: "#contact" },
+            { text: "Contact Us", href: "/#contact" },
           ]}
           useInvertedBackground={false}
           showBorder={false}
         />
       </div>
 
+      <div id="pricing" data-section="pricing">
+        <PricingCardOne
+          title="Choose Your Perfect Plan"
+          description="Unlock the full potential with our flexible pricing options."
+          plans={[
+            {
+              id: "1",              badge: "Basic",              badgeIcon: Shield,
+              price: "$19/mo",              subtitle: "Perfect for individuals",              features: ["5 Users", "50GB Storage", "Email Support"],
+            },
+            {
+              id: "2",              badge: "Pro",              badgeIcon: Shield,
+              price: "$49/mo",              subtitle: "Ideal for small teams",              features: ["20 Users", "200GB Storage", "Priority Support"],
+            },
+            {
+              id: "3",              badge: "Enterprise",              badgeIcon: Shield,
+              price: "$99/mo",              subtitle: "For growing businesses",              features: ["Unlimited Users", "1TB Storage", "24/7 Support"],
+            },
+          ]}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="products" data-section="products">
         <ProductCardFour
           title="Featured Floral Collections"
@@ -111,26 +139,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="faq" data-section="faq">
-        <FaqBase
-          title="Frequently Asked Questions"
-          description="Find answers to common questions about our services, flower care, and ordering process."
-          faqs={[
-            {
-              id: "1",              title: "What is your delivery policy?",              content: "We offer local delivery within a 20-mile radius of our studio. Same-day delivery is available for orders placed before 12 PM local time, Monday-Saturday."},
-            {
-              id: "2",              title: "How do I care for my fresh flowers?",              content: "For optimal freshness, trim stems at an angle, change water daily, and keep flowers away from direct sunlight and heat sources. A packet of flower food is included with every order."},
-            {
-              id: "3",              title: "Can I request a custom bouquet?",              content: "Absolutely! We specialize in custom designs. Please contact us directly to discuss your vision, preferred flowers, colors, and budget. We'd love to bring your unique floral ideas to life."},
-            {
-              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, Amex), PayPal, and Apple Pay for online orders. In-studio purchases can also be made with cash."},
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          faqsAnimation="slide-up"
-        />
-      </div>
-
       <div id="contact" data-section="contact">
         <ContactSplitForm
           title="Get in Touch with Our Floral Experts"
@@ -152,6 +160,30 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="team" data-section="team">
+        <TeamCardOne
+          title="Meet Our Talented Team"
+          description="Dedicated to bringing your floral visions to life."
+          members={[
+            {
+              id: "1",              name: "Sarah Johnson",              role: "Founder",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-outside_23-2148135804.jpg",              imageAlt: "Portrait of Sarah Johnson"
+            },
+            {
+              id: "2",              name: "Michael Chen",              role: "Lead Designer",              imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-guy-posing-white-t-shirt_273609-17367.jpg",              imageAlt: "Portrait of Michael Chen"
+            },
+            {
+              id: "3",              name: "Emily White",              role: "Event Specialist",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-african-american-young-woman_23-2148737271.jpg",              imageAlt: "Portrait of Emily White"
+            },
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          tag="Our Experts"
+          tagIcon={Users}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=1"
@@ -159,16 +191,15 @@ export default function LandingPage() {
           columns={[
             {
               title: "Shop",              items: [
-                { label: "Bouquets", href: "#products" },
+                { label: "Bouquets", href: "/shop" },
-                { label: "Arrangements", href: "#products" },
+                { label: "Arrangements", href: "/shop" },
-                { label: "Custom Orders", href: "#contact" },
+                { label: "Custom Orders", href: "/#contact" },
               ],
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/#about" },
-                { label: "FAQ", href: "#faq" },
+                { label: "Contact", href: "/#contact" },
-                { label: "Contact", href: "#contact" },
               ],
             },
             {

src/app/shop/[id]/page.tsx

@@ -89,12 +89,16 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="light"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={[
                             { name: "Home", id: "/" },
+                            { name: "About", id: "/#about" },
+                            { name: "Pricing", id: "/#pricing" },
                             { name: "Shop", id: "/shop" },
-                            { name: "Contact", id: "/contacts" }
+                            { name: "Team", id: "/#team" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -127,12 +131,16 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="light"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
                             navItems={[
                                 { name: "Home", id: "/" },
+                                { name: "About", id: "/#about" },
+                                { name: "Pricing", id: "/#pricing" },
                                 { name: "Shop", id: "/shop" },
-                                { name: "Contact", id: "/contacts" }
+                                { name: "Team", id: "/#team" },
+                                { name: "Testimonials", id: "/#testimonials" },
+                                { name: "Contact", id: "/#contact" }
                             ]}
                             brandName="Angola"
                             bottomLeftText="Experience the Beauty"
@@ -172,12 +180,16 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="light"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={[
                             { name: "Home", id: "/" },
+                            { name: "About", id: "/#about" },
+                            { name: "Pricing", id: "/#pricing" },
                             { name: "Shop", id: "/shop" },
-                            { name: "Contact", id: "/contacts" }
+                            { name: "Team", id: "/#team" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -185,55 +197,60 @@ function ProductPageContent({ params }: ProductPageProps) {
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
-                <div id="product-detail-card" data-section="product-detail-card">
+                <main>
-                    <ProductDetailCard
+                  <div id="product-detail-card" data-section="product-detail-card">
-                        layout="page"
+                      <ProductDetailCard
-                        name={product.name}
+                          layout="page"
-                        price={product.price}
+                          name={product.name}
-                        salePrice={meta.salePrice}
+                          price={product.price}
-                        rating={product.rating || 0}
+                          salePrice={meta.salePrice}
-                        description={product.description}
+                          rating={product.rating || 0}
-                        images={images}
+                          description={product.description}
-                        variants={variants.length > 0 ? variants : undefined}
+                          images={images}
-                        quantity={quantityVariant}
+                          variants={variants.length > 0 ? variants : undefined}
-                        ribbon={meta.ribbon}
+                          quantity={quantityVariant}
-                        inventoryStatus={meta.inventoryStatus}
+                          ribbon={meta.ribbon}
-                        inventoryQuantity={meta.inventoryQuantity}
+                          inventoryStatus={meta.inventoryStatus}
-                        sku={meta.sku}
+                          inventoryQuantity={meta.inventoryQuantity}
-                        buttons={[
+                          sku={meta.sku}
-                            { text: "Add To Cart", onClick: handleAddToCart },
+                          buttons={[
-                            { text: "Buy Now", onClick: handleBuyNow },
+                              { text: "Add To Cart", onClick: handleAddToCart },
-                        ]}
+                              { text: "Buy Now", onClick: handleBuyNow },
-                    />
+                          ]}
-                </div>
+                      />
-                <div id="product-cart" data-section="product-cart">
+                  </div>
-                    <ProductCart
+                  <div id="product-cart" data-section="product-cart">
-                        isOpen={cartOpen}
+                      <ProductCart
-                        onClose={() => setCartOpen(false)}
+                          isOpen={cartOpen}
-                        items={cartItems}
+                          onClose={() => setCartOpen(false)}
-                        onQuantityChange={updateQuantity}
+                          items={cartItems}
-                        onRemove={removeItem}
+                          onQuantityChange={updateQuantity}
-                        total={`$${cartTotal}`}
+                          onRemove={removeItem}
-                        buttons={[
+                          total={`$${cartTotal}`}
-                            {
+                          buttons={[
-                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                              {
-                            },
+                                  text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
-                        ]}
+                              },
-                    />
+                          ]}
-                </div>
+                      />
-                <div id="footer" data-section="footer">
+                  </div>
-                    <FooterMedia
+                  <div id="footer" data-section="footer">
-                        imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=4"
+                      <FooterMedia
-                        imageAlt="Soft, blurred pastel flowers in a tranquil setting"
+                          imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=4"
-                        columns={[
+                          imageAlt="Soft, blurred pastel flowers in a tranquil setting"
-                           { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Arrangements", href: "/shop" }, { label: "Custom Orders", href: "/contacts" }] },
+                          columns={[
-                           { title: "Company", items: [{ label: "About Us", href: "/" }, { label: "FAQ", href: "/" }, { label: "Contact", href: "/contacts" }] },
+                             { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Arrangements", href: "/shop" }, { label: "Custom Orders", href: "/#contact" }] },
-                           { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com/angola_flowers" }, { label: "Facebook", href: "https://facebook.com/angola_flowers" }] }
+                             { title: "Company", items: [
-                        ]}
+                              { label: "About Us", href: "/#about" },
-                        logoText="Angola"
+                              { label: "Contact", href: "/#contact" }
-                        copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
+                             ] },
-                    />
+                             { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com/angola_flowers" }, { label: "Facebook", href: "https://facebook.com/angola_flowers" }] }
-                </div>
+                          ]}
+                          logoText="Angola"
+                          copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
+                      />
+                  </div>
+                </main>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/shop/page.tsx

@@ -32,12 +32,16 @@ function ShopPageContent() {
                 headingFontWeight="light"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={[
                             { name: "Home", id: "/" },
+                            { name: "About", id: "/#about" },
+                            { name: "Pricing", id: "/#pricing" },
                             { name: "Shop", id: "/shop" },
-                            { name: "Contact", id: "/contacts" }
+                            { name: "Team", id: "/#team" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -69,12 +73,16 @@ function ShopPageContent() {
             headingFontWeight="light"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={[
                             { name: "Home", id: "/" },
+                            { name: "About", id: "/#about" },
+                            { name: "Pricing", id: "/#pricing" },
                             { name: "Shop", id: "/shop" },
-                            { name: "Contact", id: "/contacts" }
+                            { name: "Team", id: "/#team" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -82,30 +90,35 @@ function ShopPageContent() {
                         button={{ text: "Cart", onClick: () => {} }}
                     />
                 </div>
-                <div id="product-catalog" data-section="product-catalog">
+                <main>
-                <ProductCatalog
+                  <div id="product-catalog" data-section="product-catalog">
-                    layout="page"
+                    <ProductCatalog
-                    products={products}
+                        layout="page"
-                    searchValue={search}
+                        products={products}
-                    onSearchChange={setSearch}
+                        searchValue={search}
-                    searchPlaceholder="Search products..."
+                        onSearchChange={setSearch}
-                    filters={filters}
+                        searchPlaceholder="Search products..."
-                    emptyMessage="No products found"
+                        filters={filters}
-                />
+                        emptyMessage="No products found"
-                </div>
-                <div id="footer" data-section="footer">
-                    <FooterMedia
-                        imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=3"
-                        imageAlt="Soft, blurred pastel flowers in a tranquil setting"
-                        columns={[
-                           { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Arrangements", href: "/shop" }, { label: "Custom Orders", href: "/contacts" }] },
-                           { title: "Company", items: [{ label: "About Us", href: "/" }, { label: "FAQ", href: "/" }, { label: "Contact", href: "/contacts" }] },
-                           { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com/angola_flowers" }, { label: "Facebook", href: "https://facebook.com/angola_flowers" }] }
-                        ]}
-                        logoText="Angola"
-                        copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
                     />
-                </div>
+                  </div>
+                  <div id="footer" data-section="footer">
+                      <FooterMedia
+                          imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=3"
+                          imageAlt="Soft, blurred pastel flowers in a tranquil setting"
+                          columns={[
+                             { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Arrangements", href: "/shop" }, { label: "Custom Orders", href: "/#contact" }] },
+                             { title: "Company", items: [
+                              { label: "About Us", href: "/#about" },
+                              { label: "Contact", href: "/#contact" }
+                             ] },
+                             { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com/angola_flowers" }, { label: "Facebook", href: "https://facebook.com/angola_flowers" }] }
+                          ]}
+                          logoText="Angola"
+                          copyrightText="© 2024 Angola Flowers Studio. All rights reserved."
+                      />
+                  </div>
+                </main>
             </ReactLenis>
         </ThemeProvider>
     );

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
+  /* --background: #f5faff;;
-  --card: #f9f9f9;;
+  --card: #f1f8ff;;
-  --foreground: #120006e6;;
+  --foreground: #001122;;
-  --primary-cta: #e63946;;
+  --primary-cta: #0a7039;;
-  --secondary-cta: #f9f9f9;;
+  --secondary-cta: #ffffff;;
-  --accent: #e2e2e2;;
+  --accent: #15479c;;
-  --background-accent: #c4c4c4;; */
+  --background-accent: #a8cce8;; */
 
-  --background: #ffffff;;
+  --background: #f5faff;;
-  --card: #f9f9f9;;
+  --card: #f1f8ff;;
-  --foreground: #120006e6;;
+  --foreground: #001122;;
-  --primary-cta: #e63946;;
+  --primary-cta: #0a7039;;
-  --primary-cta-text: #ffffff;;
+  --primary-cta-text: #f5faff;;
-  --secondary-cta: #f9f9f9;;
+  --secondary-cta: #ffffff;;
-  --secondary-cta-text: #120006e6;;
+  --secondary-cta-text: #001122;;
-  --accent: #e2e2e2;;
+  --accent: #15479c;;
-  --background-accent: #c4c4c4;;
+  --background-accent: #a8cce8;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);