Update src/app/contact/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -4,7 +4,7 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
+import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function BlogPage() {
@@ -29,12 +29,11 @@ export default function BlogPage() {
                         brandName="Balka Flowers"
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "About", id: "about" },
-                            { name: "Products", id: "products" },
-                            { name: "Testimonials", id: "testimonials" },
-                            { name: "Contact", id: "contact" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Contact", id: "/contact" }
                         ]}
-                        button={{ text: "Shop Now", href: "#products" }}
+                        button={{ text: "Shop Now", href: "/shop" }}
                         className="py-4 px-6 md:px-8"
                         navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                         buttonClassName="px-5 py-2"
@@ -48,7 +47,7 @@ export default function BlogPage() {
                         </div>
                     ) : (
                         <div id="blog" data-section="blog">
-                            <BlogCardTwo
+                            <BlogCardOne
                                 blogs={posts}
                                 title="Latest Articles"
                                 description="Insights and updates from our team"
@@ -66,27 +65,25 @@ export default function BlogPage() {
                             columns={[
                                 {
                                     title: "Shop",                                    items: [
-                                        { label: "Bouquets", href: "#products" },
-                                        { label: "Events", href: "#contact" },
-                                        { label: "Custom Orders", href: "#contact" },
+                                        { label: "Bouquets", href: "/shop" },
+                                        { label: "Events", href: "/contact" },
+                                        { label: "Custom Orders", href: "/contact" },
                                     ],
                                 },
                                 {
                                     title: "Company",                                    items: [
-                                        { label: "About Us", href: "#about" },
-                                        { label: "Testimonials", href: "#testimonials" },
-                                        { label: "Blog", href: "/blog" },
+                                        { label: "About Us", href: "/#about" },
+                                        { label: "Testimonials", href: "/#testimonials" },                                        { label: "Blog", href: "/blog" },
                                     ],
                                 },
                                 {
                                     title: "Support",                                    items: [
-                                        { label: "FAQ", href: "#contact" },
-                                        { label: "Contact", href: "#contact" },
+                                        { label: "FAQ", href: "/contact" },
+                                        { label: "Contact", href: "/contact" },
                                     ],
                                 },
                             ]}
                             copyrightText="© 2024 Balka Flowers. All rights reserved."
-                            onPrivacyClick={null}
                             className="py-16 md:py-24"
                             cardClassName="bg-card rounded-soft shadow-lg"
                             logoTextClassName="text-foreground text-4xl font-bold"

src/app/contact/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="glass-depth"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            brandName="Balka Flowers"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Blog", id: "/blog" },
+              { name: "Shop", id: "/shop" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            button={{ text: "Shop Now", href: "/shop" }}
+            className="py-4 px-6 md:px-8"
+            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
+            buttonClassName="px-5 py-2"
+            buttonTextClassName="font-semibold"
+          />
+        </div>
+
+        <div id="contact-main" data-section="contact-main">
+          <ContactSplitForm
+            title="We'd love to hear from you."
+            description="Whether you have a custom order request, an event inquiry, or just want to say hello, our team is ready to assist you."
+            inputs={[
+              { name: 'name', type: 'text', placeholder: 'Name', required: true },
+              { name: 'email', type: 'email', placeholder: 'Email', required: true },
+            ]}
+            textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }}
+            useInvertedBackground={false}
+            videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1771684785214-9g6egt6v.mp4"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            buttonText="Send Message"
+            onSubmit={(data) => console.log("Contact form submitted with data:", data)}
+            ariaLabel="Contact section"
+            className="py-16 md:py-24"
+            containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
+            formCardClassName="bg-card rounded-soft shadow-lg p-8"
+            titleClassName="text-foreground text-4xl md:text-5xl font-bold mb-4"
+            descriptionClassName="text-foreground/80 text-lg md:text-xl mb-8"
+            buttonClassName="primary-button px-6 py-3"
+            buttonTextClassName="font-semibold"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="Balka Flowers"
+            columns={[
+              { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Blog", href: "/blog" }] },
+              { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] },
+            ]}
+            copyrightText="© 2024 Balka Flowers. All rights reserved."
+            className="py-16 md:py-24"
+            cardClassName="bg-card rounded-soft shadow-lg"
+            logoTextClassName="text-foreground text-4xl font-bold"
+            columnTitleClassName="text-foreground text-xl font-semibold"
+            columnItemClassName="text-foreground/70 hover:text-primary-cta transition-colors"
+            copyrightTextClassName="text-foreground/50 text-sm"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,13 +28,12 @@ export default function LandingPage() {
         <NavbarLayoutFloatingInline
           brandName="Balka Flowers"
           navItems={[
-            { name: "Home", id: "hero" },
-            { name: "About", id: "about" },
-            { name: "Products", id: "products" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
+            { name: "Contact", id: "/contact" }
           ]}
-          button={{ text: "Shop Now", href: "#products" }}
+          button={{ text: "Shop Now", href: "/shop" }}
           className="py-4 px-6 md:px-8"
           navItemClassName="text-foreground hover:text-primary-cta transition-colors"
           buttonClassName="px-5 py-2"
@@ -51,7 +50,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           buttons={[
             { text: "Explore Collections", href: "#products" },
-            { text: "Contact Us", href: "#contact" },
+            { text: "Contact Us", href: "/contact" },
           ]}
           buttonAnimation="slide-up"
           mediaItems={[
@@ -78,10 +77,10 @@ export default function LandingPage() {
         <TextSplitAbout
           title="Our Passion for Flowers"
           description={[
-            "At Balka, we believe in the power of flowers to transform spaces and convey emotions. Our studio is dedicated to sourcing the freshest blooms and creating bespoke arrangements that tell your unique story. From elegant bouquets to grand event decor, every creation is a testament to our artistry and attention to detail.",            "We are a team of passionate florists committed to sustainable practices and unparalleled customer service. With years of experience, we've cultivated a reputation for excellence, ensuring every order from Balka Flowers brings joy and beauty to your life."]}
+            "At Balka, we believe in the power of flowers to transform spaces and convey emotions. Our studio is dedicated to sourcing the freshest blooms and creating bespoke arrangements that tell your unique story. From elegant bouquets to grand event decor, every creation is a testament to our artistry and attention to detail.",            "We are a team of passionate florists committed to sustainable practices and unparalleled customer service. With years of experience, we've cultivated a reputation for excellence, ensuring every order from Balka Flowers brings joy and beauty to your life." ]}
           useInvertedBackground={false}
           showBorder={true}
-          buttons={[{ text: "Learn More About Us", href: "#contact" }]}
+          buttons={[{ text: "Learn More About Us", href: "/contact" }]}
           buttonAnimation="slide-up"
           className="py-16 md:py-24"
           containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
@@ -133,7 +132,7 @@ export default function LandingPage() {
           testimonials={[
             { id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Balka Flowers created the most breathtaking bouquet for my wedding day. Absolutely stunning and perfect in every way!", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Sarah Johnson" },
             { id: "2", name: "David Chen", handle: "@davidc", testimonial: "I ordered a custom arrangement for my anniversary, and it exceeded all expectations. The flowers were fresh and beautifully presented.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "David Chen" },
-            { id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "The team at Balka is incredibly talented and helpful. They captured my vision perfectly for a corporate event. Highly recommend!", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/caucasian-florist-woman-inside-flower-shop_53876-26300.jpg", imageAlt: "Emily Rodriguez" },
+            { id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "The team at Balka is incredibly talented and helpful. They captured my vision perfectly for a corporate event. Highly recommend!", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/caucasian-florist-woman-inside-flower-shop_53876-26300.jpg?_wi=1", imageAlt: "Emily Rodriguez" },
             { id: "4", name: "Michael Kim", handle: "@michaelk", testimonial: "Exceptional quality and service every time. Balka Flowers is my go-to for all my floral needs. Always a delightful experience.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/healthy-lifestyle-sustained-home_23-2149362443.jpg", imageAlt: "Michael Kim" },
           ]}
           className="py-16 md:py-24"
@@ -186,9 +185,9 @@ export default function LandingPage() {
         <FooterBaseCard
           logoText="Balka Flowers"
           columns={[
-            { title: "Shop", items: [{ label: "Bouquets", href: "#products" }, { label: "Events", href: "#contact" }, { label: "Custom Orders", href: "#contact" }] },
-            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Blog", href: "/blog" }] },
-            { title: "Support", items: [{ label: "FAQ", href: "#contact" }, { label: "Contact", href: "#contact" }] },
+            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
+            { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Blog", href: "/blog" }] },
+            { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] },
           ]}
           copyrightText="© 2024 Balka Flowers. All rights reserved."
           className="py-16 md:py-24"

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

@@ -92,7 +92,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                            brandName="Balka Flowers"
-                           navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}
                            className="py-4 px-6 md:px-8"
                            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                            buttonClassName="px-5 py-2"
@@ -126,7 +126,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                            brandName="Balka Flowers"
-                           navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                           navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}
                            className="py-4 px-6 md:px-8"
                            navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                            buttonClassName="px-5 py-2"
@@ -167,7 +167,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
                         brandName="Balka Flowers"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}
                         className="py-4 px-6 md:px-8"
                         navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                         buttonClassName="px-5 py-2"
@@ -215,9 +215,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <FooterBaseCard 
                         logoText="Balka Flowers"
                         columns={[
-                            { title: "Shop", items: [{ label: "Bouquets", href: "#products" }, { label: "Events", href: "#contact" }, { label: "Custom Orders", href: "#contact" }] },
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Blog", href: "/blog" }] },
-                            { title: "Support", items: [{ label: "FAQ", href: "#contact" }, { label: "Contact", href: "#contact" }] }
+                            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
+                            { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Blog", href: "/blog" }] },
+                            { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] }
                         ]}
                         copyrightText="© 2024 Balka Flowers. All rights reserved."
                         className="py-16 md:py-24"

src/app/shop/page.tsx

@@ -59,7 +59,7 @@ function ShopPageContent() {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
                             brandName="Balka Flowers"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}
                             className="py-4 px-6 md:px-8"
                             navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                             buttonClassName="px-5 py-2"
@@ -92,7 +92,7 @@ function ShopPageContent() {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
                         brandName="Balka Flowers"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]}
                         className="py-4 px-6 md:px-8"
                         navItemClassName="text-foreground hover:text-primary-cta transition-colors"
                         buttonClassName="px-5 py-2"
@@ -130,9 +130,9 @@ function ShopPageContent() {
                     <FooterBaseCard 
                         logoText="Balka Flowers"
                         columns={[
-                            { title: "Shop", items: [{ label: "Bouquets", href: "#products" }, { label: "Events", href: "#contact" }, { label: "Custom Orders", href: "#contact" }] },
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Blog", href: "/blog" }] },
-                            { title: "Support", items: [{ label: "FAQ", href: "#contact" }, { label: "Contact", href: "#contact" }] }
+                            { title: "Shop", items: [{ label: "Bouquets", href: "/shop" }, { label: "Events", href: "/contact" }, { label: "Custom Orders", href: "/contact" }] },
+                            { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Blog", href: "/blog" }] },
+                            { title: "Support", items: [{ label: "FAQ", href: "/contact" }, { label: "Contact", href: "/contact" }] }
                         ]}
                         copyrightText="© 2024 Balka Flowers. All rights reserved."
                         className="py-16 md:py-24"

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
+  /* --background: #fdfdff;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  --foreground: #2a0f3d;;
+  --primary-cta: #e63946;;
+  --secondary-cta: #d1c4e9;;
+  --accent: #8b5cf6;;
+  --background-accent: #f8f0ff;; */
 
-  --background: #f5f5f5;;
+  --background: #fdfdff;;
   --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
+  --foreground: #2a0f3d;;
+  --primary-cta: #e63946;;
   --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #d1c4e9;;
   --secondary-cta-text: #1c1c1c;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --accent: #8b5cf6;;
+  --background-accent: #f8f0ff;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);