221 lines
12 KiB
TypeScript
221 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { Zap, Monitor, Shield } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "features"},
|
|
{
|
|
name: "Trust", id: "testimonials"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="N & N Electric"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Electrical & Computer Experts You Can Trust"
|
|
description="Same-day service, fair pricing, and plain-English explanations—no surprises, no jargon. Serving homeowners and businesses with integrity since day one."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=1", imageAlt: "Expert repairs"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=1", imageAlt: "Electrical precision"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=2", imageAlt: "Computer service"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=2", imageAlt: "Reliable support"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=3", imageAlt: "Home service"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=3", imageAlt: "Business support"},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=4", imageAlt: "Expert repairs"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=4", imageAlt: "Electrical precision"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=5", imageAlt: "Computer service"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=5", imageAlt: "Reliable support"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=6", imageAlt: "Home service"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=6", imageAlt: "Business support"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get Help Today", href: "#contact"},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", alt: "Client 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-executive-with-black-suit-crossed-arms_1139-273.jpg", alt: "Client 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg", alt: "Client 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/mature-agent_1098-12686.jpg", alt: "Client 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", alt: "Client 5"},
|
|
]}
|
|
avatarText="Trusted by 500+ local clients"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Electrical Safety"},
|
|
{
|
|
type: "text", text: "Computer Repair"},
|
|
{
|
|
type: "text", text: "Business IT"},
|
|
{
|
|
type: "text", text: "Network Solutions"},
|
|
{
|
|
type: "text", text: "Data Recovery"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "100%", title: "Transparent Pricing", description: "No hidden costs, ever.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=7"},
|
|
{
|
|
id: "m2", value: "24h", title: "Same-Day Service", description: "We respect your time.", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=7"},
|
|
{
|
|
id: "m3", value: "20+", title: "Years Experience", description: "Expertise you can rely on.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=8"},
|
|
]}
|
|
title="Our Commitment to Integrity"
|
|
description="Technical support doesn't have to be intimidating. We pride ourselves on being the clear, honest choice for your home and business."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Electrical Repairs", description: "Safe, reliable electrical work for your residence or office.", buttonIcon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=9", imageAlt: "tech repair professional dark moody"},
|
|
{
|
|
title: "Computer Diagnostics", description: "Plain-English repairs for desktops, laptops, and networks.", buttonIcon: Monitor,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=8", imageAlt: "macro electrical circuit board"},
|
|
{
|
|
title: "Business IT Support", description: "Confidential, fast turnaround to keep your business running.", buttonIcon: Shield,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", imageAlt: "happy client professional headshot"},
|
|
]}
|
|
title="Expert Solutions for Every Need"
|
|
description="Whether you are a homeowner or a business owner, our technical services are tailored to provide peace of mind and reliable performance."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Sarah J.", date: "Oct 2023", title: "Homeowner", quote: "I was intimidated by computer repairs, but they made it so simple. Highly recommend!", tag: "Privacy", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-executive-with-black-suit-crossed-arms_1139-273.jpg", imageAlt: "business woman portrait confident"},
|
|
{
|
|
id: "t2", name: "Mark D.", date: "Nov 2023", title: "Small Business Owner", quote: "Reliable, fast, and completely confidential. They saved our office network.", tag: "Expertise", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-executive-with-black-suit-crossed-arms_1139-273.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg", imageAlt: "happy homeowner portrait smiling"},
|
|
{
|
|
id: "t3", name: "Helen P.", date: "Jan 2024", title: "Homeowner", quote: "Plain-English explanations and fair pricing. No jargon, no stress.", tag: "Trust", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12688.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mature-agent_1098-12686.jpg", imageAlt: "senior man portrait trusted"},
|
|
{
|
|
id: "t4", name: "David W.", date: "Feb 2024", title: "Small Business Owner", quote: "Nolan is a master of his craft. Fast service and zero downtime.", tag: "Efficiency", avatarSrc: "http://img.b2bpic.net/free-photo/mature-agent_1098-12686.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=10", imageAlt: "tech repair professional dark moody"},
|
|
{
|
|
id: "t5", name: "Linda M.", date: "Mar 2024", title: "Small Business Owner", quote: "Excellent communication throughout the entire repair process. Truly professional.", tag: "Quality", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-successful-woman-with-blue-shirt_1098-3627.jpg", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105493.jpg?_wi=9", imageAlt: "macro electrical circuit board"},
|
|
]}
|
|
title="Customer Stories"
|
|
description="Hear why homeowners and local business owners trust N & N Electric & Computers for their most critical technical support needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
text="Ready to get help? Our team is standing by to provide the same-day, reliable technical support you need. Contact us today to experience the N & N difference."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us Now", onClick: () => window.location.href = "tel:+17407790262"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-man-works-computer-night_169016-65221.jpg?_wi=11"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Electrical", href: "#"},
|
|
{
|
|
label: "Computer Repair", href: "#"},
|
|
{
|
|
label: "Business IT", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About Us", href: "#"},
|
|
{
|
|
label: "Testimonials", href: "#testimonials"},
|
|
{
|
|
label: "Contact", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |