Merge version_2 into main

2026-03-05 17:18:49 +00:00
parent 60029ae4bd 2d9536c560
commit 40b6c4f92c
3 changed files with 86 additions and 14 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,59 @@ 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 } from 'react';

 export default function LandingPage() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const theme = localStorage.getItem('theme') || 'light';
+    setIsDark(theme === 'dark');
+    applyTheme(theme);
+  }, []);
+
+  const applyTheme = (theme: string) => {
+    const isDarkTheme = theme === 'dark';
+    setIsDark(isDarkTheme);
+
+    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);
+  };
+
+  const toggleTheme = () => {
+    const newTheme = isDark ? 'light' : 'dark';
+    applyTheme(newTheme);
+  };
+
+  if (!mounted) return null;
+
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
@@ -19,9 +70,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 +84,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>
--- 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;
 }