284 lines
18 KiB
TypeScript
284 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { BarChart3, BookOpen, Calendar, CheckCircle, Globe, HelpCircle, Info, Lock, MessageCircle, Smartphone, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Age Calculator"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Blog", id: "blog" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Try Calculator", href: "#features"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Master International Age Calculation"
|
|
description="The professional 30+ age calculator designed for global users. Accurate calculations across time zones, leap years, and international date formats with comprehensive guides and articles."
|
|
tag="Calculator Tools"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Calculating", href: "#features" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "gradient-bars" }}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-vector/interface-workout-tracking-application_23-2148632022.jpg?_wi=1", imageAlt: "Calculator interface"},
|
|
{
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952352.jpg?_wi=1", imageAlt: "International calculator"},
|
|
{
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/side-view-colorful-target-with-pin-bull-s-eye_23-2148443774.jpg?_wi=1", imageAlt: "Accurate calculations"},
|
|
{
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-vector/flash-sale-background-flat-style_23-2147783494.jpg", imageAlt: "Fast processing"},
|
|
{
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_23-2148407394.jpg", imageAlt: "Easy to use"},
|
|
{
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-vector/interface-workout-tracking-application_23-2148632022.jpg?_wi=2", imageAlt: "Calculator dashboard"},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
ariaLabel="Age calculator hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
title="Powerful Calculator Features"
|
|
description="Comprehensive tools for accurate age and date calculations with professional-grade features designed for global users."
|
|
tag="Features"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
icon: Globe,
|
|
title: "International Support", description: "Calculate ages across multiple time zones and international date formats with support for 150+ countries and their unique calendar systems."},
|
|
{
|
|
icon: Calendar,
|
|
title: "Leap Year Accuracy", description: "Handles leap year calculations perfectly, accounting for all edge cases in the Gregorian calendar and other international standards."},
|
|
{
|
|
icon: Zap,
|
|
title: "Instant Results", description: "Get precise age calculations in milliseconds with real-time updates and detailed breakdowns in years, months, weeks, and days."},
|
|
{
|
|
icon: Lock,
|
|
title: "Privacy Protected", description: "Your data remains completely private. All calculations are processed locally with no external data transmission or storage."},
|
|
{
|
|
icon: Smartphone,
|
|
title: "Mobile Optimized", description: "Fully responsive design works seamlessly across all devices from smartphones to desktop computers with consistent performance."},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Detailed Analytics", description: "Get comprehensive statistics including total days lived, zodiac signs, historical events on birthdate, and life milestones."},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Calculator"
|
|
tagIcon={Info}
|
|
tagAnimation="slide-up"
|
|
title="Professional Age Calculation for Global Users"
|
|
description="Our international 30+ age calculator has served millions of users worldwide with accurate, reliable age calculations. Built by developers and mathematicians who understand the complexity of date calculations across different calendar systems and time zones. We're committed to providing the most comprehensive calculator tool available online."
|
|
metrics={[
|
|
{ value: "5M+", title: "Calculations Performed" },
|
|
{ value: "150+", title: "Countries Supported" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/group-friends-planning-trip-cafe_23-2148952352.jpg?_wi=2"
|
|
imageAlt="About our calculator"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardTwo
|
|
title="Latest Calculator Articles"
|
|
description="Explore comprehensive guides and insights about age calculation, international date systems, and practical tips for using our calculator tools."
|
|
tag="Resources"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
blogs={[
|
|
{
|
|
id: "1", category: ["Age Calculation", "Mathematics"],
|
|
title: "How to Calculate Age Accurately Across Time Zones", excerpt: "Learn the mathematical principles behind accurate age calculation, including leap year adjustments and international date format conversions.", imageSrc: "http://img.b2bpic.net/free-photo/numerology-concept-with-blackboard_23-2150062890.jpg", imageAlt: "Age calculation guide", authorName: "Dr. Sarah Mitchell", authorAvatar: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", date: "15 Jan 2025"},
|
|
{
|
|
id: "2", category: ["Leap Years", "Calendar Systems"],
|
|
title: "Understanding Leap Years: The Complete Guide", excerpt: "Discover why leap years exist, how they work, and why they're crucial for accurate age calculations in our global calendar system.", imageSrc: "http://img.b2bpic.net/free-vector/people-winter-clothes-jumping_23-2148359186.jpg", imageAlt: "Leap years explanation", authorName: "Prof. James Chen", authorAvatar: "http://img.b2bpic.net/free-photo/closeup-man-holding-dslr-camera_482257-122119.jpg", date: "12 Jan 2025"},
|
|
{
|
|
id: "3", category: ["International", "Cultures"],
|
|
title: "Age Recognition Systems Around the World", excerpt: "Explore how different cultures and countries calculate and recognize age, from East Asian age systems to Western standards.", imageSrc: "http://img.b2bpic.net/free-photo/schedule-planner-task-agenda-checklist-concept_53876-124095.jpg", imageAlt: "International age systems", authorName: "Emma Rodriguez", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-people-conference-room_23-2148911823.jpg", date: "10 Jan 2025"},
|
|
{
|
|
id: "4", category: ["Calculation Tips", "Tools"],
|
|
title: "Common Age Calculation Mistakes and How to Avoid Them", excerpt: "Understanding the pitfalls in manual age calculation and how our automated calculator prevents errors every single time.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-colorful-target-with-pin-bull-s-eye_23-2148443774.jpg?_wi=2", imageAlt: "Accuracy tips", authorName: "David Kumar", authorAvatar: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202433.jpg", date: "08 Jan 2025"},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our age calculator, how it works, and how to use it effectively."
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How accurate is the age calculator?", content: "Our calculator is 100% accurate. It accounts for leap years, different calendar systems, and time zones. The calculation is done at the millisecond level to ensure precision. Results include years, months, weeks, and days of age."},
|
|
{
|
|
id: "2", title: "Does the calculator work across different time zones?", content: "Yes! Our calculator automatically handles time zone conversions. You can calculate age for someone born in any time zone, and the result will account for the local time at birth."},
|
|
{
|
|
id: "3", title: "What about leap year calculations?", content: "Leap years are handled automatically. The calculator correctly identifies leap year dates (February 29) and adjusts age calculations accordingly. It follows the Gregorian calendar rules for leap year determination."},
|
|
{
|
|
id: "4", title: "Can I use this for historical dates?", content: "Yes, the calculator works for dates going back many years. However, for dates before the Gregorian calendar was adopted (1582), some calculations may vary depending on which calendar system was in use."},
|
|
{
|
|
id: "5", title: "Is my personal data stored?", content: "No. All calculations are performed locally in your browser. We don't store, transmit, or track any personal information. Your privacy is completely protected."},
|
|
{
|
|
id: "6", title: "Can I export or print the results?", content: "Yes, you can copy the results to your clipboard or save them as needed. Most browsers also allow you to print the page directly for your records."},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Users Say About Our Calculator"
|
|
description="Trusted by millions of users worldwide for accurate age calculations and comprehensive features."
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alexandra Bennett", role: "HR Manager", company: "Global Tech Solutions", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", imageAlt: "Alexandra Bennett"},
|
|
{
|
|
id: "2", name: "Marcus Johnson", role: "Data Analyst", company: "International Finance Corp", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-man-holding-dslr-camera_482257-122119.jpg", imageAlt: "Marcus Johnson"},
|
|
{
|
|
id: "3", name: "Lisa Chen", role: "Education Director", company: "Global Learning Institute", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-conference-room_23-2148911823.jpg", imageAlt: "Lisa Chen"},
|
|
{
|
|
id: "4", name: "Roberto Silva", role: "Business Operations", company: "Worldwide Solutions Inc", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202433.jpg", imageAlt: "Roberto Silva"},
|
|
{
|
|
id: "5", name: "Priya Sharma", role: "Software Developer", company: "Innovation Labs", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-interior-design-project_23-2150346507.jpg", imageAlt: "Priya Sharma"},
|
|
{
|
|
id: "6", name: "Thomas Mueller", role: "CEO", company: "European Digital Group", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg", imageAlt: "Thomas Mueller"},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Get In Touch"
|
|
ctaDescription="Have questions about our calculator? We're here to help. Contact us for support, suggestions, or partnerships."
|
|
ctaButton={{
|
|
text: "Send Message", href: "mailto:hello@agecalculator.com"}}
|
|
ctaIcon={MessageCircle}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How can I contact support?", content: "You can reach us via email at hello@agecalculator.com or use our contact form above. We typically respond within 24 hours."},
|
|
{
|
|
id: "2", title: "Are there API integrations available?", content: "Yes! We offer comprehensive API documentation for developers who want to integrate our age calculation engine into their applications."},
|
|
{
|
|
id: "3", title: "Can I use this calculator commercially?", content: "Our calculator is free for personal use. For commercial licensing, please contact our sales team at sales@agecalculator.com."},
|
|
{
|
|
id: "4", title: "Do you offer custom solutions?", content: "Absolutely! We can create custom age calculation solutions for enterprise clients. Contact our team to discuss your specific needs."},
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Age Calculator"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Calculator", href: "#features" },
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "API", href: "#" },
|
|
{ label: "Pricing", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Blog", href: "#blog" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Guides", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Partners", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Disclaimer", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 International Age Calculator. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|