Update src/app/product/[id]/page.tsx
This commit is contained in:
@@ -1,57 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import Link from "next/link";
|
||||
import { CheckCircle, Users, Star, TrendingDown, Zap, Heart, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { CheckCircle, Shield, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";
|
||||
|
||||
export default function ProductPage() {
|
||||
const params = useParams();
|
||||
const productId = params?.id as string;
|
||||
|
||||
// Mock product data - would be fetched from API in real app
|
||||
const productMap: Record<
|
||||
string,
|
||||
{
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
}
|
||||
> = {
|
||||
iphone14pro: {
|
||||
title: "Premium iPhone 14 Pro - Certified Refurbished",
|
||||
description:
|
||||
"Experience flagship performance with the iPhone 14 Pro. Certified refurbished, tested, and warranty-backed. Save 40% compared to retail prices.",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/man-shirt-using-smartphone_23-2147711134.jpg?_wi=2",
|
||||
imageAlt: "iPhone 14 Pro refurbished",
|
||||
},
|
||||
samsunggalaxy: {
|
||||
title: "Samsung Galaxy S23 Ultra - Excellent Condition",
|
||||
description:
|
||||
"Premium Android experience with the Galaxy S23 Ultra. 100% functional, expertly refurbished, and backed by our 2-year warranty.",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-photo-camera-indoors-still-life_23-2150630615.jpg?_wi=2",
|
||||
imageAlt: "Samsung Galaxy S23 Ultra refurbished",
|
||||
},
|
||||
googlepixel: {
|
||||
title: "Google Pixel 8 Pro - Like New Condition",
|
||||
description:
|
||||
"Advanced computational photography meets flagship performance. Certified refurbished Google Pixel with comprehensive warranty protection.",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/young-friends-traveling-through-japan_23-2149287972.jpg?_wi=2",
|
||||
imageAlt: "Google Pixel 8 Pro refurbished",
|
||||
},
|
||||
};
|
||||
|
||||
const product =
|
||||
productMap[productId] || productMap["iphone14pro"];
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -60,169 +22,57 @@ export default function ProductPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
navItems={navItems}
|
||||
brandName="RePhone Store"
|
||||
button={{ text: "Shop Now", href: "/shop" }}
|
||||
button={{
|
||||
text: "Shop Now", href: "/shop"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
{/* Product Hero Section */}
|
||||
<div id="hero" data-section="hero" className="hero-premium-section">
|
||||
<HeroSplitKpi
|
||||
title={product.title}
|
||||
description={product.description}
|
||||
background={{ variant: "aurora" }}
|
||||
title="Premium Refurbished Smartphone"
|
||||
description="Experience the perfect blend of premium quality and exceptional value with our certified refurbished devices."
|
||||
background={{ variant: "plain" }}
|
||||
kpis={[
|
||||
{
|
||||
value: "10K+",
|
||||
label: "Happy Customers",
|
||||
},
|
||||
value: "2-Year", label: "Full Warranty"},
|
||||
{
|
||||
value: "2-Year",
|
||||
label: "Warranty Coverage",
|
||||
},
|
||||
value: "99.8%", label: "Quality Tested"},
|
||||
{
|
||||
value: "24h",
|
||||
label: "Fast Shipping",
|
||||
},
|
||||
value: "24h", label: "Fast Shipping"},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
tag="100% Certified Refurbished"
|
||||
tag="Certified Refurbished"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Add to Cart",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Add to Cart", href: "/shop"},
|
||||
{
|
||||
text: "Compare Models",
|
||||
href: "/shop",
|
||||
},
|
||||
text: "Learn More", href: "/about"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc={product.imageSrc}
|
||||
imageAlt={product.imageAlt}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg"
|
||||
imageAlt="Premium refurbished smartphone"
|
||||
mediaAnimation="opacity"
|
||||
imagePosition="right"
|
||||
className="hero-section-premium"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "10000",
|
||||
title: "customers",
|
||||
description: "Satisfied customers worldwide trusting RePhone Store",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "99.8",
|
||||
title: "satisfaction",
|
||||
description:
|
||||
"Customer satisfaction rate with industry-leading quality",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "50",
|
||||
title: "percent",
|
||||
description: "Average savings compared to retail prices",
|
||||
icon: TrendingDown,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "24",
|
||||
title: "hours",
|
||||
description: "Fast shipping to your doorstep",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
title="RePhone Store by the Numbers"
|
||||
description="Trusted quality, reliability, and exceptional value for refurbished smartphones"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Mitchell, Tech Entrepreneur",
|
||||
date: "Date: 15 November 2024",
|
||||
title: "Exceptional Quality and Unbeatable Value",
|
||||
quote:
|
||||
"I purchased a refurbished iPhone 14 Pro from RePhone Store and I'm absolutely impressed. The device looks and functions like new. The 2-year warranty gave me complete peace of mind, and the customer service was outstanding. Highly recommended!",
|
||||
tag: "Premium Customer",
|
||||
avatarSrc:
|
||||
"http://img.b2bpic.net/free-photo/happy-businessman-with-smartphone-smiling-camera_23-2148112961.jpg",
|
||||
avatarAlt: "Sarah Mitchell",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/happy-businessman-with-smartphone-smiling-camera_23-2148112961.jpg?_wi=2",
|
||||
imageAlt: "Sarah Mitchell testimonial",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen, Business Professional",
|
||||
date: "Date: 12 November 2024",
|
||||
title: "Best Purchase Decision I Made This Year",
|
||||
quote:
|
||||
"Saved 40% on a Samsung Galaxy S23 Ultra without any compromises on quality. Every component works perfectly, the battery health is excellent, and the device arrived beautifully packaged within 24 hours. RePhone Store is my go-to for refurbished phones.",
|
||||
tag: "Verified Buyer",
|
||||
avatarSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg",
|
||||
avatarAlt: "James Chen",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg?_wi=2",
|
||||
imageAlt: "James Chen testimonial",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Rodriguez, College Student",
|
||||
date: "Date: 08 November 2024",
|
||||
title: "Affordable Premium Technology",
|
||||
quote:
|
||||
"As a student, budget is important. RePhone Store helped me get a high-end Google Pixel phone at a fraction of the cost. The refurbishment quality is remarkable, and I love that I'm making an eco-friendly choice. Outstanding value!",
|
||||
tag: "Smart Shopper",
|
||||
avatarSrc:
|
||||
"http://img.b2bpic.net/free-photo/closeup-shot-young-male-blue-suit_181624-55728.jpg",
|
||||
avatarAlt: "Emma Rodriguez",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/closeup-shot-young-male-blue-suit_181624-55728.jpg?_wi=2",
|
||||
imageAlt: "Emma Rodriguez testimonial",
|
||||
},
|
||||
]}
|
||||
title="What Our Customers Say"
|
||||
description="Join thousands of satisfied customers who've discovered quality, value, and reliability with RePhone Store"
|
||||
tag="Customer Reviews"
|
||||
tagIcon={Heart}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="RePhone Store"
|
||||
@@ -230,24 +80,16 @@ export default function ProductPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com/rephonestore",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "https://facebook.com/rephonestore", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/rephonestore",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
href: "https://twitter.com/rephonestore", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com/rephonestore",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "https://instagram.com/rephonestore", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/company/rephonestore",
|
||||
ariaLabel: "LinkedIn",
|
||||
},
|
||||
href: "https://linkedin.com/company/rephonestore", ariaLabel: "LinkedIn"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user