Update src/app/page.tsx

This commit is contained in:
2026-05-18 13:08:34 +00:00
parent 1fa37909f0
commit b37b2bf87d

View File

@@ -16,384 +16,160 @@ import { Award, CheckCircle, Clock, Compass, Home, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="large"
background="none"
cardStyle="inset"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumSmall"
sizing="large"
background="none"
cardStyle="inset"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Projects",
id: "projects",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="HomeTech Solutions"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Projects", id: "projects" },
{ name: "Contact", id: "contact" },
]}
brandName="HomeTech Solutions"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
title="Engineering Smarter Living Spaces"
description="Expert automation planning, KNX & Loxone integration, and precise AutoCAD documentation for modern architectural intelligence."
testimonials={[
{
name: "John Doe",
handle: "@johndoe",
testimonial: "Excellent KNX planning and execution.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg",
},
{
name: "Sarah Smith",
handle: "@sarahsm",
testimonial: "Transformative automation for my home.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/create-your-home-with-person-which-you-love_329181-7394.jpg",
},
{
name: "Alex K",
handle: "@ak_tech",
testimonial: "Precision and reliability you can trust.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-sitting-office_1170-1038.jpg",
},
{
name: "Elena R",
handle: "@elena_arch",
testimonial: "Perfect architectural integration.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-woman-dressed-black-sweater-posing_114579-81856.jpg",
},
{
name: "Mark V",
handle: "@mark_v",
testimonial: "The best smart home engineering services.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-contemplating_1098-12793.jpg",
},
]}
buttons={[
{
text: "View Projects",
href: "#projects",
},
{
text: "Contact Us",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349208.jpg?_wi=1"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg",
alt: "Portrait 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-elegant-bearded-man-dressed-wool-jacket-bow-tie_613910-15696.jpg",
alt: "Portrait 2",
},
{
src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-focus-concentration_181624-26347.jpg",
alt: "Portrait 3",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
alt: "Portrait 4",
},
{
src: "http://img.b2bpic.net/free-photo/smiley-embraced-couple-conversing-with-female-realtor_23-2148895486.jpg",
alt: "Portrait 5",
},
]}
avatarText="Trusted by 150+ professionals"
marqueeItems={[
{
type: "text",
text: "KNX Certified",
},
{
type: "text",
text: "Loxone Partner",
},
{
type: "text",
text: "AutoCAD Expert",
},
{
type: "text",
text: "Smart Home Design",
},
{
type: "text",
text: "Automated Living",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
title="Engineering Smarter Living Spaces"
description="Expert automation planning, KNX & Loxone integration, and precise AutoCAD documentation for modern architectural intelligence."
testimonials={[
{ name: "John Doe", handle: "@johndoe", testimonial: "Excellent KNX planning and execution.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg" },
{ name: "Sarah Smith", handle: "@sarahsm", testimonial: "Transformative automation for my home.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/create-your-home-with-person-which-you-love_329181-7394.jpg" },
{ name: "Alex K", handle: "@ak_tech", testimonial: "Precision and reliability you can trust.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-sitting-office_1170-1038.jpg" },
{ name: "Elena R", handle: "@elena_arch", testimonial: "Perfect architectural integration.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-woman-dressed-black-sweater-posing_114579-81856.jpg" },
{ name: "Mark V", handle: "@mark_v", testimonial: "The best smart home engineering services.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-contemplating_1098-12793.jpg" }
]}
buttons={[{ text: "View Projects", href: "#projects" }, { text: "Contact Us", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349208.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg", alt: "Portrait 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-elegant-bearded-man-dressed-wool-jacket-bow-tie_613910-15696.jpg", alt: "Portrait 2" },
{ src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-focus-concentration_181624-26347.jpg", alt: "Portrait 3" },
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg", alt: "Portrait 4" },
{ src: "http://img.b2bpic.net/free-photo/smiley-embraced-couple-conversing-with-female-realtor_23-2148895486.jpg", alt: "Portrait 5" }
]}
avatarText="Trusted by 150+ professionals"
marqueeItems={[
{ type: "text", text: "KNX Certified" },
{ type: "text", text: "Loxone Partner" },
{ type: "text", text: "AutoCAD Expert" },
{ type: "text", text: "Smart Home Design" },
{ type: "text", text: "Automated Living" }
]}
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
title: "KNX Integration",
description: "Robust, industry-standard bus technology for flexible control.",
bentoComponent: "reveal-icon",
icon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-design_23-2151821323.jpg",
imageAlt: "Modern kitchen interior design",
},
{
title: "Loxone Automation",
description: "Total smart home management with powerful control logic.",
bentoComponent: "reveal-icon",
icon: Home,
imageSrc: "http://img.b2bpic.net/free-photo/neon-robot-vacuum-cleaner_23-2151349208.jpg?_wi=2",
imageAlt: "Modern kitchen interior design",
},
{
title: "AutoCAD Planning",
description: "Precision electrical and architectural technical blueprints.",
bentoComponent: "reveal-icon",
icon: Compass,
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-studio-employee-prototyping-floor-planner-software_482257-51657.jpg?_wi=1",
imageAlt: "Modern kitchen interior design",
},
]}
title="Comprehensive Engineering Services"
description="Professional planning and implementation for modern homes."
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{ title: "KNX Integration", description: "Robust, industry-standard bus technology for flexible control.", bentoComponent: "reveal-icon", icon: Zap },
{ title: "Loxone Automation", description: "Total smart home management with powerful control logic.", bentoComponent: "reveal-icon", icon: Home },
{ title: "AutoCAD Planning", description: "Precision electrical and architectural technical blueprints.", bentoComponent: "reveal-icon", icon: Compass }
]}
title="Comprehensive Engineering Services"
description="Professional planning and implementation for modern homes."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Villa Automation Project",
price: "Architectural",
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-studio-employee-prototyping-floor-planner-software_482257-51657.jpg?_wi=2",
},
{
id: "p2",
name: "Smart Penthouse Design",
price: "AutoCAD",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-activating-robot-cleaner_23-2148994180.jpg",
},
{
id: "p3",
name: "Industrial Tech Installation",
price: "Integrated",
imageSrc: "http://img.b2bpic.net/free-photo/electrical-panel-with-fuses-contactors-closeup_169016-52214.jpg",
},
{
id: "p4",
name: "Modern Manor Automation",
price: "KNX/Loxone",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-architects-working-with-drawings-desk_1262-18413.jpg",
},
{
id: "p5",
name: "Luxury Apartment Schematics",
price: "AutoCAD",
imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-with-large-windows-gray-sofa-tv_9975-33067.jpg",
},
{
id: "p6",
name: "Smart Campus Control",
price: "KNX System",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-finger-using-vitroceramic-app_23-2148994136.jpg",
},
]}
title="Featured Engineering Projects"
description="Selected architectural and automation works."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Villa Automation Project", price: "Architectural", imageSrc: "http://img.b2bpic.net/free-photo/real-estate-studio-employee-prototyping-floor-planner-software_482257-51657.jpg" },
{ id: "p2", name: "Smart Penthouse Design", price: "AutoCAD", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-activating-robot-cleaner_23-2148994180.jpg" },
{ id: "p3", name: "Industrial Tech Installation", price: "Integrated", imageSrc: "http://img.b2bpic.net/free-photo/electrical-panel-with-fuses-contactors-closeup_169016-52214.jpg" }
]}
title="Featured Engineering Projects"
description="Selected architectural and automation works."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
icon: Award,
title: "Projects Completed",
value: "150+",
},
{
id: "m2",
icon: CheckCircle,
title: "Happy Clients",
value: "100%",
},
{
id: "m3",
icon: Clock,
title: "Experience Years",
value: "10+",
},
]}
title="Professional Impact"
description="Measurable results in smart home planning."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", icon: Award, title: "Projects Completed", value: "150+" },
{ id: "m2", icon: CheckCircle, title: "Happy Clients", value: "100%" },
{ id: "m3", icon: Clock, title: "Experience Years", value: "10+" }
]}
title="Professional Impact"
description="Measurable results in smart home planning."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Alex R",
role: "Architect",
testimonial: "Exceptional CAD planning.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe-with-laptop_273609-12858.jpg",
},
{
id: "t2",
name: "Jamie B",
role: "Builder",
testimonial: "Flawless KNX systems integration.",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg",
},
{
id: "t3",
name: "Sam W",
role: "Owner",
testimonial: "Highly professional and punctual.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-shirt-jeans-holds-his-arm-his-chin-isolated-white_231208-6141.jpg",
},
{
id: "t4",
name: "Casey H",
role: "Developer",
testimonial: "Great attention to detail.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-black-sweater-standing-posing_114579-58749.jpg",
},
{
id: "t5",
name: "Jordan P",
role: "Owner",
testimonial: "Loxone setup is perfect.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-business-woman-smiling-camera-after-reading-mails-laptop-sitting-desk-start-up-company-late-night-focused-employee-using-technology-network-wireless-doing-overtime_482257-13419.jpg",
},
]}
title="Client Perspectives"
description="What our clients say about our services."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Alex R", role: "Architect", testimonial: "Exceptional CAD planning.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe-with-laptop_273609-12858.jpg" },
{ id: "t2", name: "Jamie B", role: "Builder", testimonial: "Flawless KNX systems integration.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg" },
{ id: "t3", name: "Sam W", role: "Owner", testimonial: "Highly professional and punctual.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-shirt-jeans-holds-his-arm-his-chin-isolated-white_231208-6141.jpg" },
{ id: "t4", name: "Casey H", role: "Developer", testimonial: "Great attention to detail.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-black-sweater-standing-posing_114579-58749.jpg" },
{ id: "t5", name: "Jordan P", role: "Owner", testimonial: "Loxone setup is perfect.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-business-woman-smiling-camera-after-reading-mails-laptop-sitting-desk-start-up-company-late-night-focused-employee-using-technology-network-wireless-doing-overtime_482257-13419.jpg" }
]}
title="Client Perspectives"
description="What our clients say about our services."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "Do you work with both KNX and Loxone?",
content: "Yes, we specialize in both systems.",
},
{
id: "q2",
title: "What kind of AutoCAD files do you provide?",
content: "We provide complete electrical and architectural layouts.",
},
{
id: "q3",
title: "How long does a typical project take?",
content: "It depends on the scope, typically 2-6 weeks.",
},
]}
title="Frequently Asked Questions"
description="Everything you need to know about our smart home services."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "q1", title: "Do you work with both KNX and Loxone?", content: "Yes, we specialize in both systems." },
{ id: "q2", title: "What kind of AutoCAD files do you provide?", content: "We provide complete electrical and architectural layouts." },
{ id: "q3", title: "How long does a typical project take?", content: "It depends on the scope, typically 2-6 weeks." }
]}
title="Frequently Asked Questions"
description="Everything you need to know about our smart home services."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
text="Ready to transform your home with professional automation engineering?"
buttons={[
{
text: "Get In Touch",
href: "mailto:hello@hometech.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
text="Ready to transform your home with professional automation engineering?"
buttons={[{ text: "Get In Touch", href: "mailto:hello@hometech.com" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="HomeTech"
columns={[
{
title: "Services",
items: [
{
label: "KNX Planning",
href: "#",
},
{
label: "Loxone Integration",
href: "#",
},
],
},
{
title: "Company",
items: [
{
label: "Projects",
href: "#",
},
{
label: "Contact",
href: "#contact",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="HomeTech"
columns={[
{ title: "Services", items: [{ label: "KNX Planning", href: "#" }, { label: "Loxone Integration", href: "#" }] },
{ title: "Company", items: [{ label: "Projects", href: "#" }, { label: "Contact", href: "#contact" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}