Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -10,7 +10,8 @@ import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
 import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { Award, CheckCircle, Droplet, Heart, Leaf, ShieldCheck, Sparkles, Star } from "lucide-react";
+import TextNumberCount from "@/components/text/TextNumberCount";
+import { Award, CheckCircle, Droplet, Heart, Leaf, ShieldCheck, Sparkles, Star, Clock } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -39,6 +40,42 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="countdown" data-section="countdown">
+        <div className="flex flex-col items-center justify-center py-24 px-6">
+          <div className="mb-8 flex items-center gap-3">
+            <Clock className="w-8 h-8" style={{ color: "var(--primary-cta)" }} />
+            <h2 className="text-4xl font-bold" style={{ color: "var(--foreground)" }}>Website Launching Soon</h2>
+          </div>
+          <p className="text-lg mb-12" style={{ color: "var(--foreground)" }}>Get ready for something amazing</p>
+          <div className="grid grid-cols-4 gap-6 text-center">
+            <div className="p-6 rounded-lg" style={{ backgroundColor: "var(--card)" }}>
+              <div className="text-5xl font-bold mb-2" style={{ color: "var(--primary-cta)" }}>
+                <TextNumberCount value={45} duration={2} />
+              </div>
+              <p className="text-sm" style={{ color: "var(--foreground)" }}>Days</p>
+            </div>
+            <div className="p-6 rounded-lg" style={{ backgroundColor: "var(--card)" }}>
+              <div className="text-5xl font-bold mb-2" style={{ color: "var(--primary-cta)" }}>
+                <TextNumberCount value={23} duration={2} />
+              </div>
+              <p className="text-sm" style={{ color: "var(--foreground)" }}>Hours</p>
+            </div>
+            <div className="p-6 rounded-lg" style={{ backgroundColor: "var(--card)" }}>
+              <div className="text-5xl font-bold mb-2" style={{ color: "var(--primary-cta)" }}>
+                <TextNumberCount value={18} duration={2} />
+              </div>
+              <p className="text-sm" style={{ color: "var(--foreground)" }}>Minutes</p>
+            </div>
+            <div className="p-6 rounded-lg" style={{ backgroundColor: "var(--card)" }}>
+              <div className="text-5xl font-bold mb-2" style={{ color: "var(--primary-cta)" }}>
+                <TextNumberCount value={7} duration={2} />
+              </div>
+              <p className="text-sm" style={{ color: "var(--foreground)" }}>Seconds</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="hero" data-section="hero">
         <HeroLogoBillboard
           logoText="Luxe Radiance"
@@ -257,4 +294,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}