Update src/app/contact/page.tsx

Merge version_5 into main

src/app/about/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import Link from 'next/link';
+
+export default function AboutPage() {
+  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: "About Us", id: "/about" },
+              { 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="about-us-content" data-section="about-us-content">
+          <TextAbout
+            tag="Our Story"
+            title="Crafting Floral Experiences with Passion"
+            buttons={[{ text: "Contact Us", href: "/contact" }]}
+            useInvertedBackground={false}
+            className="py-16 md:py-24"
+            containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
+            titleClassName="text-foreground text-5xl md:text-6xl lg:text-7xl font-bold leading-tight"
+            buttonContainerClassName="mt-8"
+            buttonClassName="px-6 py-3"
+            buttonTextClassName="font-semibold"
+          />
+          <TextAbout
+            title="Our Mission: Bringing Nature's Artistry to Your Life"
+            buttons={[]}
+            useInvertedBackground={true} 
+            className="py-16 md:py-24"
+            containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
+            titleClassName="text-foreground text-4xl md:text-5xl lg:text-6xl font-bold leading-tight"
+          />
+        </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/blog/page.tsx

@@ -6,6 +6,7 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 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,8 +30,7 @@ export default function BlogPage() {
                         brandName="Balka Flowers"
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "Blog", id: "/blog" },
-                            { name: "Shop", id: "/shop" },
+                            { name: "About Us", id: "/about" },
                             { name: "Contact", id: "/contact" }
                         ]}
                         button={{ text: "Shop Now", href: "/shop" }}
@@ -72,7 +72,7 @@ export default function BlogPage() {
                                 },
                                 {
                                     title: "Company",                                    items: [
-                                        { label: "About Us", href: "/#about" },
+                                        { label: "About Us", href: "/about" },
                                         { label: "Testimonials", href: "/#testimonials" },                                        { label: "Blog", href: "/blog" },
                                     ],
                                 },

src/app/contact/page.tsx

@@ -5,6 +5,7 @@ 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';
+import Link from 'next/link';
 
 export default function ContactPage() {
   return (
@@ -26,8 +27,7 @@ export default function ContactPage() {
             brandName="Balka Flowers"
             navItems={[
               { name: "Home", id: "/" },
-              { name: "Blog", id: "/blog" },
-              { name: "Shop", id: "/shop" },
+              { name: "About Us", id: "/about" },
               { name: "Contact", id: "/contact" }
             ]}
             button={{ text: "Shop Now", href: "/shop" }}
@@ -69,7 +69,7 @@ export default function ContactPage() {
             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: "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."

src/app/layout.tsx

@@ -1,51 +1,27 @@
-import type { Metadata } from "next";
-import { Plus_Jakarta_Sans } from "next/font/google";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter_Tight } from "next/font/google";
 
-const plusJakartaSans = Plus_Jakarta_Sans({
-  variable: "--font-plus-jakarta-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
+const interTight = Inter_Tight({
+  variable: "--font-inter-tight",  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
 });
 
 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"],
-  openGraph: {
-    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
-  }
-};
+  title: 'Balka Flowers',
+  description: 'Exquisite floral arrangements for every occasion.',
+}
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: {
+  children: React.ReactNode
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${plusJakartaSans.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en" className={`${interTight.variable}`}>
+      <body>
+        {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,8 +30,7 @@ export default function LandingPage() {
           brandName="Balka Flowers"
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Blog", id: "/blog" },
-            { name: "Shop", id: "/shop" },
+            { name: "About Us", id: "/about" },
             { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Shop Now", href: "/shop" }}
@@ -80,7 +80,7 @@ export default function LandingPage() {
             "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: "/about" }]} 
           buttonAnimation="slide-up"
           className="py-16 md:py-24"
           containerClassName="max-w-screen-xl mx-auto px-6 md:px-8"
@@ -186,7 +186,7 @@ export default function LandingPage() {
           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: "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."

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,11 @@ 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: "About Us", id: "/about" },
+                                { 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 +131,11 @@ 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: "About Us", id: "/about" },
+                                { 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 +176,11 @@ 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: "About Us", id: "/about" },
+                            { 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"
@@ -216,7 +229,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                         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: "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."

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,11 @@ 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: "About Us", id: "/about" },
+                                { 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 +97,11 @@ 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: "About Us", id: "/about" },
+                            { 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"
@@ -131,7 +140,7 @@ function ShopPageContent() {
                         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: "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."

src/app/styles/variables.css

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