Update src/app/styles/variables.css

Merge version_8 into main

src/app/layout.tsx

@@ -10,13 +10,13 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: "In My Life - A Visual Journey",  description: "Explore 'In My Life', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",  openGraph: {
-    title: "In My Life - A Visual Journey",    description: "Explore 'In My Life', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",    url: "/",    siteName: "In My Life",    images: [{
+  title: "Sleep Day - A Visual Journey",  description: "Explore 'Sleep Day', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",  openGraph: {
+    title: "Sleep Day - A Visual Journey",    description: "Explore 'Sleep Day', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",    url: "/",    siteName: "Sleep Day",    images: [{
       url: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-feet_58702-16353.jpg",      alt: "Golden hour landscape"
     }],
   },
   twitter: {
-    card: "summary_large_image",    title: "In My Life - A Visual Journey",    description: "Explore 'In My Life', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",    images: ["http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-feet_58702-16353.jpg"],
+    card: "summary_large_image",    title: "Sleep Day - A Visual Journey",    description: "Explore 'Sleep Day', a curated photo gallery showcasing moments, emotions, and stories through stunning photography. Relive cherished memories and discover visual storytelling.",    images: ["http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-feet_58702-16353.jpg"],
   },
   robots: {
     index: true,

src/app/page.tsx

@@ -9,7 +9,9 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Package } from 'lucide-react';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import { Package, Sparkles, TrendingUp, Users } from 'lucide-react';
 
 export default function SitePage() {
   return (
@@ -30,11 +32,12 @@ export default function SitePage() {
           navItems={[
             { name: "Moments", id: "features" },
             { name: "Products", id: "products" },
+            { name: "Pricing", id: "pricing" },
             { name: "About", id: "about" },
             { name: "Stories", id: "testimonials" },
             { name: "Contact", id: "contact" }
           ]}
-          brandName="In My Life"
+          brandName="Sleep Day"
           button={{ text: "View Gallery", href: "#gallery" }}
           buttonClassName="min-w-fit px-4 py-2 text-sm rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out"
           buttonTextClassName="text-foreground"
@@ -43,7 +46,7 @@ export default function SitePage() {
 
       <div id="hero" data-section="hero">
         <HeroBillboardRotatedCarousel
-          title="In My Life: A Visual Journey"
+          title="Sleep Day: A Visual Journey"
           description="Discover a curated collection of moments, emotions, and stories captured through the lens. Each photograph tells a unique tale from the journey of life."
           background={{ variant: "radial-gradient" }}
           buttons={[
@@ -67,6 +70,30 @@ export default function SitePage() {
         />
       </div>
 
+      <div id="pricing" data-section="pricing">
+        <PricingCardOne
+          plans={[
+            {
+              id: "basic",              badge: "Standard",              price: "$19/mo",              subtitle: "Essential features for your daily sleep tracking.",              features: ["Track sleep cycles", "Daily insights", "Basic reports"],
+              badgeIcon: Sparkles
+            },
+            {
+              id: "pro",              badge: "Most Popular",              price: "$29/mo",              subtitle: "Advanced tools for deep sleep analysis.",              features: ["All Standard features", "Detailed REM analysis", "Personalized recommendations", "Integrates with wearables"],
+              badgeIcon: Sparkles
+            },
+            {
+              id: "premium",              badge: "Ultimate",              price: "$49/mo",              subtitle: "Comprehensive suite for optimal sleep health.",              features: ["All Pro features", "One-on-one coaching", "Custom soundscapes", "Sleep environment tracking", "Premium support"],
+              badgeIcon: Sparkles
+            }
+          ]}
+          animationType="slide-up"
+          title="Choose Your Sleep Plan"
+          description="Select the perfect plan to help you achieve your best sleep."
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="features" data-section="features">
         <FeatureProcessSteps
           title="Featured Moments"
@@ -111,7 +138,7 @@ export default function SitePage() {
       <div id="about" data-section="about">
         <MetricSplitMediaAbout
           title="Our Journey Through the Lens"
-          description="'In My Life' is more than just a gallery; it's a testament to moments that shape us. From the smallest details to the grandest vistas, we believe every photograph holds a piece of a larger story. Our passion is to preserve these fleeting instants, making them timeless for you to revisit and cherish."
+          description="'Sleep Day' is more than just a gallery; it's a testament to moments that shape us. From the smallest details to the grandest vistas, we believe every photograph holds a piece of a larger story. Our passion is to preserve these fleeting instants, making them timeless for you to revisit and cherish."
           metrics={[
             { value: "10+", title: "Years of Capturing Memories" },
             { value: "5000+", title: "Photographs in Collection" }
@@ -134,7 +161,7 @@ export default function SitePage() {
             { id: "4", name: "Ethan Kim, Memory Keeper", date: "Date: January 20, 2024", title: "Reliving My Own Moments", quote: "Browsing through 'In My Life' is like reliving my own cherished memories. The photos are so vivid and evocative, they transport you to another time and place. Highly recommend.", tag: "Emotional", avatarSrc: "http://img.b2bpic.net/free-photo/i-like-that-good-job-happy-young-dark-skinned-female-wearing-casual-long-sleeved-t-shirt-making-thumbs-up-sign-smiling-cheerfully-showing-her-support-respect-someone-body-language_273609-1258.jpg", imageSrc: "http://img.b2bpic.net/free-photo/dark-low-clouds-beautiful-mountains-lake-pines-backpack-with-scooter-front_613910-17385.jpg", imageAlt: "Person admiring a panoramic mountain view" }
           ]}
           title="Client Stories"
-          description="Hear from those who have been touched by the beauty and depth of 'In My Life' photo gallery."
+          description="Hear from those who have been touched by the beauty and depth of 'Sleep Day' photo gallery."
           textboxLayout="default"
           useInvertedBackground={false}
           tag="Testimonials"
@@ -162,9 +189,28 @@ export default function SitePage() {
         />
       </div>
 
+      <div id="metrics" data-section="metrics">
+        <MetricCardOne
+          metrics={[
+            {
+              id: "1",              value: "8",              title: "hours",              description: "Average user sleep per night",              icon: TrendingUp
+            },
+            {
+              id: "2",              value: "90",              title: "million",              description: "Total sleep data points analyzed",              icon: Users
+            }
+          ]}
+          title="Our Sleep Impact"
+          description="See the numbers behind a good night's rest."
+          gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoReveal
-          logoText="In My Life"
+          logoText="Sleep Day"
           leftLink={{ text: "Privacy Policy", href: "/privacy" }}
           rightLink={{ text: "Terms of Service", href: "/terms" }}
           ariaLabel="Site footer for In My Life photo gallery"

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f8fdf8;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
+  /* --background: #ffffff;;
+  --card: #fefefe;;
+  --foreground: #222222;;
   --primary-cta: #e63946;;
-  --secondary-cta: #f0f0f0;;
-  --accent: #28a745;;
-  --background-accent: #d4edda;; */
+  --secondary-cta: #4caf50;;
+  --accent: #f5c4c7;;
+  --background-accent: #e0f4e6;; */
 
-  --background: #f8fdf8;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
+  --background: #ffffff;;
+  --card: #fefefe;;
+  --foreground: #222222;;
   --primary-cta: #e63946;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #f0f0f0;;
-  --secondary-cta-text: #1c1c1c;;
-  --accent: #28a745;;
-  --background-accent: #d4edda;;
+  --secondary-cta: #4caf50;;
+  --secondary-cta-text: #120a00e6;;
+  --accent: #f5c4c7;;
+  --background-accent: #e0f4e6;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);