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() {
@@ -30,6 +30,7 @@ export default function BlogPage() {
                         navItems={[
                             { name: "Home", id: "/" },
                             { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
                             { name: "Contact", id: "/contact" }
                         ]}
                         button={{ text: "Shop Now", href: "/shop" }}
@@ -46,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"

src/app/contact/page.tsx

@@ -3,9 +3,8 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Mail } from 'lucide-react';
 
 export default function ContactPage() {
   return (
@@ -28,6 +27,7 @@ export default function ContactPage() {
             navItems={[
               { name: "Home", id: "/" },
               { name: "Blog", id: "/blog" },
+              { name: "Shop", id: "/shop" },
               { name: "Contact", id: "/contact" }
             ]}
             button={{ text: "Shop Now", href: "/shop" }}
@@ -39,29 +39,28 @@ export default function ContactPage() {
         </div>
 
         <div id="contact-main" data-section="contact-main">
-          <ContactCenter
-            tag="Get in Touch"
+          <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."
-            tagIcon={Mail}
-            inputPlaceholder="Your email address"
-            buttonText="Send Message"
-            termsText="By sending a message you're confirming that you agree with our Privacy Policy."
-            onSubmit={(email) => console.log("Contact form submitted with email:", email)}
-            background={{ variant: "plain" }}
+            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-md mx-auto px-6 md:px-8"
-            contentClassName="bg-card rounded-soft shadow-lg p-8"
-            tagClassName="text-primary-cta text-sm font-semibold uppercase tracking-wider"
+            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"
-            formWrapperClassName="mt-8"
-            formClassName="flex flex-col gap-4"
-            inputClassName="bg-background-accent/30 border border-border-color focus:border-primary-cta focus:ring-1 focus:ring-primary-cta transition-colors duration-200 rounded-md p-3"
             buttonClassName="primary-button px-6 py-3"
             buttonTextClassName="font-semibold"
-            termsClassName="text-foreground/60 text-sm mt-4"
           />
         </div>
 

src/app/page.tsx

@@ -30,6 +30,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Shop Now", href: "/shop" }}
@@ -131,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"
@@ -184,7 +185,7 @@ 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: "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" }] },
           ]}

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: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                           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: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                           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: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                        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"

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: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                            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: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }, { name: "Contact", id: "/contact" }]} 
+                        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"