Update src/app/shop/page.tsx

Merge version_4 into main

src/app/blog/page.tsx

@@ -4,8 +4,9 @@ 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';
+import Link from 'next/link';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -29,7 +30,6 @@ export default function BlogPage() {
                         brandName="Balka Flowers"
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "Blog", id: "/blog" },
                             { name: "Contact", id: "/contact" }
                         ]}
                         button={{ text: "Shop Now", href: "/shop" }}
@@ -46,7 +46,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,9 @@
 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';
+import Link from 'next/link';
 
 export default function ContactPage() {
   return (
@@ -27,7 +27,6 @@ export default function ContactPage() {
             brandName="Balka Flowers"
             navItems={[
               { name: "Home", id: "/" },
-              { name: "Blog", id: "/blog" },
               { name: "Contact", id: "/contact" }
             ]}
             button={{ text: "Shop Now", href: "/shop" }}
@@ -39,29 +38,28 @@ export default function ContactPage() {
         </div>
 
         <div id="contact-main" data-section="contact-main">
-          <ContactCenter
+          <ContactSplitForm
-            tag="Get in Touch"
             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}
+            inputs={[
-            inputPlaceholder="Your email address"
+              { name: 'name', type: 'text', placeholder: 'Name', required: true },
-            buttonText="Send Message"
+              { name: 'email', type: 'email', placeholder: 'Email', required: true },
-            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)}
+            textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }}
-            background={{ variant: "plain" }}
             useInvertedBackground={false}
+            imageSrc="https://img.b2bpic.net/free-photo/beautiful-flowers-bouquet-with-copy-space_23-2148911578.jpg"
+            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"
+            containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
-            contentClassName="bg-card rounded-soft shadow-lg p-8"
+            formCardClassName="bg-card rounded-soft shadow-lg p-8"
-            tagClassName="text-primary-cta text-sm font-semibold uppercase tracking-wider"
             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/layout.tsx

@@ -1,51 +1,27 @@
-import type { Metadata } from "next";
+import './globals.css';
-import { Plus_Jakarta_Sans } from "next/font/google";
+import type { Metadata } from 'next';
-import { Inter } from "next/font/google";
+import { Inter_Tight } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const plusJakartaSans = Plus_Jakarta_Sans({
+const interTight = Inter_Tight({
-  variable: "--font-plus-jakarta-sans",  subsets: ["latin"],
+  variable: "--font-inter-tight",  subsets: ["latin"],
-});
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Balka Flowers Studio | Exquisite Floral Arrangements",  description: "Discover stunning floral designs and custom arrangements from Balka Flowers, your local studio for fresh, handcrafted bouquets and event decor.",  keywords: ["flowers", "floral studio", "bouquet", "arrangements", "custom flowers", "event decor", "florist", "Balka", "fresh flowers"],
+  title: 'Balka Flowers',
-  openGraph: {
+  description: 'Exquisite floral arrangements for every occasion.',
-    title: "Balka Flowers Studio | Exquisite Floral Arrangements",    description: "Discover stunning floral designs and custom arrangements from Balka Flowers, your local studio for fresh, handcrafted bouquets and event decor.",    url: "https://balkaflowers.com",    siteName: "Balka Flowers",    images: [
+}
-      {
-        url: "https://img.b2bpic.net/free-photo/bouquet-pink-roses-with-green-leaves-inside-vase_114579-1439.jpg",        alt: "Vibrant bouquet of fresh flowers"
-      }
-    ],
-    type: "website"
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Balka Flowers Studio | Exquisite Floral Arrangements",    description: "Discover stunning floral designs and custom arrangements from Balka Flowers, your local studio for fresh, handcrafted bouquets and event decor.",    images: ["https://img.b2bpic.net/free-photo/bouquet-pink-roses-with-green-leaves-inside-vase_114579-1439.jpg"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
-  children: React.ReactNode;
+  children: React.ReactNode
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" className={`${interTight.variable}`}>
-      <ServiceWrapper>
+      <body>
-        <body
+        {children}
-          className={`${plusJakartaSans.variable} ${inter.variable} antialiased`}
+      
-        >
-          <Tag />
-          {children}
-        
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1413,7 +1389,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
-  );
+  )
 }

src/app/page.tsx

@@ -9,6 +9,7 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { Mail } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LandingPage() {
   return (
@@ -29,7 +30,6 @@ export default function LandingPage() {
           brandName="Balka Flowers"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Blog", id: "/blog" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Shop Now", href: "/shop" }}
@@ -131,7 +131,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 +184,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

@@ -11,6 +11,7 @@ import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Link from 'next/link';
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -92,7 +93,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: "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 +127,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: "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 +168,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: "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

@@ -10,6 +10,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Link from 'next/link';
 
 function ShopPageContent() {
     const {
@@ -59,7 +60,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: "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 +93,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: "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/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #fdfdff;;
+  /* --background: #060000;;
-  --card: #ffffff;;
+  --card: #1d0d0d;;
-  --foreground: #2a0f3d;;
+  --foreground: #ffe6e6;;
-  --primary-cta: #e63946;;
+  --primary-cta: #ff3d4a;;
-  --secondary-cta: #d1c4e9;;
+  --secondary-cta: #1f0a0a;;
-  --accent: #8b5cf6;;
+  --accent: #7b2d2d;;
-  --background-accent: #f8f0ff;; */
+  --background-accent: #b8111f;; */
 
-  --background: #fdfdff;;
+  --background: #060000;;
-  --card: #ffffff;;
+  --card: #1d0d0d;;
-  --foreground: #2a0f3d;;
+  --foreground: #ffe6e6;;
-  --primary-cta: #e63946;;
+  --primary-cta: #ff3d4a;;
-  --primary-cta-text: #f5f5f5;;
+  --primary-cta-text: #060000;;
-  --secondary-cta: #d1c4e9;;
+  --secondary-cta: #1f0a0a;;
-  --secondary-cta-text: #1c1c1c;;
+  --secondary-cta-text: #ffe6e6;;
-  --accent: #8b5cf6;;
+  --accent: #7b2d2d;;
-  --background-accent: #f8f0ff;;
+  --background-accent: #b8111f;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);