1 Commits

Author SHA1 Message Date
ff0d8092c4 Update src/app/portfolio/page.tsx 2026-03-10 10:25:40 +00:00
2 changed files with 172 additions and 220 deletions

View File

@@ -1,244 +1,196 @@
"use client"; 'use client';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay"; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from "@/components/sections/hero/HeroLogo"; import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven"; import SplitAbout from '@/components/sections/about/SplitAbout';
import PricingCardEight from "@/components/sections/pricing/PricingCardEight"; import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardThree from "@/components/sections/metrics/MetricCardThree"; import ContactSplit from '@/components/sections/contact/ContactSplit';
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve"; import FooterSimple from '@/components/sections/footer/FooterSimple';
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia"; import { CheckCircle, Mail } from 'lucide-react';
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Zap, Users, TrendingUp, Award } from "lucide-react";
const Home = () => { const navItems = [
const navItems = [ { name: 'Home', id: '/' },
{ name: "Home", id: "/" }, { name: 'Services', id: '#services' },
{ name: "Portfolio", id: "/portfolio" }, { name: 'About', id: '#about' },
{ name: "Contact", id: "contact" }, { name: 'Contact', id: '#contact' },
]; ];
const features = [ const features = [
{ {
id: 1, id: 1,
title: "Lightning Fast Performance", description: "Optimized for speed with advanced caching, lazy loading, and resource optimization. Achieve sub-second page loads.", imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop&_wi=1"}, title: 'Professional Plumbing Services',
{ description: 'Expert plumbing solutions for residential and commercial properties. From repairs to full system installations.',
id: 2, imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80',
title: "Seamless User Experience", description: "Intuitive interface with smooth animations and responsive design. Works flawlessly on all devices.", imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop&_wi=1"}, imageAlt: 'Professional plumbing services',
{ icon: CheckCircle,
id: 3, },
title: "Intelligent Caching", description: "Smart caching strategies that reduce server load and bandwidth usage while improving response times significantly.", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&h=500&fit=crop"}, {
{ id: 2,
id: 4, title: 'Quality Painting & Finishing',
title: "Scalable Infrastructure", description: "Built to handle growth. Scales automatically to meet demand without compromising performance or reliability.", imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=500&fit=crop"}, description: 'Interior and exterior painting with premium finishes. Transform your space with professional craftsmanship.',
]; imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=800&q=80',
imageAlt: 'Professional painting services',
icon: CheckCircle,
},
{
id: 3,
title: 'Electrical System Installation',
description: 'Licensed electrical work for all your home and business needs. Safety and reliability guaranteed.',
imageSrc: 'https://images.unsplash.com/photo-1621905167918-48416bd8575a?w=800&q=80',
imageAlt: 'Professional electrical services',
icon: CheckCircle,
},
{
id: 4,
title: 'Flooring Solutions',
description: 'Beautiful and durable flooring installations. Hardwood, tile, laminate, and more.',
imageSrc: 'https://images.unsplash.com/photo-1577659645047-f726860106d7?w=800&q=80',
imageAlt: 'Professional flooring services',
icon: CheckCircle,
},
];
const plans = [ const bulletPoints = [
{ {
id: "starter", badge: "Great for Getting Started", price: "$29/mo", subtitle: "Perfect for small projects and prototypes", buttons: [{ text: "Get Started", href: "/contact" }], title: '15 Years Experience',
features: [ description: 'Trusted by thousands of homeowners in Richmond, VA with consistent quality and reliability.',
"Up to 100K monthly requests", "5GB storage", "Basic analytics", "Email support"], icon: CheckCircle,
}, },
{ {
id: "professional", badge: "Most Popular", badgeIcon: Zap, title: 'Licensed & Insured',
price: "$79/mo", subtitle: "Ideal for growing businesses", buttons: [{ text: "Start Free Trial", href: "/contact" }], description: 'All our technicians are fully licensed, insured, and trained to the highest standards.',
features: [ icon: CheckCircle,
"Up to 1M monthly requests", "100GB storage", "Advanced analytics", "Priority support", "Custom domains"], },
}, {
{ title: 'Free Estimates',
id: "enterprise", badge: "For Scale", price: "Custom", subtitle: "Enterprise-grade performance", buttons: [{ text: "Contact Sales", href: "/contact" }], description: 'No obligation quotes for all services. Transparent pricing with no hidden fees.',
features: [ icon: CheckCircle,
"Unlimited requests", "Unlimited storage", "Real-time analytics", "24/7 phone support", "Custom integrations", "Dedicated account manager"], },
}, ];
];
const metrics = [ const footerColumns = [
{ {
id: "1", icon: TrendingUp, title: 'Services',
title: "Performance", value: "99.99%"}, items: [
{ { label: 'Plumbing', href: '#services' },
id: "2", icon: Zap, { label: 'Painting', href: '#services' },
title: "Speed", value: "<100ms"}, { label: 'Electrical', href: '#services' },
{ { label: 'Flooring', href: '#services' },
id: "3", icon: Users, ],
title: "Users", value: "50K+"}, },
{ {
id: "4", icon: Award, title: 'Company',
title: "Uptime", value: "99.9%"}, items: [
]; { label: 'About Us', href: '#about' },
{ label: 'Contact', href: '#contact' },
const testimonials = [ { label: 'Testimonials', href: '#' },
{ { label: 'Blog', href: '#' },
id: "1", name: "Sarah Johnson", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop"}, ],
{ },
id: "2", name: "Michael Chen", imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop"}, {
{ title: 'Support',
id: "3", name: "Emma Davis", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&_wi=1"}, items: [
{ { label: 'Help Center', href: '#' },
id: "4", name: "James Wilson", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&_wi=1"}, { label: 'FAQ', href: '#' },
]; { label: 'Emergency Service', href: 'tel:804-938-0669' },
{ label: 'Schedule Service', href: '#contact' },
const faqs = [ ],
{ },
id: "1", title: "How do I get started?", content: ];
"Getting started is easy! Sign up for a free account, choose your plan, and follow our setup guide. You'll be up and running in minutes."},
{
id: "2", title: "What makes your service fast?", content:
"We use advanced caching strategies, CDN distribution, and optimized infrastructure to ensure lightning-fast performance across all regions."},
{
id: "3", title: "Can I upgrade or downgrade anytime?", content:
"Absolutely! You can change your plan at any time. Upgrades take effect immediately, and downgrades apply at the next billing cycle."},
{
id: "4", title: "What support do you offer?", content:
"We provide email support for all plans, priority support for Professional and above, and 24/7 phone support for Enterprise customers."},
{
id: "5", title: "Is my data secure?", content:
"Yes, we use enterprise-grade security with encryption at rest and in transit. All data is backed up daily and complies with industry standards."},
{
id: "6", title: "Do you offer a free trial?", content:
"Yes! We offer a 14-day free trial with full access to all Professional features. No credit card required to get started."},
];
const footerColumns = [
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Security", href: "#security" },
],
},
{
title: "Company", items: [
{ label: "About", href: "/" },
{ label: "Blog", href: "/" },
{ label: "Careers", href: "/" },
],
},
{
title: "Resources", items: [
{ label: "Documentation", href: "/" },
{ label: "API Reference", href: "/" },
{ label: "Support", href: "/" },
],
},
];
export default function Home() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="hover-magnetic" defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="rounded"
contentWidth="medium" contentWidth="medium"
sizing="medium" sizing="mediumLarge"
background="none" background="circleGradient"
cardStyle="solid" cardStyle="glass-elevated"
primaryButtonStyle="gradient" primaryButtonStyle="gradient"
secondaryButtonStyle="glass" secondaryButtonStyle="glass"
headingFontWeight="bold" headingFontWeight="bold"
> >
<NavbarLayoutFloatingOverlay <NavbarStyleFullscreen
navItems={navItems} navItems={navItems}
brandName="Fast" brandName="Earl Boys Services"
button={{ text: "Get Started", href: "contact" }} bottomLeftText="Richmond, VA"
bottomRightText="804-938-0669"
/> />
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroLogo <HeroBillboardGallery
logoText="Fast" background={{ variant: 'radial-gradient' }}
description="Optimized performance and lightning-fast load times for your website" title="Professional Home Services in Richmond, VA"
buttons={[ description="Expert plumbing, painting, electrical, and flooring services you can trust. 15 years of excellence."
{ text: "Start Free Trial", href: "/contact" }, tag="Trusted Local Service"
{ text: "View Docs", href: "/" }, mediaItems={[
{ imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80', imageAlt: 'Professional home services' },
{ imageSrc: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=600&q=80', imageAlt: 'Plumbing expertise' },
{ imageSrc: 'https://images.unsplash.com/photo-1564543645419-d59e79b6837d?w=600&q=80', imageAlt: 'Quality painting' },
]}
mediaAnimation="none"
buttons={[
{ text: 'Get Free Estimate', href: '#contact' },
{ text: 'Call Now', href: 'tel:804-938-0669' },
]} ]}
imageSrc="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=600&fit=crop"
imageAlt="Fast performance illustration"
/> />
</div> </div>
<div id="features" data-section="features">
<div className="py-20"> <div id="services" data-section="services">
<FeatureCardSeven <FeatureCardSeven
title="Why Choose Our Platform" features={features}
description="We deliver exceptional performance and speed optimization for your business" title="Our Services"
features={features} description="Comprehensive home services tailored to your needs. Quality workmanship and professional service."
animationType="slide-up" textboxLayout="default"
textboxLayout="default" animationType="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
/> />
</div>
</div> </div>
<div id="metrics" data-section="metrics">
<div className="py-20"> <div id="about" data-section="about">
<MetricCardThree <SplitAbout
title="Our Performance Metrics" title="Why Choose Earl Boys Services?"
description="Industry-leading uptime and speed performance" description="With over 15 years in the home services industry, we've built our reputation on reliability, expertise, and customer satisfaction. Our team of licensed professionals is dedicated to delivering exceptional results on every project."
metrics={metrics} textboxLayout="default"
animationType="slide-up" useInvertedBackground={false}
textboxLayout="default" mediaAnimation="none"
useInvertedBackground={false} bulletPoints={bulletPoints}
/> imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
</div> imageAlt="Our team of professionals"
</div> imagePosition="right"
<div id="pricing" data-section="pricing"> buttons={[{ text: 'Learn More', href: '#contact' }]}
<div className="py-20"> />
<PricingCardEight
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your needs"
plans={plans}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
</div>
<div id="testimonials" data-section="testimonials">
<div className="py-20">
<TestimonialCardTwelve
testimonials={testimonials}
cardTitle="Join 50,000+ satisfied customers who trust our platform"
cardTag="Customer Testimonials"
cardAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
</div>
<div id="faq" data-section="faq">
<div className="py-20">
<FaqSplitMedia
faqs={faqs}
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop"
imageAlt="FAQ support"
title="Frequently Asked Questions"
description="Find answers to common questions about our service"
textboxLayout="default"
faqsAnimation="slide-up"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<div className="py-20"> <ContactSplit
<ContactText tag="Get In Touch"
text="Ready to optimize your website performance? Start your free trial today and experience the difference." title="Schedule Your Free Estimate"
animationType="entrance-slide" description="Contact us today for a free, no-obligation estimate. Our team is ready to help with all your home service needs."
buttons={[ background={{ variant: 'sparkles-gradient' }}
{ text: "Start Free Trial", href: "/contact" }, useInvertedBackground={false}
{ text: "Schedule Demo", href: "/" }, mediaAnimation="none"
]} imageSrc="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80"
background={{ variant: "plain" }} imageAlt="Professional team"
useInvertedBackground={false} mediaPosition="right"
/> buttonText="Request Quote"
</div> inputPlaceholder="Enter your email"
</div> onSubmit={(email) => {
<div id="footer" data-section="footer"> console.log('Email submitted:', email);
<FooterBaseCard }}
logoText="Fast"
columns={footerColumns}
copyrightText="© 2025 Fast. All rights reserved."
/> />
</div> </div>
<footer data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Earl Boys Services LLC. All rights reserved."
bottomRightText="Serving Richmond, VA with Professional Home Services"
/>
</footer>
</ThemeProvider> </ThemeProvider>
); );
}; }
export default Home;

View File

@@ -27,9 +27,9 @@ const Portfolio = () => {
title: "Web Application Development", description: "Full-stack web application with responsive design and modern architecture.", icon: Code, title: "Web Application Development", description: "Full-stack web application with responsive design and modern architecture.", icon: Code,
mediaItems: [ mediaItems: [
{ {
imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop&_wi=2", imageAlt: "Web application interface"}, imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=500&fit=crop", imageAlt: "Web application interface"},
{ {
imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop&_wi=2", imageAlt: "Mobile responsive design"}, imageSrc: "https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=500&h=500&fit=crop", imageAlt: "Mobile responsive design"},
], ],
}, },
{ {
@@ -64,9 +64,9 @@ const Portfolio = () => {
{ {
id: "design", groupTitle: "Design Team", members: [ id: "design", groupTitle: "Design Team", members: [
{ {
id: "3", title: "Emma Davis", subtitle: "UI/UX Designer", detail: "emma.davis@company.com", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&_wi=2", imageAlt: "Emma Davis"}, id: "3", title: "Emma Davis", subtitle: "UI/UX Designer", detail: "emma.davis@company.com", imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop", imageAlt: "Emma Davis"},
{ {
id: "4", title: "James Wilson", subtitle: "Brand Designer", detail: "james.wilson@company.com", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&_wi=2", imageAlt: "James Wilson"}, id: "4", title: "James Wilson", subtitle: "Brand Designer", detail: "james.wilson@company.com", imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop", imageAlt: "James Wilson"},
{ {
id: "5", title: "Sophie Martin", subtitle: "Graphic Designer", detail: "sophie.martin@company.com", imageSrc: "https://images.unsplash.com/photo-1517849845537-1d51a20414de?w=400&h=400&fit=crop", imageAlt: "Sophie Martin"}, id: "5", title: "Sophie Martin", subtitle: "Graphic Designer", detail: "sophie.martin@company.com", imageSrc: "https://images.unsplash.com/photo-1517849845537-1d51a20414de?w=400&h=400&fit=crop", imageAlt: "Sophie Martin"},
], ],