Merge version_1 into main #2
368
src/app/page.tsx
368
src/app/page.tsx
@@ -14,270 +14,126 @@ import { CheckCircle, TrendingUp, XCircle } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Dashboard",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "#metrics",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="SmartAttend"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "#hero" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Metrics", id: "#metrics" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="SmartAttend"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SmartAttend"
|
||||
description="Good morning, Admin. Excellence is not a skill, it's an attitude. Welcome to your smart attendance management dashboard."
|
||||
buttons={[
|
||||
{
|
||||
text: "Sign In",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg"
|
||||
imageAlt="SmartAttend Dashboard Interface"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="SmartAttend"
|
||||
description="Good morning, Admin. Excellence is not a skill, it's an attitude. Welcome to your smart attendance management dashboard."
|
||||
buttons={[
|
||||
{ text: "Sign In", href: "#" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg"
|
||||
imageAlt="SmartAttend Dashboard Interface"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Automated",
|
||||
title: "Auto Check-in",
|
||||
items: [
|
||||
"Real-time clock-in updates",
|
||||
"Geo-fencing support",
|
||||
"Automated entry logging",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Insightful",
|
||||
title: "Advanced Analytics",
|
||||
items: [
|
||||
"Present vs Absent trends",
|
||||
"Monthly attendance reports",
|
||||
"Exportable data formats",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Reliable",
|
||||
title: "System Alerts",
|
||||
items: [
|
||||
"Push notifications",
|
||||
"Missing entry warnings",
|
||||
"Administrator daily updates",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Smart Features for Smarter Attendance"
|
||||
description="Streamline your workforce management with our intuitive automated system."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1", label: "Automated", title: "Auto Check-in", items: ["Real-time clock-in updates", "Geo-fencing support", "Automated entry logging"],
|
||||
},
|
||||
{
|
||||
id: "f2", label: "Insightful", title: "Advanced Analytics", items: ["Present vs Absent trends", "Monthly attendance reports", "Exportable data formats"],
|
||||
},
|
||||
{
|
||||
id: "f3", label: "Reliable", title: "System Alerts", items: ["Push notifications", "Missing entry warnings", "Administrator daily updates"],
|
||||
},
|
||||
]}
|
||||
title="Smart Features for Smarter Attendance"
|
||||
description="Streamline your workforce management with our intuitive automated system."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "124",
|
||||
title: "Present Today",
|
||||
description: "+3 from yesterday",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "12",
|
||||
title: "Absent Today",
|
||||
description: "-1 from yesterday",
|
||||
icon: XCircle,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
title: "Attendance Rate",
|
||||
description: "Avg this month",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
]}
|
||||
title="Today's Attendance Overview"
|
||||
description="Track real-time attendance stats right from your dashboard."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "124", title: "Present Today", description: "+3 from yesterday", icon: CheckCircle },
|
||||
{ id: "m2", value: "12", title: "Absent Today", description: "-1 from yesterday", icon: XCircle },
|
||||
{ id: "m3", value: "98%", title: "Attendance Rate", description: "Avg this month", icon: TrendingUp },
|
||||
]}
|
||||
title="Today's Attendance Overview"
|
||||
description="Track real-time attendance stats right from your dashboard."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Office Manager",
|
||||
company: "TechCorp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Director",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-posing-outside_74855-1551.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "HR Head",
|
||||
company: "InnovateLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-lady-with-laptop-conference-room_1262-3778.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Operations",
|
||||
company: "StartupXYZ",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-with-laptop_1098-14241.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa Wang",
|
||||
role: "Team Lead",
|
||||
company: "AgencyPro",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "1000+",
|
||||
label: "Admins",
|
||||
},
|
||||
{
|
||||
value: "50k+",
|
||||
label: "Users",
|
||||
},
|
||||
{
|
||||
value: "99.9%",
|
||||
label: "Uptime",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Administrators"
|
||||
description="See how managers are transforming their daily routines with SmartAttend."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", role: "Office Manager", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg" },
|
||||
{ id: "2", name: "Michael Chen", role: "Director", company: "GrowthCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-posing-outside_74855-1551.jpg" },
|
||||
{ id: "3", name: "Emily Rodriguez", role: "HR Head", company: "InnovateLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-lady-with-laptop-conference-room_1262-3778.jpg" },
|
||||
{ id: "4", name: "David Kim", role: "Operations", company: "StartupXYZ", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/working-with-laptop_1098-14241.jpg" },
|
||||
{ id: "5", name: "Lisa Wang", role: "Team Lead", company: "AgencyPro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "1000+", label: "Admins" },
|
||||
{ value: "50k+", label: "Users" },
|
||||
{ value: "99.9%", label: "Uptime" },
|
||||
]}
|
||||
title="Trusted by Administrators"
|
||||
description="See how managers are transforming their daily routines with SmartAttend."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Support?"
|
||||
description="Reach out to our team if you need any help setting up your SmartAttend dashboard."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Describe your query...",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/image-windows-morden-office-building_1112-928.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Support?"
|
||||
description="Reach out to our team if you need any help setting up your SmartAttend dashboard."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Describe your query...", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/image-windows-morden-office-building_1112-928.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SmartAttend"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Metrics",
|
||||
href: "#metrics",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="SmartAttend"
|
||||
columns={[
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Metrics", href: "#metrics" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user