src/app/page.tsx

@@ -1,22 +1,93 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
+import MediaAbout from "@/components/sections/about/MediaAbout";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Sparkles, Heart, Brain, Mail, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
+      borderRadius="pill"
       contentWidth="medium"
       sizing="medium"
-      background="circleGradient"
+      background="noise"
       cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="medium"
     >
       <div id="nav" data-section="nav">
+        <NavbarStyleCentered 
+            navItems={[{name: "Home", id: "hero"}, {name: "Philosophy", id: "philosophy"}, {name: "Services", id: "services"}, {name: "Skin Quiz", id: "quiz"}, {name: "Contact", id: "contact"}]}
+            brandName="Maria Nikolaidou"
+        />
+      </div>
+      <div id="hero" data-section="hero">
+        <HeroSplitDualMedia
+          title="Dermatology as an Editorial Art"
+          description="Experience a personalized approach to skin health, where clinical precision meets refined aesthetic care."
+          tag="Dr. Maria Nikolaidou"
+          tagIcon={Sparkles}
+          background={{ variant: "sparkles-gradient" }}
+          mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1596755094514-f87e34083b2c?q=80&w=800" }, { imageSrc: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=800" }]}
+          rating={5}
+          ratingText="Trusted by 500+ patients"
+          buttons={[{ text: "Book Consultation", href: "#contact" }]}
+        />
+      </div>
+      <div id="philosophy" data-section="philosophy">
+        <MediaAbout 
+            title="Our Philosophy"
+            description="We believe skin health is a dialogue between science and the self. Every treatment plan is uniquely curated to reflect your individual essence, ensuring results that are as authentic as they are radiant."
+            imageSrc="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?q=80&w=1000"
+            tag="Refined Care"
+        />
+      </div>
+      <div id="services" data-section="services">
+        <FeatureHoverPattern
+            title="Curated Services"
+            description="Expert treatments designed for lasting vitality."
+            features={[
+                { icon: Heart, title: "Aesthetic Renewal", description: "Rejuvenate your natural texture." },
+                { icon: Brain, title: "Clinical Precision", description: "Evidence-based dermatological care." },
+                { icon: Sparkles, title: "Radiance Programs", description: "Tailored skincare regimens." }
+            ]}
+            animationType="slide-up"
+            useInvertedBackground={false}
+        />
+      </div>
+      <div id="quiz" data-section="quiz">
+        <PricingCardTwo
+            title="Skin Treatment Plans"
+            description="Take our 3-question quiz to receive a customized treatment recommendation."
+            animationType="slide-up"
+            plans={[
+                { id: "p1", badge: "Essential", price: "Custom", subtitle: "Daily Care Plans", buttons: [{text: "Take Quiz"}], features: ["Assessment", "Routine Design", "Product Advice"] },
+                { id: "p2", badge: "Clinical", price: "Expert", subtitle: "Advanced Procedures", buttons: [{text: "Take Quiz"}], features: ["In-Office Consult", "Treatment Roadmap", "Aftercare"] }
+            ]}
+        />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactCenter 
+            title="Get in Touch"
+            description="Schedule your personal aesthetic review with Dr. Nikolaidou."
+            tag="Contact"
+            background={{ variant: "sparkles-gradient" }}
+        />
+      </div>
+      <div id="footer">
+        <FooterLogoEmphasis 
+            logoText="Maria Nikolaidou"
+            columns={[{ items: [{label: "Privacy", href: "#"}, {label: "Terms", href: "#"}] }, { items: [{label: "Instagram", href: "#"}, {label: "LinkedIn", href: "#"}] }]}
+        />
       </div>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --background: #fdf7f4;
+  --card: #fdf2f2;
+  --foreground: #4a3b37;
+  --primary-cta: #c5a086;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #fdf2f2;
+  --secondary-cta-text: #4a3b37;
+  --accent: #d4af37;
+  --background-accent: #e7d6cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);