Add src/app/services/page.tsx

This commit is contained in:
2026-06-10 07:24:12 +00:00
parent 9200c427d6
commit fe60064ad0

118
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,118 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="small"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Home", href: "/" },
{ name: "Products", href: "/#products" },
{ name: "Features", href: "/#features" },
{ name: "Services", href: "/services" },
{ name: "About Us", href: "/#about" },
{ name: "Contact", href: "/#contact" },
]}
brandName="ElectroShop"
/>
</div>
<div id="services-main" data-section="services-main">
<PricingCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "basic-install", title: "Basic Installation", price: "$99", period: "one-time", features: [
"Standard light fixture installation", "Single socket replacement", "Basic wiring check-up", "30-day service warranty"],
button: {
text: "Get Started", href: "#contact-us-phone"},
imageSrc: "http://img.b2bpic.net/free-photo/patch-cord-crimp-glasses-notepad_140725-8748.jpg", imageAlt: "Electrician working with tools"},
{
id: "premium-install", title: "Premium Installation", price: "$249", period: "one-time", features: [
"Smart home device integration", "Multi-point lighting setup", "Full system wiring inspection", "60-day extended warranty"],
button: {
text: "Schedule Now", href: "#contact-us-phone"},
imageSrc: "http://img.b2bpic.net/free-photo/man-installing-smart-device_23-2149537033.jpg", imageAlt: "Technician installing a smart device"},
{
id: "product-delivery", title: "Product Delivery & Setup", price: "Custom", period: "per-delivery", features: [
"Expedited product shipping", "On-site delivery and unboxing", "Initial product configuration", "Recycling of old components"],
button: {
text: "Arrange Delivery", href: "#contact-us-phone"},
imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-bringing-package_23-2148777977.jpg", imageAlt: "Delivery person with a package"},
]}
title="Our Professional Services"
description="ElectroShop offers comprehensive installation and delivery services to ensure your electrical components are perfectly set up and functioning. Our expert team is ready to assist with all your needs."
tag="Services"
/>
</div>
<div id="contact-us-phone" data-section="contact-us-phone">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Call Us Today!"
title="Need Immediate Assistance? Speak to an Expert."
description="Our customer service team is available to answer your questions, schedule installations, or assist with product delivery. We're just a phone call away."
buttons={[
{
text: "Call ElectroShop: +1 (234) 567-8900", href: "tel:+12345678900"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{ label: "Shop", href: "/#products" },
{ label: "Bulbs", href: "/#products" },
{ label: "Sockets", href: "/#products" },
{ label: "Wiring", href: "/#products" },
],
},
{
items: [
{ label: "Company", href: "/#about" },
{ label: "About Us", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Testimonials", href: "/#testimonials" },
],
},
{
items: [
{ label: "Support", href: "/#contact" },
{ label: "FAQs", href: "/#faq" },
{ label: "Contact Us", href: "/#contact" },
{ label: "Returns", href: "#" },
],
},
]}
logoText="ElectroShop"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}