Update src/app/page.tsx

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,79 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function AboutPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="about-us" data-section="about-us">
+          <InlineImageSplitTextAbout
+            heading={[
+              { type: 'text', content: "Our Clinic" },
+              { type: 'text', content: "Dedicated to Your Health and Well-being" },
+              { type: 'text', content: "At ClinicName, we are committed to providing exceptional healthcare services with a focus on compassion, innovation, and patient-centered care. Our team of experienced professionals works tirelessly to ensure you receive the best possible treatment in a welcoming and supportive environment. We believe in building lasting relationships with our patients, guiding them on their journey to optimal health." }
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardFourteen
+            title="Our Achievements"
+            tag="Years of trusted service and patient satisfaction."
+            metricsAnimation="slide-up"
+            metrics={[
+              { id: '1', value: '15+', description: 'Years in Service' },
+              { id: '2', value: '10K+', description: 'Happy Patients' },
+              { id: '3', value: '50+', description: 'Specialists' }
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [
+                { label: 'Home', href: '/' },
+                { label: 'Services', href: '/services' },
+                { label: 'Booking', href: '/booking' },
+                { label: 'Contact', href: '/contact' }
+              ]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/booking/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+
+export default function BookingPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple
+        navItems={navItems}
+        brandName="Webild"
+      />
+      <div id="booking" data-section="booking">
+        <ContactText
+          text="Appointments\nBook Your Session\nSchedule your appointment with us. Fill out the form below and we'll confirm your booking shortly.\nBy clicking 'Book Now', you agree to our booking terms and conditions."
+          buttons={[{ text: 'Book Now', href: '/booking' }]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+
+export default function ContactPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple
+        navItems={navItems}
+        brandName="Webild"
+      />
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Get in Touch\nContact Us\nHave questions or need support? Reach out to us using the form below, or find our contact details.\n\nEmail: info@example.com\nPhone: +1 (123) 456-7890\nAddress: 123 Webild Street, Suite 400, City, State, 12345\nBy clicking 'Send Message', you agree to our privacy policy."
+          buttons={[{ text: 'Send Message', href: '/contact' }]}
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
+import { Montserrat } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
@@ -7,20 +7,16 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 
-const halant = Halant({
+const montserrat = Montserrat({
-  variable: "--font-halant",
+  variable: "--font-montserrat",  subsets: ["latin"],
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
 });
 
 const inter = Inter({
-  variable: "--font-inter",
+  variable: "--font-inter",  subsets: ["latin"],
-  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Webild components 2",
+  title: "Novara Clinic | Advanced Healthcare & Wellness",  description: "Novara Clinic provides exceptional medical services with a compassionate approach, focusing on advanced care and patient well-being."
-  description: "Generated by create next app",
 };
 
 export default function RootLayout({
@@ -32,7 +28,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${halant.variable} ${inter.variable} antialiased`}
+          className={`${montserrat.variable} ${inter.variable} antialiased`}
         >
           <Tag />
           {children}
@@ -45,4 +41,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,5 +1,69 @@
-import { redirect } from 'next/navigation';
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function Home() {
-  redirect('/components');
+  const navItems = [
-}
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="hero" data-section="hero">
+          <HeroBillboardGallery
+            title="Your Health, Our Priority"
+            description="Providing exceptional care with compassion and expertise. Discover our comprehensive services designed for your well-being."
+            background={{ variant: 'radial-gradient' }}
+            mediaItems={[
+              { imageSrc: 'https://images.unsplash.com/photo-1576091160550-2173dba99934?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Doctor consulting patient' },
+              { imageSrc: 'https://images.unsplash.com/photo-1585435557343-3b0226bc7811?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Medical instruments' },
+              { imageSrc: 'https://images.unsplash.com/photo-1538108425244-a9578297b69c?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Nurse taking blood pressure' },
+              { imageSrc: 'https://images.unsplash.com/photo-1584820927478-87b4fd4a319d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Doctor and patient talking' },
+              { imageSrc: 'https://images.unsplash.com/photo-1579126038378-6548a306132f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Medical laboratory' }
+            ]}
+            buttons={[{ text: 'Explore Services', href: '/services' }]}          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [
+                { label: 'About Us', href: '/about' },
+                { label: 'Services', href: '/services' },
+                { label: 'Booking', href: '/booking' },
+                { label: 'Contact', href: '/contact' }
+              ]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ServicesPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' },
+    { name: 'Booking', id: '/booking' },
+    { name: 'Contact', id: '/contact' }
+  ];
+
+  const services = [
+    {
+      id: 's1',
+      name: 'General Check-up',
+      price: '$99',
+      imageSrc: 'https://images.unsplash.com/photo-1579684385137-d2e0717208d2?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'General Check-up'
+    },
+    {
+      id: 's2',
+      name: 'Dental Care',
+      price: '$120',
+      imageSrc: 'https://images.unsplash.com/photo-1599026466632-a567636e0996?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Dental Care'
+    },
+    {
+      id: 's3',
+      name: 'Pediatric Services',
+      price: '$110',
+      imageSrc: 'https://images.unsplash.com/photo-1576091160418-e39b65e90069?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Pediatric Services'
+    },
+    {
+      id: 's4',
+      name: 'Dermatology',
+      price: '$150',
+      imageSrc: 'https://images.unsplash.com/photo-1591130635956-fcf97f374776?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Dermatology'
+    },
+    {
+      id: 's5',
+      name: 'Cardiology',
+      price: '$200',
+      imageSrc: 'https://images.unsplash.com/photo-1582719266395-5d55aa6ce124?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Cardiology'
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="services-offerings" data-section="services-offerings">
+          <ProductCardOne
+            title="Our Comprehensive Services"
+            description="Explore our range of healthcare services designed to meet your every need. From routine check-ups to specialized treatments, our experts are here for you."
+            products={services}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [
+                { label: 'Home', href: '/' },
+                { label: 'About Us', href: '/about' },
+                { label: 'Booking', href: '/booking' },
+                { label: 'Contact', href: '/contact' }
+              ]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F7F5F1;
+  --background: #f5f5f5;
-  --card: #E8EDE9;
+  --card: #ffffff;
-  --foreground: #4A5568;
+  --foreground: #1c1c1c;
-  --primary-cta: #C9A96E;
+  --primary-cta: #1f3251;
   --primary-cta-text: #F7F5F1;
-  --secondary-cta: #0D1B2A;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #F7F5F1;
-  --accent: #C9A96E;
+  --accent: #15479c;
-  --background-accent: #0D1B2A;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);