Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
2026-05-30 13:44:48 +00:00
3 changed files with 414 additions and 265 deletions

View File

@@ -33,33 +33,19 @@ export default function LandingPage() {
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "Features",
id: "#features",
},
name: "Features", id: "#features"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Pricing",
id: "#pricing",
},
name: "Pricing", id: "#pricing"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="AI Planner Pro"
/>
@@ -68,42 +54,26 @@ export default function LandingPage() {
<div id="home" data-section="home">
<HeroCarouselLogo
logoText="AI Planner Pro"
description="Your intelligent assistant for seamless event scheduling and timely reminders. Let AI handle the details so you can focus on what matters."
description="Revolutionize your day with AI Planner Pro. Intelligent scheduling, proactive reminders, and smart organization, all powered by advanced AI."
buttons={[
{
text: "Get Started Free",
href: "#pricing",
},
text: "Get Started Free", href: "#pricing"},
{
text: "Learn More",
href: "#features",
},
text: "Explore Features", href: "#features"},
]}
slides={[
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg",
imageAlt: "Futuristic digital calendar interface",
},
imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg", imageAlt: "AI-driven calendar interface with smart suggestions"},
{
imageSrc: "http://img.b2bpic.net/free-photo/clock-time-reminder-alarm-countdown-graphic_53876-128050.jpg",
imageAlt: "Holographic AI assistant interacting with calendar",
},
imageSrc: "http://img.b2bpic.net/free-photo/retro-flip-clock-off-white-background_53876-105924.jpg", imageAlt: "Proactive AI reminder notification on a device"},
{
imageSrc: "http://img.b2bpic.net/free-photo/business-associates-collaborating-conference-table-boardroom_482257-122868.jpg",
imageAlt: "Person organizing project schedule with AI insights",
},
imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-working-office_23-2149307049.jpg", imageAlt: "Team collaborating with AI Planner Pro's shared schedules"},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-programmer-looking-computer-monitor-data-center-running-scripts_482257-123133.jpg",
imageAlt: "Dynamic infographic of AI data flow to reminders",
},
imageSrc: "http://img.b2bpic.net/free-photo/business-graph-with-upward-arrow_1134-43.jpg", imageAlt: "AI analyzing data for optimized planning insights"},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036836.jpg",
imageAlt: "Mobile phone displaying AI reminder notification",
},
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-home-automation-app_23-2149036836.jpg", imageAlt: "Mobile app displaying a clean, organized schedule"},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-businessman-employs-virtual-reality-headset-digital-environment-focused-performance_482257-136139.jpg",
imageAlt: "Overview of AI Planner Pro dashboard",
},
imageSrc: "http://img.b2bpic.net/free-photo/modern-businessman-employs-virtual-reality-headset-digital-environment-focused-performance_482257-136139.jpg", imageAlt: "Futuristic workspace demonstrating seamless AI integration"},
]}
autoplayDelay={4000}
/>
@@ -114,28 +84,15 @@ export default function LandingPage() {
useInvertedBackground={false}
heading={[
{
type: "text",
content: "About Our ",
},
type: "text", content: "About AI Planner Pro: Your Smart Assistant for"},
{
type: "text",
content: "AI-Powered ",
},
type: "image", src: "http://img.b2bpic.net/free-photo/medical-icon-3d-illustration_183364-119302.jpg", alt: "AI brain network icon"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/medical-icon-3d-illustration_183364-119302.jpg",
alt: "AI brain network",
},
{
type: "text",
content: "Planning",
},
type: "text", content: "Seamless Productivity"},
]}
buttons={[
{
text: "Discover Our Mission",
href: "#",
},
text: "Learn Our Story", href: "#"},
]}
/>
</div>
@@ -147,35 +104,24 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
id: "f1",
title: "Smart Calendar Scheduling",
descriptions: [
"AI analyzes your habits, priorities, and external factors to suggest optimal event times, minimizing conflicts and maximizing availability.",
],
imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-with-augmented-reality_1134-124.jpg",
imageAlt: "Digital calendar with smart event suggestions",
},
id: "f1", title: "Intelligent Schedule Optimization", descriptions: [
"Our AI doesn't just block time; it intelligently optimizes your schedule by considering your priorities, availability, and even external factors like travel time and weather. Say goodbye to scheduling conflicts."],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg", imageAlt: "Digital calendar displaying an optimized schedule"},
{
id: "f2",
title: "Proactive Reminder System",
descriptions: [
"Never miss an important event again. Our AI sends timely, customizable reminders across all your devices, ensuring you're always prepared.",
],
imageSrc: "http://img.b2bpic.net/free-photo/retro-flip-clock-off-white-background_53876-105924.jpg",
imageAlt: "Animated clock icon with notification bell",
},
id: "f2", title: "Proactive & Customizable Reminders", descriptions: [
"Never miss a beat with our advanced reminder system. Get timely alerts for meetings, tasks, and events, delivered across all your devices. Customize reminder types, intervals, and notification channels."],
imageSrc: "http://img.b2bpic.net/free-photo/clock-time-reminder-alarm-countdown-graphic_53876-128050.jpg", imageAlt: "Smartphone with a detailed reminder notification"},
{
id: "f3",
title: "Cross-Platform Sync",
descriptions: [
"Seamlessly access and manage your schedule from anywhere. Your data is always up-to-date across desktop, web, and mobile applications.",
],
imageSrc: "http://img.b2bpic.net/free-photo/drawings-connected-devices_1134-261.jpg",
imageAlt: "Multiple devices connected by glowing lines",
},
id: "f3", title: "AI-Powered Task Management", descriptions: [
"Beyond events, AI Planner Pro helps you break down complex projects into manageable tasks, prioritizes them based on deadlines and importance, and provides AI-driven insights to boost your completion rate."],
imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-working-office_23-2149307049.jpg", imageAlt: "Project management dashboard with AI insights"},
{
id: "f4", title: "Seamless Cross-Platform Synchronization", descriptions: [
"Access and manage your optimized schedule and tasks effortlessly from any device. Our seamless synchronization ensures your plan is always up-to-date, whether you're on desktop, tablet, or mobile."],
imageSrc: "http://img.b2bpic.net/free-photo/drawings-connected-devices_1134-261.jpg", imageAlt: "Multiple devices synchronized with glowing connection lines"},
]}
title="Unleash Productivity with Intelligent Features"
description="Our AI Planner Pro comes packed with cutting-edge tools designed to simplify your life and maximize your efficiency."
title="Unlock Peak Productivity with AI Planner Pro's Capabilities"
description="Our cutting-edge AI features and robust reminder system are engineered to bring unparalleled efficiency and organization to your daily life."
/>
</div>
@@ -186,67 +132,35 @@ export default function LandingPage() {
useInvertedBackground={false}
plans={[
{
id: "basic",
badge: "Free",
badgeIcon: Sparkles,
price: "$0",
subtitle: "Essential planning for individuals",
buttons: [
id: "basic", badge: "Free", badgeIcon: Sparkles,
price: "$0", subtitle: "Start your journey with essential AI planning", buttons: [
{
text: "Start Free",
href: "#",
},
text: "Get Started Free", href: "#"},
],
features: [
"Basic AI scheduling",
"5 daily reminders",
"Single device sync",
"Standard support",
],
"Basic AI scheduling & optimization", "5 customizable daily reminders", "Single device sync", "Standard email support"],
},
{
id: "pro",
badge: "Popular",
badgeIcon: Zap,
price: "$9/month",
subtitle: "Advanced features for power users",
buttons: [
id: "pro", badge: "Popular", badgeIcon: Zap,
price: "$9/month", subtitle: "Advanced AI for maximized personal productivity", buttons: [
{
text: "Choose Pro",
href: "#",
},
text: "Choose Pro Plan", href: "#"},
],
features: [
"Advanced AI scheduling",
"Unlimited reminders",
"Multi-device sync",
"Priority support",
"Calendar integrations",
],
"Advanced AI scheduling & optimization", "Unlimited proactive reminders", "Multi-device synchronization", "Priority chat support", "Calendar & app integrations", "AI-powered task prioritization"],
},
{
id: "enterprise",
badge: "Custom",
badgeIcon: Shield,
price: "Contact Us",
subtitle: "Tailored solutions for large teams",
buttons: [
id: "enterprise", badge: "Custom", badgeIcon: Shield,
price: "Contact Sales", subtitle: "Tailored AI solutions for large organizations", buttons: [
{
text: "Contact Sales",
href: "#contact",
},
text: "Request a Demo", href: "#contact"},
],
features: [
"Dedicated AI customization",
"Team collaboration tools",
"Advanced analytics",
"24/7 VIP support",
"On-premise options",
],
"Dedicated AI customization & deployment", "Team collaboration & shared planning", "Advanced analytics & reporting", "24/7 VIP support & account management", "On-premise or private cloud options", "Custom integrations & APIs"],
},
]}
title="Simple Pricing for Every User"
description="Choose a plan that fits your needs, from individual organization to comprehensive team management."
title="Flexible AI Planning for Every Need"
description="From individuals to large enterprises, AI Planner Pro offers a range of plans powered by advanced AI and a robust reminder system to fit your unique requirements."
/>
</div>
@@ -256,65 +170,15 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah Chen",
date: "March 15, 2024",
title: "Revolutionary Productivity Tool!",
quote: "AI Planner Pro has completely changed how I manage my time. The intelligent suggestions are spot on, and I never miss a deadline. Absolutely indispensable!",
tag: "Tech CEO",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-manager-sunny-day_1139-417.jpg",
avatarAlt: "Sarah Chen avatar",
imageSrc: "http://img.b2bpic.net/free-photo/view-birthday-reminders-calendar_23-2149889709.jpg",
imageAlt: "AI Planner Pro mobile app",
},
id: "t1", name: "Sarah Chen", date: "March 15, 2024", title: "Revolutionary Productivity Tool!", quote: "AI Planner Pro has completely changed how I manage my time. The intelligent suggestions are spot on, and I never miss a deadline. Absolutely indispensable!", tag: "Tech CEO", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-cheerful-manager-sunny-day_1139-417.jpg", avatarAlt: "Sarah Chen avatar", imageSrc: "http://img.b2bpic.net/free-photo/view-birthday-reminders-calendar_23-2149889709.jpg", imageAlt: "AI Planner Pro mobile app"},
{
id: "t2",
name: "Michael Davies",
date: "April 2, 2024",
title: "Seamless Integration & Reminders",
quote: "The cross-platform sync is flawless, and the reminders are perfectly timed. My projects are now always on track, thanks to AI Planner Pro's predictive capabilities.",
tag: "Marketing Manager",
avatarSrc: "http://img.b2bpic.net/free-photo/diverse-business-professionals-engaged-video-call-global-meeting-using-online-communication_482257-132361.jpg",
avatarAlt: "Michael Davies avatar",
imageSrc: "http://img.b2bpic.net/free-photo/planner-calendar-schedule-date-concept_53876-124896.jpg",
imageAlt: "AI Planner Pro desktop dashboard",
},
id: "t2", name: "Michael Davies", date: "April 2, 2024", title: "Seamless Integration & Reminders", quote: "The cross-platform sync is flawless, and the reminders are perfectly timed. My projects are now always on track, thanks to AI Planner Pro's predictive capabilities.", tag: "Marketing Manager", avatarSrc: "http://img.b2bpic.net/free-photo/diverse-business-professionals-engaged-video-call-global-meeting-using-online-communication_482257-132361.jpg", avatarAlt: "Michael Davies avatar", imageSrc: "http://img.b2bpic.net/free-photo/planner-calendar-schedule-date-concept_53876-124896.jpg", imageAlt: "AI Planner Pro desktop dashboard"},
{
id: "t3",
name: "Emily Rodriguez",
date: "April 20, 2024",
title: "My Personal AI Assistant",
quote: "It's like having a personal assistant dedicated to my schedule. From optimizing meeting times to gentle nudges for tasks, AI Planner Pro makes life so much easier.",
tag: "Startup Founder",
avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera-office_482257-119300.jpg",
avatarAlt: "Emily Rodriguez avatar",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164855.jpg",
imageAlt: "Organized calendar with AI Planner Pro",
},
id: "t3", name: "Emily Rodriguez", date: "April 20, 2024", title: "My Personal AI Assistant", quote: "It's like having a personal assistant dedicated to my schedule. From optimizing meeting times to gentle nudges for tasks, AI Planner Pro makes life so much easier.", tag: "Startup Founder", avatarSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-camera-office_482257-119300.jpg", avatarAlt: "Emily Rodriguez avatar", imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164855.jpg", imageAlt: "Organized calendar with AI Planner Pro"},
{
id: "t4",
name: "David Kim",
date: "May 5, 2024",
title: "No More Scheduling Conflicts!",
quote: "The AI's ability to foresee and avoid scheduling conflicts is a game-changer. Our team's efficiency has soared since we started using AI Planner Pro.",
tag: "Event Coordinator",
avatarSrc: "http://img.b2bpic.net/free-photo/african-young-man-giving-white-flowers-bouquet-her-smiling-girlfriend_23-2148151758.jpg",
avatarAlt: "David Kim avatar",
imageSrc: "http://img.b2bpic.net/free-photo/software-developers-data-center-using-laptop-employing-ai-machine-learning_482257-120243.jpg",
imageAlt: "AI Planner Pro conflict avoidance UI",
},
id: "t4", name: "David Kim", date: "May 5, 2024", title: "No More Scheduling Conflicts!", quote: "The AI's ability to foresee and avoid scheduling conflicts is a game-changer. Our team's efficiency has soared since we started using AI Planner Pro.", tag: "Event Coordinator", avatarSrc: "http://img.b2bpic.net/free-photo/african-young-man-giving-white-flowers-bouquet-her-smiling-girlfriend_23-2148151758.jpg", avatarAlt: "David Kim avatar", imageSrc: "http://img.b2bpic.net/free-photo/software-developers-data-center-using-laptop-employing-ai-machine-learning_482257-120243.jpg", imageAlt: "AI Planner Pro conflict avoidance UI"},
{
id: "t5",
name: "Jessica Lee",
date: "May 18, 2024",
title: "Collaboration Made Easy",
quote: "For team planning, AI Planner Pro is unmatched. We can coordinate events, share tasks, and get everyone on the same page effortlessly. A must-have!",
tag: "Product Manager",
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
avatarAlt: "Jessica Lee avatar",
imageSrc: "http://img.b2bpic.net/free-photo/business-people-checking-appointment-personal-organizer-schedule_53876-132742.jpg",
imageAlt: "AI Planner Pro collaboration features",
},
id: "t5", name: "Jessica Lee", date: "May 18, 2024", title: "Collaboration Made Easy", quote: "For team planning, AI Planner Pro is unmatched. We can coordinate events, share tasks, and get everyone on the same page effortlessly. A must-have!", tag: "Product Manager", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", avatarAlt: "Jessica Lee avatar", imageSrc: "http://img.b2bpic.net/free-photo/business-people-checking-appointment-personal-organizer-schedule_53876-132742.jpg", imageAlt: "AI Planner Pro collaboration features"},
]}
title="What Our Users Say About AI Planner Pro"
description="Hear directly from professionals who have transformed their productivity and organization with our AI-powered solution."
@@ -328,23 +192,14 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "m1",
icon: CalendarCheck,
title: "Events Planned",
value: "1.2M+",
},
id: "m1", icon: CalendarCheck,
title: "Events Planned", value: "1.2M+"},
{
id: "m2",
icon: Bell,
title: "Reminders Sent",
value: "5.8M+",
},
id: "m2", icon: Bell,
title: "Reminders Sent", value: "5.8M+"},
{
id: "m3",
icon: Smile,
title: "User Satisfaction",
value: "98%",
},
id: "m3", icon: Smile,
title: "User Satisfaction", value: "98%"},
]}
title="Our Impact: Driving Efficiency and Satisfaction"
description="See the numbers that reflect how AI Planner Pro is helping users worldwide streamline their lives."
@@ -357,28 +212,18 @@ export default function LandingPage() {
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "How does the AI scheduling work?",
content: "Our AI uses machine learning to analyze your past scheduling patterns, current calendar entries, priorities, and even external data like traffic and weather to suggest the most optimal times for your new events.",
},
id: "q1", title: "How does the AI scheduling and optimization work?", content: "Our AI utilizes advanced machine learning algorithms to analyze your habits, priorities, existing commitments, and external data (like traffic and weather) to suggest the most optimal times for new events and tasks, proactively minimizing conflicts."},
{
id: "q2",
title: "What kind of reminders can I set?",
content: "You can set highly customizable reminders: time-based (e.g., 15 minutes before), location-based (e.g., when you arrive at work), and event-specific (e.g., a day before a meeting). They can be sent via push notification, email, or SMS.",
},
id: "q2", title: "What kind of proactive reminders can I set?", content: "AI Planner Pro offers highly customizable reminders, including time-based (e.g., '30 minutes before'), location-based (e.g., 'when I arrive at work'), and context-aware reminders. They can be delivered via push notifications, email, or SMS, ensuring you're always informed."},
{
id: "q3",
title: "Is my data secure with AI Planner Pro?",
content: "Absolutely. We prioritize your privacy and data security with end-to-end encryption, regular security audits, and compliance with global data protection regulations. Your information is safe with us.",
},
id: "q3", title: "Is my data secure and private with AI Planner Pro?", content: "Absolutely. We prioritize your data security and privacy with robust end-to-end encryption, multi-factor authentication, regular security audits, and strict adherence to global data protection regulations like GDPR and CCPA. Your information is safeguarded."},
{
id: "q4",
title: "Can I integrate with other calendar services?",
content: "Yes, AI Planner Pro integrates seamlessly with popular calendar services like Google Calendar, Outlook Calendar, Apple Calendar, and more, ensuring all your events are synchronized in one place.",
},
id: "q4", title: "Can AI Planner Pro integrate with my existing calendars and apps?", content: "Yes, AI Planner Pro offers seamless integration with popular calendar services such as Google Calendar, Outlook Calendar, Apple Calendar, and various productivity apps. This ensures all your events, tasks, and notes are synchronized and accessible from one centralized platform."},
{
id: "q5", title: "How does the AI assist with task management?", content: "Our AI goes beyond simple task lists. It helps you break down complex projects, automatically prioritizes tasks based on deadlines and importance, identifies potential bottlenecks, and provides intelligent suggestions to improve your workflow and task completion efficiency."},
]}
title="Frequently Asked Questions"
description="Find quick answers to the most common questions about AI Planner Pro and its features."
title="Frequently Asked Questions About AI Planner Pro"
description="Find clear and concise answers to common inquiries regarding AI Planner Pro's intelligent capabilities, security, and integration features."
faqsAnimation="slide-up"
/>
</div>
@@ -387,21 +232,16 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={false}
background={{
variant: "animated-grid",
}}
variant: "animated-grid"}}
tag="Get Started"
tagIcon={Rocket}
title="Ready to Revolutionize Your Schedule?"
description="Join thousands of satisfied users who are leveraging AI to manage their time effortlessly. Start your free trial today and experience the future of planning."
buttons={[
{
text: "Start Free Trial",
href: "#pricing",
},
text: "Start Free Trial", href: "#pricing"},
{
text: "Contact Sales",
href: "#",
},
text: "Contact Sales", href: "#"},
]}
/>
</div>
@@ -411,54 +251,33 @@ export default function LandingPage() {
logoText="AI Planner Pro"
columns={[
{
title: "Product",
items: [
title: "Product", items: [
{
label: "Features",
href: "#features",
},
label: "Features", href: "#features"},
{
label: "Pricing",
href: "#pricing",
},
label: "Pricing", href: "#pricing"},
{
label: "Integrations",
href: "#",
},
label: "Integrations", href: "#"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Testimonials",
href: "#testimonials",
},
label: "Testimonials", href: "#testimonials"},
{
label: "Careers",
href: "#",
},
label: "Careers", href: "#"},
],
},
{
title: "Support",
items: [
title: "Support", items: [
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Contact Us",
href: "#contact",
},
label: "Contact Us", href: "#contact"},
{
label: "Help Center",
href: "#",
},
label: "Help Center", href: "#"},
],
},
]}
@@ -469,4 +288,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}

