From 5106b3acfd458550c7e902ea9cd6cca2c2e6dbc9 Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 16:18:37 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 213 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 209 insertions(+), 4 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index d9b7bdb..ccecf78 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,9 +11,75 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne"; import FaqSplitText from "@/components/sections/faq/FaqSplitText"; import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import { Award, CheckCircle, Crown, Heart, Shield, Sparkles } from "lucide-react"; +import { Award, CheckCircle, Crown, Heart, Shield, Sparkles, Calendar, Clock, Users } from "lucide-react"; +import React, { useState, useEffect } from "react"; + +interface TimeSlot { + time: string; + available: boolean; +} + +interface DaySlots { + date: string; + day: string; + slots: TimeSlot[]; +} export default function LandingPage() { + const [calendarData, setCalendarData] = useState([]); + const [selectedDate, setSelectedDate] = useState(null); + const [selectedSlot, setSelectedSlot] = useState(null); + + useEffect(() => { + // Generate availability calendar for next 7 days + const generateCalendar = () => { + const days: DaySlots[] = []; + const today = new Date(); + + for (let i = 0; i < 7; i++) { + const date = new Date(today); + date.setDate(date.getDate() + i); + const dateStr = date.toISOString().split('T')[0]; + const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }); + + const slots: TimeSlot[] = []; + const hours = [9, 10, 11, 13, 14, 15, 16, 17]; + + for (const hour of hours) { + // Simulate availability - 80% slots available + const available = Math.random() > 0.2; + slots.push({ + time: `${hour.toString().padStart(2, '0')}:00`, + available, + }); + } + + days.push({ + date: dateStr, + day: dayName, + slots, + }); + } + + setCalendarData(days); + if (days.length > 0) { + setSelectedDate(days[0].date); + } + }; + + generateCalendar(); + }, []); + + const getAvailableCount = (date: string): number => { + const day = calendarData.find(d => d.date === date); + return day ? day.slots.filter(s => s.available).length : 0; + }; + + const getSelectedDaySlots = (): TimeSlot[] => { + const day = calendarData.find(d => d.date === selectedDate); + return day ? day.slots : []; + }; + return ( @@ -206,6 +272,145 @@ export default function LandingPage() { /> +
+
+ {/* Header */} +
+
+ + Consultation Booking +
+

Schedule Your Personal Consultation

+

Book a consultation with our beauty experts to find the perfect products and routine for your skin type.

+
+ +
+ {/* Calendar */} +
+
+

+ + Available Dates +

+ +
+ {calendarData.map((day) => ( + + ))} +
+ + {/* Time Slots */} +
+

+ + Available Times +

+
+ {getSelectedDaySlots().map((slot, idx) => ( + + ))} +
+
+
+
+ + {/* Booking Summary */} +
+
+

+ + Booking Summary +

+ +
+
+

Selected Date

+

+ {selectedDate + ? new Date(selectedDate).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) + : 'No date selected'} +

+
+ +
+

Selected Time

+

+ {selectedSlot ? selectedSlot : 'No time selected'} +

+
+ +
+

Consultation Type

+

30-Minute Personal Consultation

+
+ +
+

What to Expect:

+
    +
  • + + Personalized skin analysis +
    • +
  • + + Product recommendations +
    • +
  • + + Custom routine guidance +
    • +
+
+ + +
+
+
+
+
+
+
); -} \ No newline at end of file +}