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
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "About", id: "/#about" },
-                        { name: "Shop", id: "/shop" },
-                        { name: "Testimonials", id: "/#testimonials" },
-                        { name: "Contact", id: "/#contact" },
-                    ]}
-                    brandName="Angola"
-                    bottomLeftText="Experience the Beauty"
-                    bottomRightText="hello@angola.com"
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "About", id: "/#about" },
+                            { name: "Pricing", id: "/#pricing" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Team", id: "/#team" },
+                            { name: "Testimonials", id: "/#testimonials" },
+                            { name: "Contact", id: "/#contact" }
+                        ]}
+                        brandName="Angola"
+                        bottomLeftText="Experience the Beauty"
+                        bottomRightText="hello@angola.com"
+                    />
+                </div>
 
                 <main>
                     {isLoading ? (
@@ -61,34 +65,35 @@ export default function BlogPage() {
                     )}
                 </main>
 
-                <FooterMedia
-                    imageSrc="http://img.b2bpic.net/free-photo/beautiful-decoration-cute-little-dried-colorful-flowers-wallpaper_343596-3238.jpg?_wi=2"
-                    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: "FAQ", href: "/#faq" },
-                                { 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 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=2"
+                        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>
             </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 (
@@ -29,9 +31,11 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/#about" },
+            { name: "Pricing", id: "/#pricing" },
             { name: "Shop", id: "/shop" },
+            { name: "Team", id: "/#team" },
             { name: "Testimonials", id: "/#testimonials" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Contact", id: "/#contact" }
           ]}
           brandName="Angola"
           bottomLeftText="Experience the Beauty"
@@ -74,6 +78,30 @@ export default function LandingPage() {
         />
       </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"
@@ -167,7 +199,6 @@ export default function LandingPage() {
             {
               title: "Company",              items: [
                 { label: "About Us", href: "/#about" },
-                { label: "FAQ", href: "/#faq" },
                 { label: "Contact", href: "/#contact" },
               ],
             },

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

@@ -89,14 +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: "Team", id: "/#team" },
                             { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -129,14 +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: "Team", id: "/#team" },
                                 { name: "Testimonials", id: "/#testimonials" },
-                                { name: "Contact", id: "/#contact" },
+                                { name: "Contact", id: "/#contact" }
                             ]}
                             brandName="Angola"
                             bottomLeftText="Experience the Beauty"
@@ -176,14 +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: "Team", id: "/#team" },
                             { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -191,59 +197,60 @@ function ProductPageContent({ params }: ProductPageProps) {
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
-                <div id="product-detail-card" data-section="product-detail-card">
-                    <ProductDetailCard
-                        layout="page"
-                        name={product.name}
-                        price={product.price}
-                        salePrice={meta.salePrice}
-                        rating={product.rating || 0}
-                        description={product.description}
-                        images={images}
-                        variants={variants.length > 0 ? variants : undefined}
-                        quantity={quantityVariant}
-                        ribbon={meta.ribbon}
-                        inventoryStatus={meta.inventoryStatus}
-                        inventoryQuantity={meta.inventoryQuantity}
-                        sku={meta.sku}
-                        buttons={[
-                            { text: "Add To Cart", onClick: handleAddToCart },
-                            { text: "Buy Now", onClick: handleBuyNow },
-                        ]}
-                    />
-                </div>
-                <div id="product-cart" data-section="product-cart">
-                    <ProductCart
-                        isOpen={cartOpen}
-                        onClose={() => setCartOpen(false)}
-                        items={cartItems}
-                        onQuantityChange={updateQuantity}
-                        onRemove={removeItem}
-                        total={`$${cartTotal}`}
-                        buttons={[
-                            {
-                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
-                            },
-                        ]}
-                    />
-                </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=4"
-                        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: "FAQ", href: "/#faq" },
-                            { 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>
+                  <div id="product-detail-card" data-section="product-detail-card">
+                      <ProductDetailCard
+                          layout="page"
+                          name={product.name}
+                          price={product.price}
+                          salePrice={meta.salePrice}
+                          rating={product.rating || 0}
+                          description={product.description}
+                          images={images}
+                          variants={variants.length > 0 ? variants : undefined}
+                          quantity={quantityVariant}
+                          ribbon={meta.ribbon}
+                          inventoryStatus={meta.inventoryStatus}
+                          inventoryQuantity={meta.inventoryQuantity}
+                          sku={meta.sku}
+                          buttons={[
+                              { text: "Add To Cart", onClick: handleAddToCart },
+                              { text: "Buy Now", onClick: handleBuyNow },
+                          ]}
+                      />
+                  </div>
+                  <div id="product-cart" data-section="product-cart">
+                      <ProductCart
+                          isOpen={cartOpen}
+                          onClose={() => setCartOpen(false)}
+                          items={cartItems}
+                          onQuantityChange={updateQuantity}
+                          onRemove={removeItem}
+                          total={`$${cartTotal}`}
+                          buttons={[
+                              {
+                                  text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                              },
+                          ]}
+                      />
+                  </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=4"
+                          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/shop/page.tsx

@@ -32,14 +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: "Team", id: "/#team" },
                             { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -71,14 +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: "Team", id: "/#team" },
                             { name: "Testimonials", id: "/#testimonials" },
-                            { name: "Contact", id: "/#contact" },
+                            { name: "Contact", id: "/#contact" }
                         ]}
                         brandName="Angola"
                         bottomLeftText="Experience the Beauty"
@@ -86,34 +90,35 @@ function ShopPageContent() {
                         button={{ text: "Cart", onClick: () => {} }}
                     />
                 </div>
-                <div id="product-catalog" data-section="product-catalog">
-                <ProductCatalog
-                    layout="page"
-                    products={products}
-                    searchValue={search}
-                    onSearchChange={setSearch}
-                    searchPlaceholder="Search products..."
-                    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: "/#contact" }] },
-                           { title: "Company", items: [
-                            { label: "About Us", href: "/#about" },
-                            { label: "FAQ", href: "/#faq" },
-                            { 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."
+                <main>
+                  <div id="product-catalog" data-section="product-catalog">
+                    <ProductCatalog
+                        layout="page"
+                        products={products}
+                        searchValue={search}
+                        onSearchChange={setSearch}
+                        searchPlaceholder="Search products..."
+                        filters={filters}
+                        emptyMessage="No products found"
                     />
-                </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: #060000;;
-  --card: #1d0d0d;;
-  --foreground: #ffe6e6;;
-  --primary-cta: #ff3d4a;;
-  --secondary-cta: #1f0a0a;;
-  --accent: #7b2d2d;;
-  --background-accent: #b8111f;; */
+  /* --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #0a7039;;
+  --secondary-cta: #ffffff;;
+  --accent: #15479c;;
+  --background-accent: #a8cce8;; */
 
-  --background: #060000;;
-  --card: #1d0d0d;;
-  --foreground: #ffe6e6;;
-  --primary-cta: #ff3d4a;;
-  --primary-cta-text: #060000;;
-  --secondary-cta: #1f0a0a;;
-  --secondary-cta-text: #ffe6e6;;
-  --accent: #7b2d2d;;
-  --background-accent: #b8111f;;
+  --background: #f5faff;;
+  --card: #f1f8ff;;
+  --foreground: #001122;;
+  --primary-cta: #0a7039;;
+  --primary-cta-text: #f5faff;;
+  --secondary-cta: #ffffff;;
+  --secondary-cta-text: #001122;;
+  --accent: #15479c;;
+  --background-accent: #a8cce8;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);