222
src/app/planner/page.tsx Normal file
View File

@@ -0,0 +1,222 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { useState, useEffect } from 'react';
import Input from '@/components/form/Input';
import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
interface Event {
name: string;
dateTime: string;
}
export default function PlannerPage() {
const [currentDate, setCurrentDate] = useState('');
const [currentDay, setCurrentDay] = useState('');
const [currentTime, setCurrentTime] = useState('');
const [eventName, setEventName] = useState('');
const [eventDate, setEventDate] = useState('');
const [eventTime, setEventTime] = useState('');
const [events, setEvents] = useState<Event[]>([]);
useEffect(() => {
const updateDateTime = () => {
const now = new Date();
const optionsDate: Intl.DateTimeFormatOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Australia/Sydney' };
const optionsTime: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true, timeZone: 'Australia/Sydney' };
setCurrentDate(now.toLocaleDateString('en-AU', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Australia/Sydney' }));
setCurrentDay(now.toLocaleDateString('en-AU', { weekday: 'long', timeZone: 'Australia/Sydney' }));
setCurrentTime(now.toLocaleTimeString('en-AU', optionsTime));
};
updateDateTime();
const intervalId = setInterval(updateDateTime, 1000);
return () => clearInterval(intervalId);
}, []);
const handleAddEvent = (e: React.FormEvent) => {
e.preventDefault();
if (eventName && eventDate && eventTime) {
const eventDateTime = new Date(`${eventDate}T${eventTime}:00`);
const formattedDateTime = eventDateTime.toLocaleString('en-AU', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: true,
timeZone: 'Australia/Sydney'
});
setEvents([...events, { name: eventName, dateTime: formattedDateTime }]);
setEventName('');
setEventDate('');
setEventTime('');
}
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="largeSmallSizeLargeTitles"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="AI Planner Pro"
navItems={[
{
name: "Home", id: "/"},
{
name: "Planner", id: "/planner"},
{
name: "Features", id: "#features"},
{
name: "About", id: "#about"},
{
name: "Pricing", id: "#pricing"},
{
name: "Testimonials", id: "#testimonials"},
{
name: "FAQ", id: "#faq"},
{
name: "Contact", id: "#contact"},
]}
/>
</div>
<main className="flex flex-col items-center justify-center min-h-screen py-20 px-4 sm:px-6 lg:px-8 bg-background-accent text-foreground">
<h1 className="text-4xl sm:text-5xl font-bold mb-10 text-center">Your AI Planner</h1>
{/* Current Date & Time Display */}
<div className="mb-10 p-6 sm:p-8 bg-card rounded-xl shadow-lg text-center border border-gray-200">
<p className="text-lg sm:text-xl mb-2">Current Date:</p>
<p className="text-3xl sm:text-4xl font-semibold mb-2">{currentDate}</p>
<p className="text-xl sm:text-2xl mb-1">{currentDay}</p>
<p className="text-2xl sm:text-3xl">{currentTime}</p>
<p className="text-sm text-gray-500 mt-2">Timezone: Australia/Sydney</p>
</div>
{/* Event Creation Interface */}
<div className="w-full max-w-lg p-8 bg-card rounded-xl shadow-lg mb-10 border border-gray-200">
<h2 className="text-2xl sm:text-3xl font-bold mb-6 text-center">Plan a New Event</h2>
<form onSubmit={handleAddEvent} className="space-y-6">
<div>
<label htmlFor="eventName" className="block text-sm font-medium mb-1">Event Name</label>
<Input
id="eventName"
type="text"
value={eventName}
onChange={(val) => setEventName(val)}
placeholder="Team Meeting"
required
className="w-full p-3 border border-gray-300 rounded-md bg-transparent focus:ring-primary-cta focus:border-primary-cta outline-none text-lg"
/>
</div>
<div>
<label htmlFor="eventDate" className="block text-sm font-medium mb-1">Date</label>
<Input
id="eventDate"
type="date"
value={eventDate}
onChange={(val) => setEventDate(val)}
required
className="w-full p-3 border border-gray-300 rounded-md bg-transparent focus:ring-primary-cta focus:border-primary-cta outline-none text-lg"
/>
</div>
<div>
<label htmlFor="eventTime" className="block text-sm font-medium mb-1">Time</label>
<Input
id="eventTime"
type="time"
value={eventTime}
onChange={(val) => setEventTime(val)}
required
className="w-full p-3 border border-gray-300 rounded-md bg-transparent focus:ring-primary-cta focus:border-primary-cta outline-none text-lg"
/>
</div>
<ButtonDirectionalHover
text="Add Event"
type="submit"
className="w-full !p-3 !h-auto text-lg"
bgClassName="!bg-primary-cta"
textClassName="!text-primary-cta-foreground"
/>
</form>
</div>
{/* Upcoming Events Display */}
<div className="w-full max-w-lg p-8 bg-card rounded-xl shadow-lg border border-gray-200">
<h2 className="text-2xl sm:text-3xl font-bold mb-6 text-center">Upcoming Events</h2>
{events.length === 0 ? (
<p className="text-center text-gray-500">No events planned yet.</p>
) : (
<ul className="space-y-4">
{events.map((event, index) => (
<li key={index} className="p-4 bg-background border border-gray-200 rounded-md flex justify-between items-center">
<div>
<h3 className="text-lg font-semibold">{event.name}</h3>
<p className="text-sm text-gray-600">{event.dateTime}</p>
</div>
</li>
))}
</ul>
)}
</div>
</main>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="AI Planner Pro"
columns={[
{
title: "Product", items: [
{
label: "Features", href: "#features"},
{
label: "Pricing", href: "#pricing"},
{
label: "Integrations", href: "#"},
],
},
{
title: "Company", items: [
{
label: "About Us", href: "#about"},
{
label: "Testimonials", href: "#testimonials"},
{
label: "Careers", href: "#"},
],
},
{
title: "Support", items: [
{
label: "FAQ", href: "#faq"},
{
label: "Contact Us", href: "#contact"},
{
label: "Help Center", href: "#"},
],
},
]}
copyrightText="© 2024 AI Planner Pro. All rights reserved."
onPrivacyClick={() => console.log('Privacy Policy clicked')}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

108
src/app/reminders/page.tsx Normal file
View File

@@ -0,0 +1,108 @@
"use client";
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import ReactLenis from 'lenis/react';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
export default function RemindersPage() {
const handleSavePreferences = (data: Record<string, string>) => {
console.log("Saving notification preferences:", data);
alert("Preferences saved!");
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="largeSmallSizeLargeTitles"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "#home" },
{ name: "Features", id: "#features" },
{ name: "About", id: "#about" },
{ name: "Pricing", id: "#pricing" },
{ name: "Testimonials", id: "#testimonials" },
{ name: "FAQ", id: "#faq" },
{ name: "Contact", id: "#contact" },
{ name: "Reminders", id: "/reminders" },
]}
brandName="AI Planner Pro"
/>
</div>
<div id="reminders-hero" data-section="reminders-hero" className="py-20 md:py-32 text-center container">
<h1 className="text-4xl md:text-6xl font-extrabold text-foreground mb-4">Manage Your Event Reminders</h1>
<p className="text-lg text-foreground/80 max-w-2xl mx-auto">
Customize your notification preferences and ensure you never miss an important event again.
</p>
</div>
<div id="notification-preferences" data-section="notification-preferences">
<ContactSplitForm
title="Notification Preferences"
description="Set how and when you'd like to receive reminders for your events."
inputs={[
{ name: "email", type: "email", placeholder: "Notification Email", required: true },
{ name: "phone", type: "tel", placeholder: "SMS Phone Number (optional)" },
{ name: "beforeTime", type: "number", placeholder: "Remind me (minutes) before event", required: true },
]}
multiSelect={{
name: "eventTypes", label: "Event Types to Notify For", options: ["Meetings", "Appointments", "Deadlines", "Personal"],
}}
textarea={{ name: "customNotes", placeholder: "Any specific notes for reminder logic?", rows: 3 }}
buttonText="Save Preferences"
onSubmit={handleSavePreferences}
useInvertedBackground={false}
mediaPosition="right"
imageSrc="http://img.b2bpic.net/free-photo/modern-smart-alarm-clock-digital-display_23-2149405625.jpg"
imageAlt="Digital alarm clock"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="AI Planner Pro"
columns={[
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Integrations", href: "#" },
{ label: "Reminders", href: "/reminders" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "Careers", href: "#" },
],
},
{
title: "Support", items: [
{ label: "FAQ", href: "#faq" },
{ label: "Contact Us", href: "#contact" },
{ label: "Help Center", href: "#" },
],
},
]}
copyrightText="© 2024 AI Planner Pro. All rights reserved."
onPrivacyClick={() => console.log('Privacy Policy clicked')}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}