Add src/app/about/page.tsx
This commit is contained in:
183
src/app/about/page.tsx
Normal file
183
src/app/about/page.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { Award, CheckCircle, Users, Clock, Zap, Phone, Mail, MapPin, Target, Lightbulb, Heart } from 'lucide-react';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="ProServe"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Why Us", id: "why-us" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+1-555-0123"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="About ProServe Plumbing"
|
||||
description="Over 20 years of trusted service to residential and commercial customers throughout Texas"
|
||||
tag="Our Story"
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumbers-in-the-office_1368-4340.jpg"
|
||||
imageAlt="ProServe team"
|
||||
textPosition="center"
|
||||
showBlur={true}
|
||||
showDimOverlay={false}
|
||||
ariaLabel="About page hero section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="trust" data-section="trust">
|
||||
<AboutMetric
|
||||
title="Our Track Record of Excellence"
|
||||
metrics={[
|
||||
{ icon: Award, label: "Years in Business", value: "20+" },
|
||||
{ icon: Users, label: "Satisfied Customers", value: "5000+" },
|
||||
{ icon: CheckCircle, label: "Certified Professionals", value: "50+" },
|
||||
{ icon: Clock, label: "Average Response", value: "30 min" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
ariaLabel="Company metrics and achievements"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="mission" data-section="mission">
|
||||
<FeatureCardTwelve
|
||||
title="Our Mission & Values"
|
||||
description="We're dedicated to providing exceptional plumbing services with integrity, expertise, and customer care at the heart of everything we do"
|
||||
features={[
|
||||
{
|
||||
id: "mission", label: "Mission", title: "Exceptional Service", items: ["Deliver reliable plumbing solutions", "Build lasting customer relationships", "Support our community with quality work", "Maintain the highest professional standards"]
|
||||
},
|
||||
{
|
||||
id: "integrity", label: "Integrity", title: "Honest & Transparent", items: ["Transparent pricing and estimates", "No hidden fees or surprises", "Clear communication throughout projects", "Stand behind our work with guarantees"]
|
||||
},
|
||||
{
|
||||
id: "expertise", label: "Expertise", title: "Skilled Professionals", items: ["Licensed and insured technicians", "Ongoing training and certification", "Latest tools and techniques", "Years of industry experience"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Company mission and values"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-choose" data-section="why-choose">
|
||||
<FeatureCardTwelve
|
||||
title="Why Choose ProServe?"
|
||||
description="We combine experience, reliability, and customer-focused service to deliver exceptional results"
|
||||
tag="Differentiators"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "experience", label: "Experience", title: "20+ Years of Expertise", items: ["Serving residential and commercial clients", "Experienced with all plumbing systems", "Proven track record of success", "Licensed and fully insured"]
|
||||
},
|
||||
{
|
||||
id: "availability", label: "Available", title: "24/7 Emergency Service", items: ["Always available when you need us", "30-minute response guarantee", "Same-day service options", "Emergency hotline support"]
|
||||
},
|
||||
{
|
||||
id: "customer", label: "Customer", title: "Customer-Focused Approach", items: ["Transparent communication", "No hidden fees", "Quality guarantees", "Follow-up support included"]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
ariaLabel="Why choose ProServe section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
title="Meet Our Team"
|
||||
description="The experienced professionals behind ProServe Plumbing"
|
||||
tag="Our Team"
|
||||
tagIcon={Users}
|
||||
tagAnimation="slide-up"
|
||||
groups={[
|
||||
{
|
||||
id: "management", groupTitle: "Leadership", members: [
|
||||
{
|
||||
id: "1", title: "Michael Thompson", subtitle: "Founder & CEO", detail: "michael@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/close-up-handsome-man-with-beard-looking-thoughtful-upper-left-corner-imaging-smiling_1258-26774.jpg", imageAlt: "Michael Thompson"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Sarah Johnson", subtitle: "Operations Manager", detail: "sarah@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5055.jpg", imageAlt: "Sarah Johnson"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "technicians", groupTitle: "Master Technicians", members: [
|
||||
{
|
||||
id: "3", title: "James Rodriguez", subtitle: "Master Plumber", detail: "james@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/handsome-afroamerican-man-smiling_23-2148508920.jpg", imageAlt: "James Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "4", title: "David Williams", subtitle: "Master Plumber", detail: "david@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg", imageAlt: "David Williams"
|
||||
},
|
||||
{
|
||||
id: "5", title: "Emily Chen", subtitle: "Senior Technician", detail: "emily@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-curly-woman-with-lgbt-flag_23-2149123940.jpg", imageAlt: "Emily Chen"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "support", groupTitle: "Customer Support", members: [
|
||||
{
|
||||
id: "6", title: "Jennifer Lopez", subtitle: "Customer Service Lead", detail: "jennifer@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-business-thinking-creative-beauty-black-lady-african-american-girl-isolated-gray-background_640221-36.jpg", imageAlt: "Jennifer Lopez"
|
||||
},
|
||||
{
|
||||
id: "7", title: "Lisa Anderson", subtitle: "Scheduling Coordinator", detail: "lisa@proserve.com", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-127442.jpg", imageAlt: "Lisa Anderson"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Team members directory"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="ProServe"
|
||||
copyrightText="© 2025 ProServe Plumbing. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Phone, href: "tel:+1-555-0123", ariaLabel: "Call us" },
|
||||
{ icon: Mail, href: "mailto:info@proserve.com", ariaLabel: "Email us" },
|
||||
{ icon: MapPin, href: "#", ariaLabel: "Find us on map" }
|
||||
]}
|
||||
ariaLabel="Site footer"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user