Merge version_1_1782252112939 into main #1
@@ -12,237 +12,127 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Time Tracking for Professionals"
|
||||
title="Build your time logging app."
|
||||
description="Streamlined, reliable, and professional time tracking built specifically for Swiss IT consulting teams."
|
||||
primaryButton={{
|
||||
text: "Get Started",
|
||||
href: "/login",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Demo",
|
||||
href: "#",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
text: "Secure Auth",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
text: "Supabase Ready",
|
||||
icon: Database,
|
||||
},
|
||||
{
|
||||
text: "Real-time Logging",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148639060.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Time Tracking for Professionals"
|
||||
title="Build your time logging app."
|
||||
description="Streamlined, reliable, and professional time tracking built specifically for Swiss IT consulting teams."
|
||||
primaryButton={{ text: "Get Started", href: "/login" }}
|
||||
secondaryButton={{ text: "View Demo", href: "#" }}
|
||||
items={[
|
||||
{ text: "Secure Auth", icon: Shield },
|
||||
{ text: "Supabase Ready", icon: Database },
|
||||
{ text: "Real-time Logging", icon: Zap },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148639060.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="Why Klok?"
|
||||
title="Built for focus, designed for speed."
|
||||
description="We built klok with the specific needs of Swiss IT consulting in mind. No bloat, no friction—just clean logging to keep your billable hours accurate and your team organized."
|
||||
items={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Accuracy",
|
||||
description: "Billable vs non-billable tracking.",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Compliance",
|
||||
description: "Swiss data residency requirements.",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Profitability",
|
||||
description: "Real-time project cost analytics.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-checking-time-his-watch-coffee-shop_1170-2053.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Why Klok?"
|
||||
title="Built for focus, designed for speed."
|
||||
description="We built klok with the specific needs of Swiss IT consulting in mind. No bloat, no friction—just clean logging to keep your billable hours accurate and your team organized."
|
||||
items={[
|
||||
{ icon: "CheckCircle", title: "Accuracy", description: "Billable vs non-billable tracking." },
|
||||
{ icon: "CheckCircle", title: "Compliance", description: "Swiss data residency requirements." },
|
||||
{ icon: "CheckCircle", title: "Profitability", description: "Real-time project cost analytics." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-checking-time-his-watch-coffee-shop_1170-2053.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBentoGrid
|
||||
tag="Key Capabilities"
|
||||
title="Everything you need to manage your business."
|
||||
description="Comprehensive tools for employees, admins, and invoice generation, all in one place."
|
||||
features={[
|
||||
{
|
||||
title: "Weekly Timesheets",
|
||||
description: "Automated workflow for logging and approval.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-checking-time-smartwatch_107420-96181.jpg",
|
||||
},
|
||||
{
|
||||
title: "Client Management",
|
||||
description: "Manage billing, rates, and projects efficiently.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expert-engineer-designs-complex-circuit-board-connections-generated-by-ai_188544-24553.jpg",
|
||||
},
|
||||
{
|
||||
title: "Financial Insights",
|
||||
description: "Real-time profitability and budget tracking.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-annual-report_1098-3459.jpg",
|
||||
},
|
||||
{
|
||||
title: "Notification System",
|
||||
description: "Stay updated with automated alerts and emails.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-wooden-cubes-computer-mouse-keyboard-wooden-background-flat-lay_176474-7625.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Key Capabilities"
|
||||
title="Everything you need to manage your business."
|
||||
description="Comprehensive tools for employees, admins, and invoice generation, all in one place."
|
||||
features={[
|
||||
{ title: "Weekly Timesheets", description: "Automated workflow for logging and approval.", imageSrc: "http://img.b2bpic.net/free-photo/man-checking-time-smartwatch_107420-96181.jpg" },
|
||||
{ title: "Client Management", description: "Manage billing, rates, and projects efficiently.", imageSrc: "http://img.b2bpic.net/free-photo/expert-engineer-designs-complex-circuit-board-connections-generated-by-ai_188544-24553.jpg" },
|
||||
{ title: "Financial Insights", description: "Real-time profitability and budget tracking.", imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-annual-report_1098-3459.jpg" },
|
||||
{ title: "Notification System", description: "Stay updated with automated alerts and emails.", imageSrc: "http://img.b2bpic.net/free-photo/business-concept-with-wooden-cubes-computer-mouse-keyboard-wooden-background-flat-lay_176474-7625.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Business Impact"
|
||||
title="Better time management, higher returns."
|
||||
metrics={[
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Saved Hours",
|
||||
value: "120+",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Utilization Rate",
|
||||
value: "92%",
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Revenue Increase",
|
||||
value: "15%",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Business Impact"
|
||||
title="Better time management, higher returns."
|
||||
description="Key performance indicators that reflect our commitment to excellence."
|
||||
metrics={[
|
||||
{ icon: "Clock", title: "Saved Hours", value: "120+" },
|
||||
{ icon: "TrendingUp", title: "Utilization Rate", value: "92%" },
|
||||
{ icon: "DollarSign", title: "Revenue Increase", value: "15%" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Client Success"
|
||||
title="What consultants say about klok."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Project Manager",
|
||||
quote: "Finally a tool that doesn't feel like a chore to use every day.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Senior Consultant",
|
||||
quote: "The workflow is intuitive and keeps my billing extremely accurate.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Rossi",
|
||||
role: "Business Owner",
|
||||
quote: "We've seen a measurable improvement in project profitability since switching.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Müller",
|
||||
role: "Developer",
|
||||
quote: "Fast, reliable, and exactly what our small team needed.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sophie Wenger",
|
||||
role: "Team Lead",
|
||||
quote: "Integration was seamless and the reporting is world-class.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-confident-business-leader_1262-4808.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Client Success"
|
||||
title="What consultants say about klok."
|
||||
description="Our clients trust us to manage their time efficiently."
|
||||
testimonials={[
|
||||
{ name: "Sarah Johnson", role: "Project Manager", quote: "Finally a tool that doesn't feel like a chore to use every day.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg" },
|
||||
{ name: "Michael Chen", role: "Senior Consultant", quote: "The workflow is intuitive and keeps my billing extremely accurate.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" },
|
||||
{ name: "Elena Rossi", role: "Business Owner", quote: "We've seen a measurable improvement in project profitability since switching.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamStackedCards
|
||||
tag="Our Team"
|
||||
title="Behind the klok interface."
|
||||
members={[
|
||||
{
|
||||
name: "Hans Müller",
|
||||
role: "Founder & Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businessman-posing-outside_74855-2003.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna Schmidt",
|
||||
role: "Product Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-businesswoman-conference-room_23-2148911825.jpg",
|
||||
},
|
||||
{
|
||||
name: "Luca Rossi",
|
||||
role: "Lead Architect",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-serious-business-man-suit-looking-work-laptop-white-background_1258-103931.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Team"
|
||||
title="Behind the klok interface."
|
||||
description="Meet the experts dedicated to building the future of time tracking."
|
||||
members={[
|
||||
{ name: "Hans Müller", role: "Founder & Lead", imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businessman-posing-outside_74855-2003.jpg" },
|
||||
{ name: "Anna Schmidt", role: "Product Manager", imageSrc: "http://img.b2bpic.net/free-photo/smiley-businesswoman-conference-room_23-2148911825.jpg" },
|
||||
{ name: "Luca Rossi", role: "Lead Architect", imageSrc: "http://img.b2bpic.net/free-photo/business-concept-portrait-handsome-serious-business-man-suit-looking-work-laptop-white-background_1258-103931.jpg" },
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Questions?"
|
||||
title="Commonly asked questions."
|
||||
items={[
|
||||
{
|
||||
question: "Is data residency guaranteed?",
|
||||
answer: "Yes, we utilize Swiss-based Supabase instances.",
|
||||
},
|
||||
{
|
||||
question: "Can I export my data?",
|
||||
answer: "Absolutely, all data is yours and exportable.",
|
||||
},
|
||||
{
|
||||
question: "Is there a trial available?",
|
||||
answer: "Yes, start prototyping today for free.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-using-phone-laptop-office_23-2147778821.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Questions?"
|
||||
title="Commonly asked questions."
|
||||
description="Everything you need to know about getting started."
|
||||
items={[
|
||||
{ question: "Is data residency guaranteed?", answer: "Yes, we utilize Swiss-based Supabase instances." },
|
||||
{ question: "Can I export my data?", answer: "Absolutely, all data is yours and exportable." },
|
||||
{ question: "Is there a trial available?", answer: "Yes, start prototyping today for free." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-using-phone-laptop-office_23-2147778821.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready?"
|
||||
text="Start building your custom time logging solution with us today."
|
||||
primaryButton={{
|
||||
text: "Launch Now",
|
||||
href: "/login",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Sales",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Ready?"
|
||||
text="Start building your custom time logging solution with us today."
|
||||
primaryButton={{ text: "Launch Now", href: "/login" }}
|
||||
secondaryButton={{ text: "Contact Sales", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user