Merge version_3 into main #2
@@ -96,15 +96,15 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Home Repair", description: "Quick fixes and comprehensive repairs for your home. From minor maintenance to major renovations, we handle it all with professional expertise.\n\nStarting at $150", imageSrc: "http://img.b2bpic.net/free-photo/top-view-steel-hammer-with-other-construction-elements-tools_23-2150576395.jpg", imageAlt: "Home repair services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
title: "Home Repair", description: "Quick fixes and comprehensive repairs for your home. From minor maintenance to major renovations, we handle it all with professional expertise.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-steel-hammer-with-other-construction-elements-tools_23-2150576395.jpg", imageAlt: "Home repair services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "AC Installation", description: "Professional air conditioning installation and maintenance. Energy-efficient systems with expert setup and ongoing support for optimal comfort.\n\nStarting at $2,500", imageSrc: "http://img.b2bpic.net/free-photo/electrician-connecting-wires-work-inside-panel-engineer-with-tool_169016-68074.jpg", imageAlt: "AC installation services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
title: "AC Installation", description: "Professional air conditioning installation and maintenance. Energy-efficient systems with expert setup and ongoing support for optimal comfort.", imageSrc: "http://img.b2bpic.net/free-photo/electrician-connecting-wires-work-inside-panel-engineer-with-tool_169016-68074.jpg", imageAlt: "AC installation services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Electrical Work", description: "Safe, certified electrical services for residential and commercial properties. Repairs, installations, and maintenance by licensed professionals.\n\nStarting at $200", imageSrc: "http://img.b2bpic.net/free-photo/male-electrician-works-switchboard-overalls-against-backdrop-emergency-lighting_169016-66688.jpg", imageAlt: "Electrical work services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
title: "Electrical Work", description: "Safe, certified electrical services for residential and commercial properties. Repairs, installations, and maintenance by licensed professionals.", imageSrc: "http://img.b2bpic.net/free-photo/male-electrician-works-switchboard-overalls-against-backdrop-emergency-lighting_169016-66688.jpg", imageAlt: "Electrical work services", buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
animationType="blur-reveal"
|
||||
@@ -255,4 +255,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
280
src/app/products/page.tsx
Normal file
280
src/app/products/page.tsx
Normal file
@@ -0,0 +1,280 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Filter, Mail } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
const FEATURED_PRODUCTS = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Professional Hammer Set',
|
||||
price: '$49.99',
|
||||
rating: 4.8,
|
||||
reviewCount: '245',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/top-view-steel-hammer-with-other-construction-elements-tools_23-2150576395.jpg',
|
||||
imageAlt: 'Professional hammer set',
|
||||
category: 'Tools',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Electric Drill Professional',
|
||||
price: '$129.99',
|
||||
rating: 4.9,
|
||||
reviewCount: '512',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/electrician-connecting-wires-work-inside-panel-engineer-with-tool_169016-68074.jpg',
|
||||
imageAlt: 'Electric drill',
|
||||
category: 'Power Tools',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Safety Equipment Bundle',
|
||||
price: '$89.99',
|
||||
rating: 4.7,
|
||||
reviewCount: '189',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/male-electrician-works-switchboard-overalls-against-backdrop-emergency-lighting_169016-66688.jpg',
|
||||
imageAlt: 'Safety equipment',
|
||||
category: 'Safety',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Measuring Tape Premium',
|
||||
price: '$24.99',
|
||||
rating: 4.6,
|
||||
reviewCount: '328',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/top-view-steel-hammer-with-other-construction-elements-tools_23-2150576395.jpg',
|
||||
imageAlt: 'Measuring tape',
|
||||
category: 'Tools',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Electrical Testing Kit',
|
||||
price: '$199.99',
|
||||
rating: 4.9,
|
||||
reviewCount: '156',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/electrician-connecting-wires-work-inside-panel-engineer-with-tool_169016-68074.jpg',
|
||||
imageAlt: 'Electrical testing kit',
|
||||
category: 'Power Tools',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Work Gloves Protective',
|
||||
price: '$19.99',
|
||||
rating: 4.5,
|
||||
reviewCount: '412',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/male-electrician-works-switchboard-overalls-against-backdrop-emergency-lighting_169016-66688.jpg',
|
||||
imageAlt: 'Work gloves',
|
||||
category: 'Safety',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Screwdriver Set Pro',
|
||||
price: '$34.99',
|
||||
rating: 4.7,
|
||||
reviewCount: '267',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/top-view-steel-hammer-with-other-construction-elements-tools_23-2150576395.jpg',
|
||||
imageAlt: 'Screwdriver set',
|
||||
category: 'Tools',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Power Saw Industrial',
|
||||
price: '$349.99',
|
||||
rating: 4.8,
|
||||
reviewCount: '89',
|
||||
imageSrc: 'http://img.b2bpic.net/free-photo/electrician-connecting-wires-work-inside-panel-engineer-with-tool_169016-68074.jpg',
|
||||
imageAlt: 'Power saw',
|
||||
category: 'Power Tools',
|
||||
},
|
||||
];
|
||||
|
||||
const CATEGORIES = ['All', 'Tools', 'Power Tools', 'Safety'];
|
||||
|
||||
export default function ProductCatalogPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||
|
||||
const filteredProducts = selectedCategory === 'All'
|
||||
? FEATURED_PRODUCTS
|
||||
: FEATURED_PRODUCTS.filter(p => p.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="ServicePro"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#why-us" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+1-800-555-0000"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Professional Products & Equipment"
|
||||
description="Browse our curated selection of high-quality tools and equipment for your service needs. Expert-approved, trusted by professionals."
|
||||
background={{ variant: "plain" }}
|
||||
tag="Premium Catalog"
|
||||
tagIcon={Filter}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{ text: "Browse All", href: "#products" },
|
||||
{ text: "Get Quote", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/auto-repairman-businessman-analyzing-reports-while-working-car-workshop_637285-7576.jpg"
|
||||
imageAlt="Professional products and equipment"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<div className="py-20 w-full flex items-center justify-center">
|
||||
<div className="w-content-width max-w-full px-4 md:px-0">
|
||||
{/* Filter Section */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold mb-6 text-foreground">Filter Products</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{CATEGORIES.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-6 py-2 rounded-lg font-medium transition-all ${
|
||||
selectedCategory === category
|
||||
? 'bg-primary-cta text-primary-cta-text'
|
||||
: 'bg-card text-foreground border border-accent hover:border-primary-cta'
|
||||
}`}
|
||||
aria-pressed={selectedCategory === category}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60 mt-4">
|
||||
Showing {filteredProducts.length} product{filteredProducts.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{filteredProducts.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="bg-card rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="relative aspect-square overflow-hidden bg-background">
|
||||
<img
|
||||
src={product.imageSrc}
|
||||
alt={product.imageAlt}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{product.category && (
|
||||
<p className="text-xs text-accent font-semibold mb-2 uppercase tracking-wide">
|
||||
{product.category}
|
||||
</p>
|
||||
)}
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2 line-clamp-2">
|
||||
{product.name}
|
||||
</h3>
|
||||
<div className="flex items-center mb-3">
|
||||
<span className="text-sm text-accent">★</span>
|
||||
<span className="text-sm font-medium text-foreground ml-1">{product.rating}</span>
|
||||
<span className="text-xs text-foreground/60 ml-1">({product.reviewCount} reviews)</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-primary-cta mb-4">
|
||||
{product.price}
|
||||
</p>
|
||||
<button
|
||||
className="w-full bg-primary-cta hover:opacity-90 text-primary-cta-text py-2 rounded-lg font-medium transition-opacity"
|
||||
onClick={() => alert(`Added ${product.name} to cart`)}
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Need Help Finding the Right Product?"
|
||||
description="Our product specialists are ready to assist you with personalized recommendations and bulk orders."
|
||||
buttons={[
|
||||
{ text: "Contact Sales", href: "tel:+1-800-555-0000" },
|
||||
{ text: "Request Catalog", href: "#" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "About Us", href: "/#why-us" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Products", items: [
|
||||
{ label: "Tools", href: "/products" },
|
||||
{ label: "Power Tools", href: "/products" },
|
||||
{ label: "Safety Equipment", href: "/products" },
|
||||
{ label: "View All", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Product Info", href: "/products" },
|
||||
{ label: "Shipping & Returns", href: "#" },
|
||||
{ label: "Warranty", href: "#" },
|
||||
{ label: "Contact Us", href: "tel:+1-800-555-0000" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 ServicePro. All rights reserved."
|
||||
bottomRightText="Premium Products & Expert Service"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user