bender/ae006e43-af32-4482-b2df-42107b7f2865
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #2

Merged
bender merged 3 commits from version_3 into main 2026-04-22 22:34:47 +00:00
Conversation 0 Commits 3 Files Changed 3 +122 -162
3 changed files with 122 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/app/page.tsx
View File

@@ -2,14 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBase from '@/components/sections/footer/FooterBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ButtonIconArrow from '@/components/button/ButtonIconArrow';
export default function LandingPage() {
return (
@@ -26,162 +27,121 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home", id: "hero"},
{
name: "Services", id: "services"},
{
name: "Testimonials", id: "testimonials"},
{
name: "Book Appointment", id: "contact"},
]}
brandName="CJS Electrical"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Book", id: "book-form" },
{ name: "Quote", id: "quote-form" }
]}
brandName="CJS Electrical"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{
variant: "plain"}}
title="Your Local Kokomo Electrical Experts: Safe, Reliable, and Ready 24/7"
description="Family-owned and operated electrical services. From emergency repairs to professional installations, we bring safety and light to your home 24/7."
buttons={[
{
text: "Book Appointment", href: "#contact"},
{
text: "Get a Free Estimate", href: "#contact"},
]}
imageSrc="http://img.b2bpic.net/free-photo/male-construction-worker-overalls-male-electrician-overalls_169016-66699.jpg"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "plain" }}
title="Your Local Kokomo Electrical Experts: Safe, Reliable, and Ready 24/7"
description="Family-owned and operated electrical services. From emergency repairs to professional installations, we bring safety and light to your home 24/7."
buttons={[{ text: "Book Appointment", href: "#book-form" }, { text: "Get a Free Estimate", href: "#quote-form" }]}
imageSrc="http://img.b2bpic.net/free-photo/male-construction-worker-overalls-male-electrician-overalls_169016-66699.jpg"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Professionalism You Can Trust"
description="At CJS Electrical, we believe in straightforward, honest, and prompt service. Our team goes above and beyond, ensuring clear communication and exceptional workmanship on every job."
metrics={[
{
value: "24/7", title: "Emergency Support"},
{
value: "4.8★", title: "Google Rating"},
{
value: "100%", title: "Guaranteed Repairs"},
]}
imageSrc="http://img.b2bpic.net/free-photo/young-manual-worker-presenting-new-business-strategy-company-managers-his-colleagues-factory_637285-4142.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Professionalism You Can Trust"
description="At CJS Electrical, we believe in straightforward, honest, and prompt service. Our team goes above and beyond, ensuring clear communication and exceptional workmanship on every job."
metrics={[{ value: "24/7", title: "Emergency Support" }, { value: "4.8★", title: "Google Rating" }, { value: "100%", title: "Guaranteed Repairs" }]}
imageSrc="http://img.b2bpic.net/free-photo/young-manual-worker-presenting-new-business-strategy-company-managers-his-colleagues-factory_637285-4142.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSix
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "EV Charging & Panels", description: "Electric car charger installations and panel upgrades.", imageSrc: "http://img.b2bpic.net/free-photo/electric-vehicle-charger-plug-with-digital-display_35913-3359.jpg"},
{
title: "Lighting & Fans", description: "Installation and repair of indoor/outdoor lighting and ceiling fans.", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-household-tasks_23-2151733198.jpg"},
{
title: "Outlets & Security", description: "Relocation, repair, and professional security system integration.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-clicking-bell-side-view_23-2148593097.jpg"},
]}
title="Comprehensive Electrical Solutions"
description="Our certified experts handle everything from modern system upgrades to emergency home restorations."
/>
</div>
<div id="services" data-section="services">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
title="Comprehensive Electrical Solutions"
description="Our certified experts handle everything from modern system upgrades to emergency home restorations."
features={[
{ title: "EV Charging & Panels", description: "Electric car charger installations and panel upgrades.", imageSrc: "http://img.b2bpic.net/free-photo/electric-vehicle-charger-plug-with-digital-display_35913-3359.jpg" },
{ title: "Lighting & Fans", description: "Installation and repair of indoor/outdoor lighting and ceiling fans.", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-household-tasks_23-2151733198.jpg" },
{ title: "Outlets & Security", description: "Relocation, repair, and professional security system integration.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-clicking-bell-side-view_23-2148593097.jpg" }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1", name: "Anneka Haygood", handle: "@customer", testimonial: "Matthew arrived on time, quickly identified the issue, and explained everything clearly.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-african-american-woman-wearing-casual-clothes-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-29095.jpg"},
{
id: "2", name: "John D.", handle: "@customer", testimonial: "The project manager gave me a very honest explanation of the install process. Truly excellent.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/thrilled-confident-manager-business-attire-celebrates-victorious-milestone_482257-111932.jpg"},
{
id: "3", name: "Sarah P.", handle: "@customer", testimonial: "He went above and beyond to explain any questions I asked. Professional and prompt.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg"},
{
id: "4", name: "Michael R.", handle: "@customer", testimonial: "Very thorough inspection check. Feel safer in my home now.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg"},
{
id: "5", name: "David K.", handle: "@customer", testimonial: "Overall, a very positive experience. Highly recommend their electrical work.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-employee_1098-16109.jpg"},
]}
showRating={true}
title="What Our Clients Say"
description="Honest feedback from homeowners who trust CJS Electrical with their most important asset: their home."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
title="What Our Clients Say"
description="Honest feedback from homeowners who trust CJS Electrical with their most important asset: their home."
showRating={true}
testimonials={[
{ id: "1", name: "Anneka Haygood", handle: "@customer", testimonial: "Matthew arrived on time, quickly identified the issue, and explained everything clearly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-african-american-woman-wearing-casual-clothes-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-29095.jpg" },
{ id: "2", name: "John D.", handle: "@customer", testimonial: "The project manager gave me a very honest explanation of the install process. Truly excellent.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/thrilled-confident-manager-business-attire-celebrates-victorious-milestone_482257-111932.jpg" },
{ id: "3", name: "Sarah P.", handle: "@customer", testimonial: "He went above and beyond to explain any questions I asked. Professional and prompt.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg" },
{ id: "4", name: "Michael R.", handle: "@customer", testimonial: "Very thorough inspection check. Feel safer in my home now.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-smiling_1187-3196.jpg" },
{ id: "5", name: "David K.", handle: "@customer", testimonial: "Overall, a very positive experience. Highly recommend their electrical work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-employee_1098-16109.jpg" },
{ id: "6", name: "Robert L.", handle: "@customer", testimonial: "Professional work, very fast service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-man_1098-16109.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "q1", title: "Do you offer emergency services?", content: "Yes, we provide 24/7 emergency electrical service to keep your home safe."},
{
id: "q2", title: "Is the estimate free?", content: "We offer free in-home estimates for your peace of mind and clarity."},
{
id: "q3", title: "Are you licensed and insured?", content: "CJS Electrical is fully family-owned, operated, licensed, and insured for your protection."},
]}
imageSrc="http://img.b2bpic.net/free-photo/hardhat-electrical-equipment_23-2147743042.jpg"
title="Frequently Asked Questions"
description="Have questions about our process? We have answers."
faqsAnimation="slide-up"
/>
</div>
<div id="book-form" data-section="book-form">
<ContactSplitForm
title="Book an Appointment"
description="Schedule your service visit with our expert team."
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "phone", type: "tel", placeholder: "Phone Number", required: true }]}
buttonText="Book Now"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "plain"}}
text="Ready to get started? Book your appointment or request your free quote today."
buttons={[
{
text: "Book Appointment", href: "tel:555-0123"},
{
text: "Call for Free Estimate", href: "tel:555-0123"},
]}
/>
</div>
<div id="quote-form" data-section="quote-form">
<ContactSplitForm
title="Get a Free Quote"
description="Tell us about your project and we'll reach out with a quote."
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Email Address", required: true }]}
textarea={{ name: "details", placeholder: "Project details...", rows: 4 }}
buttonText="Get Quote"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Company", items: [
{
label: "About Us", href: "#"},
{
label: "Services", href: "#services"},
{
label: "Contact", href: "#contact"},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
],
},
]}
logoText="CJS Electrical"
copyrightText="© 2025 | CJS Electrical"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
title="Frequently Asked Questions"
faqsAnimation="slide-up"
faqs={[
{ id: "q1", title: "Do you offer emergency services?", content: "Yes, we provide 24/7 emergency electrical service to keep your home safe." },
{ id: "q2", title: "Is the estimate free?", content: "We offer free in-home estimates for your peace of mind and clarity." },
{ id: "q3", title: "Are you licensed and insured?", content: "CJS Electrical is fully family-owned, operated, licensed, and insured for your protection." }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="CJS Electrical"
columns={[
{ items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#book-form" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
/>
</div>
<div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
<ButtonIconArrow text="Call Now" href="tel:5550123" />
<ButtonIconArrow text="Book" href="#book-form" />
</div>
</ReactLenis>
</ThemeProvider>
);

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-poppins), sans-serif;
font-family: var(--font-playfair), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-poppins), sans-serif;
font-family: var(--font-playfair), sans-serif;
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #000000;
--card: #0c0c0c;
--foreground: #ffffff;
--primary-cta: #106EFB;
--background: #010912;
--card: #152840;
--foreground: #e6f0ff;
--primary-cta: #d4af37;
--primary-cta-text: #ffffff;
--secondary-cta: #000000;
--secondary-cta: #0e1a29;
--secondary-cta-text: #ffffff;
--accent: #535353;
--background-accent: #106EFB;
--accent: #b8860b;
--background-accent: #004a93;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);