Update src/app/page.tsx

2026-03-05 17:30:20 +00:00 · 2026-03-05 17:27:57 +00:00 · 2026-03-05 17:26:12 +00:00 · 2026-03-05 17:24:34 +00:00 · 2026-03-05 17:21:27 +00:00 · 2026-03-05 17:18:44 +00:00
3 changed files with 94 additions and 20 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,27 +1,29 @@
 import type { Metadata } from "next";
-import { Montserrat } from "next/font/google";
 import { Inter } from "next/font/google";
+import { DM_Sans } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const montserrat = Montserrat({
-  variable: "--font-montserrat",  subsets: ["latin"],
-});
-
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });

+const dmSans = DM_Sans({
+  variable: "--font-dm-sans",  subsets: ["latin"],
+});
+
 export const metadata: Metadata = {
  title: "RecoveryPath - Track Your Journey to Freedom",  description: "Luxurious recovery companion app. Track your days clean with an infinite counter, set personalized goals, and receive motivational support when you need it most.",  keywords: "recovery app, addiction support, sobriety tracker, wellness counter, recovery journey, hope, healing",  robots: {
    index: true,
    follow: true,
  },
  openGraph: {
-    title: "RecoveryPath - Your Recovery Companion",    description: "Track your journey to freedom with our elegant recovery counter and motivational support system.",    type: "website",    siteName: "RecoveryPath"},
+    title: "RecoveryPath - Your Recovery Companion",    description: "Track your journey to freedom with our elegant recovery counter and motivational support system.",    type: "website",    siteName: "RecoveryPath"
+  },
  twitter: {
-    card: "summary_large_image",    title: "RecoveryPath - Track Your Freedom",    description: "Your journey to recovery starts with a single day. RecoveryPath is here to support every step."},
+    card: "summary_large_image",    title: "RecoveryPath - Track Your Freedom",    description: "Your journey to recovery starts with a single day. RecoveryPath is here to support every step."
+  },
 };

 export default function RootLayout({
@@ -31,9 +33,26 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const theme = localStorage.getItem('theme') || 'light';
+                const isDark = theme === 'dark';
+                if (isDark) {
+                  document.documentElement.classList.add('dark');
+                } else {
+                  document.documentElement.classList.remove('dark');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
      <ServiceWrapper>
        <body
-          className={`${montserrat.variable} ${inter.variable} antialiased`}
+          className={`${inter.variable} ${dmSans.variable} antialiased`}
        >
          <Tag />
          {children}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,8 +9,61 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Heart, TrendingUp, Calendar, Flame, Star, Award, Zap, MessageSquare, Twitter, Instagram, MessageCircle } from 'lucide-react';
+import { useEffect, useState, useCallback, useRef } from 'react';

 export default function LandingPage() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const themeAppliedRef = useRef(false);
+
+  const applyTheme = useCallback((theme: string) => {
+    const isDarkTheme = theme === 'dark';
+
+    if (isDarkTheme) {
+      document.documentElement.classList.add('dark');
+      // Apply dark theme colors
+      document.documentElement.style.setProperty('--background', '#0a0a0a');
+      document.documentElement.style.setProperty('--card', '#1a1a1a');
+      document.documentElement.style.setProperty('--foreground', '#ffffffe6');
+      document.documentElement.style.setProperty('--primary-cta', '#cee7ff');
+      document.documentElement.style.setProperty('--secondary-cta', '#1a1a1a');
+      document.documentElement.style.setProperty('--accent', '#4a9eff');
+      document.documentElement.style.setProperty('--background-accent', '#1a3a5c');
+      document.documentElement.style.setProperty('--primary-cta-text', '#0a0a0a');
+      document.documentElement.style.setProperty('--secondary-cta-text', '#ffffffe6');
+    } else {
+      document.documentElement.classList.remove('dark');
+      // Apply light theme colors
+      document.documentElement.style.setProperty('--background', '#ffffff');
+      document.documentElement.style.setProperty('--card', '#f9f9f9');
+      document.documentElement.style.setProperty('--foreground', '#000612e6');
+      document.documentElement.style.setProperty('--primary-cta', '#15479c');
+      document.documentElement.style.setProperty('--secondary-cta', '#f9f9f9');
+      document.documentElement.style.setProperty('--accent', '#e2e2e2');
+      document.documentElement.style.setProperty('--background-accent', '#c4c4c4');
+      document.documentElement.style.setProperty('--primary-cta-text', '#ffffff');
+      document.documentElement.style.setProperty('--secondary-cta-text', '#000612e6');
+    }
+
+    localStorage.setItem('theme', theme);
+    setIsDark(isDarkTheme);
+  }, []);
+
+  useEffect(() => {
+    if (themeAppliedRef.current) return;
+    themeAppliedRef.current = true;
+    const theme = localStorage.getItem('theme') || 'light';
+    applyTheme(theme);
+    setMounted(true);
+  }, [applyTheme]);
+
+  const toggleTheme = () => {
+    const newTheme = isDark ? 'light' : 'dark';
+    applyTheme(newTheme);
+  };
+
+  if (!mounted) return null;
+
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
@@ -19,9 +72,9 @@ export default function LandingPage() {
      contentWidth="small"
      sizing="mediumLarge"
      background="blurBottom"
-      cardStyle="soft-shadow"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
@@ -33,7 +86,9 @@ export default function LandingPage() {
            { name: "Support", id: "motivation" },
            { name: "Progress", id: "tracker" }
          ]}
-          button={{ text: "Start Now", href: "counter" }}
+          button={{
+            text: isDark ? "🌙 Light Mode" : "☀️ Dark Mode",            onClick: toggleTheme
+          }}
          brandName="RecoveryPath"
        />
      </div>
@@ -96,7 +151,7 @@ export default function LandingPage() {
            }
          ]}
          title="Set Your Goals"
-          description="Choose how far you want to go. Whether it's 30 days, 100 days, or a lifetime—define your milestone and watch yourself soar toward it."
+          description="Choose how far you want to go. Whether it is 30 days, 100 days, or a lifetime—define your milestone and watch yourself soar toward it."
          tag="Your Target"
          textboxLayout="default"
          useInvertedBackground={true}
@@ -117,19 +172,19 @@ export default function LandingPage() {
              icon: MessageSquare
            },
            {
-              id: "3",              name: "James",              handle: "@freedomfound",              testimonial: "Setting my goal to 365 days was pivotal. It gave me direction and purpose. Now I'm beyond that and still going strong.",              rating: 5,
+              id: "3",              name: "James",              handle: "@freedomfound",              testimonial: "Setting my goal to 365 days was pivotal. It gave me direction and purpose. Now I am beyond that and still going strong.",              rating: 5,
              icon: MessageSquare
            },
            {
-              id: "4",              name: "Elena",              handle: "@newbeginning",              testimonial: "The infinite counter represents infinite hope. There's no end to recovery—just endless possibilities for a beautiful life ahead.",              rating: 5,
+              id: "4",              name: "Elena",              handle: "@newbeginning",              testimonial: "The infinite counter represents infinite hope. There is no end to recovery—just endless possibilities for a beautiful life ahead.",              rating: 5,
              icon: MessageSquare
            },
            {
-              id: "5",              name: "David",              handle: "@journeywithin",              testimonial: "This tool is more than a counter. It's a companion, a reminder, and a symbol of your commitment to yourself every single day.",              rating: 5,
+              id: "5",              name: "David",              handle: "@journeywithin",              testimonial: "This tool is more than a counter. It is a companion, a reminder, and a symbol of your commitment to yourself every single day.",              rating: 5,
              icon: MessageSquare
            },
            {
-              id: "6",              name: "Priya",              handle: "@strongertogether",              testimonial: "I've tried many apps, but this one feels different. The luxury design reminds me that my recovery is worth investing in.",              rating: 5,
+              id: "6",              name: "Priya",              handle: "@strongertogether",              testimonial: "I have tried many apps, but this one feels different. The luxury design reminds me that my recovery is worth investing in.",              rating: 5,
              icon: MessageSquare
            }
          ]}
@@ -175,7 +230,7 @@ export default function LandingPage() {
          tag="Your Recovery Starts Here"
          tagIcon={Zap}
          title="Begin Your Journey Today"
-          description="This isn't just an app—it's your companion in recovery. Track your progress, set your goals, and remember: you are stronger than your struggles. Your future is waiting."
+          description="This is not just an app—it is your companion in recovery. Track your progress, set your goals, and remember: you are stronger than your struggles. Your future is waiting."
          buttons={[
            { text: "Start Tracking Now", href: "counter" },
            { text: "Read More Stories", href: "motivation" }
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-montserrat), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }
Author	SHA1	Message	Date
bender	bc2a58126f	Update src/app/page.tsx	2026-03-05 17:30:20 +00:00
bender	07cb5f4b49	Update src/app/page.tsx	2026-03-05 17:27:57 +00:00
bender	d64f28f8d5	Update src/app/page.tsx	2026-03-05 17:26:12 +00:00
bender	12a725b3e9	Update src/app/page.tsx	2026-03-05 17:24:34 +00:00
bender	4dc9b564aa	Update src/app/page.tsx	2026-03-05 17:21:27 +00:00
bender	2d9536c560	Update src/app/styles/base.css	2026-03-05 17:18:44 +00:00
bender	f1d679f945	Update src/app/page.tsx	2026-03-05 17:18:44 +00:00
bender	c7b9f498fd	Update src/app/layout.tsx	2026-03-05 17:18:42 +00:00
bender	60029ae4bd	Merge version_1 into main Merge version_1 into main	2026-03-05 17:17:14 +00:00
bender	cbbc095c75	Merge version_1 into main Merge version_1 into main	2026-03-05 17:14:18 +00:00