Merge version_1 into main #2
@@ -18,9 +18,7 @@ export default function AccountPage() {
|
||||
];
|
||||
|
||||
const navButton = {
|
||||
text: "List Your Item",
|
||||
href: "sell",
|
||||
};
|
||||
text: "List Your Item", href: "sell"};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -86,31 +84,13 @@ export default function AccountPage() {
|
||||
<ProductCardFour
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Vintage Leather Sofa",
|
||||
price: "$450",
|
||||
variant: "Brown • 2 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg?_wi=5",
|
||||
imageAlt: "Vintage leather sofa",
|
||||
isFavorited: false,
|
||||
id: "1", name: "Vintage Leather Sofa", price: "$450", variant: "Brown • 2 Colors", imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg", imageAlt: "Vintage leather sofa", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Web Development Services",
|
||||
price: "$80/hour",
|
||||
variant: "Full-Stack • 5+ Reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg?_wi=5",
|
||||
imageAlt: "Web development service",
|
||||
isFavorited: false,
|
||||
id: "2", name: "Web Development Services", price: "$80/hour", variant: "Full-Stack • 5+ Reviews", imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg", imageAlt: "Web development service", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Modern Apartment Rental",
|
||||
price: "$1,200/mo",
|
||||
variant: "2 Bed • Downtown",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg?_wi=5",
|
||||
imageAlt: "Modern apartment",
|
||||
isFavorited: false,
|
||||
id: "3", name: "Modern Apartment Rental", price: "$1,200/mo", variant: "2 Bed • Downtown", imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg", imageAlt: "Modern apartment", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
title="My Active Listings"
|
||||
@@ -127,32 +107,14 @@ export default function AccountPage() {
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Buyer",
|
||||
company: "Purchased Sofa",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=6",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", role: "Buyer", company: "Purchased Sofa", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Maria Garcia",
|
||||
role: "Service Client",
|
||||
company: "Web Design Project",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg?_wi=5",
|
||||
imageAlt: "Maria Garcia",
|
||||
},
|
||||
id: "2", name: "Maria Garcia", role: "Service Client", company: "Web Design Project", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg", imageAlt: "Maria Garcia"},
|
||||
{
|
||||
id: "3",
|
||||
name: "David Chen",
|
||||
role: "Tenant",
|
||||
company: "Apartment Rental",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg?_wi=5",
|
||||
imageAlt: "David Chen",
|
||||
},
|
||||
id: "3", name: "David Chen", role: "Tenant", company: "Apartment Rental", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg", imageAlt: "David Chen"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "250+", label: "Total Reviews" },
|
||||
@@ -172,47 +134,30 @@ export default function AccountPage() {
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I update my profile information?",
|
||||
content:
|
||||
"Click the 'Edit Profile' button on your account page. You can update your name, profile picture, bio, contact information, and payment methods. Changes take effect immediately.",
|
||||
},
|
||||
id: "1", title: "How do I update my profile information?", content:
|
||||
"Click the 'Edit Profile' button on your account page. You can update your name, profile picture, bio, contact information, and payment methods. Changes take effect immediately."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How can I improve my seller rating?",
|
||||
content:
|
||||
"Respond quickly to inquiries, be honest in descriptions, deliver items as promised, and maintain professional communication. High ratings help you attract more buyers and sell faster.",
|
||||
},
|
||||
id: "2", title: "How can I improve my seller rating?", content:
|
||||
"Respond quickly to inquiries, be honest in descriptions, deliver items as promised, and maintain professional communication. High ratings help you attract more buyers and sell faster."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I delete or archive old listings?",
|
||||
content:
|
||||
"Yes. From your My Listings dashboard, you can archive, edit, or delete listings at any time. Archived listings can be reactivated later without losing your history.",
|
||||
},
|
||||
id: "3", title: "Can I delete or archive old listings?", content:
|
||||
"Yes. From your My Listings dashboard, you can archive, edit, or delete listings at any time. Archived listings can be reactivated later without losing your history."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I withdraw payment from sales?",
|
||||
content:
|
||||
"Navigate to the Payments section in your account settings. Add your bank account or payment method. Withdrawals are processed within 2-3 business days to your preferred account.",
|
||||
},
|
||||
id: "4", title: "How do I withdraw payment from sales?", content:
|
||||
"Navigate to the Payments section in your account settings. Add your bank account or payment method. Withdrawals are processed within 2-3 business days to your preferred account."},
|
||||
{
|
||||
id: "5",
|
||||
title: "What should I do if I receive a complaint?",
|
||||
content:
|
||||
"Review the complaint details and respond professionally within 48 hours. Try to resolve the issue with the buyer. ClassifiedHub moderators will help if needed. Resolved complaints stay on your record but show your commitment to service.",
|
||||
},
|
||||
id: "5", title: "What should I do if I receive a complaint?", content:
|
||||
"Review the complaint details and respond professionally within 48 hours. Try to resolve the issue with the buyer. ClassifiedHub moderators will help if needed. Resolved complaints stay on your record but show your commitment to service."},
|
||||
{
|
||||
id: "6",
|
||||
title: "How do I enable two-factor authentication?",
|
||||
content:
|
||||
"Go to Settings > Security > Two-Factor Authentication. Follow the prompts to enable 2FA via SMS or authenticator app. This adds an extra security layer to your account.",
|
||||
},
|
||||
id: "6", title: "How do I enable two-factor authentication?", content:
|
||||
"Go to Settings > Security > Two-Factor Authentication. Follow the prompts to enable 2FA via SMS or authenticator app. This adds an extra security layer to your account."},
|
||||
]}
|
||||
sideTitle="Account Management"
|
||||
sideDescription="Learn how to manage your profile, listings, payments, and security settings"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -220,8 +165,7 @@ export default function AccountPage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "listings" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "Seller Dashboard", href: "/my-listings" },
|
||||
@@ -229,8 +173,7 @@ export default function AccountPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "about" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
@@ -238,8 +181,7 @@ export default function AccountPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "#safety" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
|
||||
@@ -18,8 +18,7 @@ export default function ContactPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "/" },
|
||||
{ label: "How It Works", href: "/" },
|
||||
{ label: "My Account", href: "/my-listings" },
|
||||
@@ -27,8 +26,7 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Blog", href: "/" },
|
||||
@@ -36,8 +34,7 @@ export default function ContactPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "/" },
|
||||
{ label: "FAQ", href: "/" },
|
||||
{ label: "Terms of Service", href: "/" },
|
||||
@@ -85,41 +82,24 @@ export default function ContactPage() {
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I check a seller's complaint history?",
|
||||
content: "Each seller profile displays their complete complaint record and ratings. You can view verified feedback from previous buyers and see any resolved issues before making a purchase.",
|
||||
},
|
||||
id: "1", title: "How do I check a seller's complaint history?", content: "Each seller profile displays their complete complaint record and ratings. You can view verified feedback from previous buyers and see any resolved issues before making a purchase."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How does the listing status indicator work?",
|
||||
content: "Green pulsing dot = Listed within 24 hours. Orange pulsing dot = Listed 2-3 days ago. Off dot = No updates for 3+ days. This helps you find the most recently active listings.",
|
||||
},
|
||||
id: "2", title: "How does the listing status indicator work?", content: "Green pulsing dot = Listed within 24 hours. Orange pulsing dot = Listed 2-3 days ago. Off dot = No updates for 3+ days. This helps you find the most recently active listings."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I delete or edit my comments and negotiations?",
|
||||
content: "You can delete your comments, but they'll remain visible with a 'Deleted' label. This maintains transparency and prevents manipulation of seller records.",
|
||||
},
|
||||
id: "3", title: "Can I delete or edit my comments and negotiations?", content: "You can delete your comments, but they'll remain visible with a 'Deleted' label. This maintains transparency and prevents manipulation of seller records."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I track views and compare my listings?",
|
||||
content: "Visit your 'My Listings' dashboard to see detailed analytics including view counts, comparison charts, and performance metrics for each listing.",
|
||||
},
|
||||
id: "4", title: "How do I track views and compare my listings?", content: "Visit your 'My Listings' dashboard to see detailed analytics including view counts, comparison charts, and performance metrics for each listing."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is dark mode available?",
|
||||
content: "Yes! Toggle dark mode from the header. Your preference is saved automatically across all your sessions.",
|
||||
},
|
||||
id: "5", title: "Is dark mode available?", content: "Yes! Toggle dark mode from the header. Your preference is saved automatically across all your sessions."},
|
||||
{
|
||||
id: "6",
|
||||
title: "What languages does ClassifiedHub support?",
|
||||
content: "We support Arabic, English, French, and Spanish. Change your language preference from the account dropdown menu.",
|
||||
},
|
||||
id: "6", title: "What languages does ClassifiedHub support?", content: "We support Arabic, English, French, and Spanish. Change your language preference from the account dropdown menu."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about buying, selling, and staying safe on ClassifiedHub"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,26 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ListingDetailPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse Listings", id: "listings" },
|
||||
{ name: "Sell", id: "sell" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const navButton = {
|
||||
text: "List Your Item",
|
||||
href: "sell",
|
||||
};
|
||||
|
||||
export default function ListingDetailPage({ params }: { params: { id: string } }) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -37,158 +21,48 @@ export default function ListingDetailPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={navButton}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse Listings", id: "/listings" },
|
||||
{ name: "Sell", id: "/sell" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "List Your Item", href: "/sell"}}
|
||||
brandName="ClassifiedHub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="listing-detail" data-section="listing-detail" className="mx-auto px-4 md:px-6 py-12">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<Link href="/" className="text-primary-cta hover:underline text-sm font-medium">
|
||||
← Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||
<div className="rounded-lg overflow-hidden bg-white shadow-lg">
|
||||
<img
|
||||
src="http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg"
|
||||
alt="Vintage Leather Sofa"
|
||||
className="w-full h-96 object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-start">
|
||||
<div className="mb-4">
|
||||
<span className="inline-block px-3 py-1 bg-accent text-white text-xs font-semibold rounded-full mb-3">
|
||||
Featured
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-2">
|
||||
Vintage Leather Sofa
|
||||
</h1>
|
||||
<p className="text-gray-600 text-lg mb-4">Brown • 2 Colors Available</p>
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="text-4xl font-extrabold text-primary-cta mb-2">$450</p>
|
||||
<p className="text-gray-500">Negotiable</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-accent font-bold">✓</span>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">Verified Seller</p>
|
||||
<p className="text-sm text-gray-600">Ahmed Karim • 98% Positive Rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-accent font-bold">✓</span>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">No Complaints</p>
|
||||
<p className="text-sm text-gray-600">Clean record • 250+ successful transactions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-accent font-bold">✓</span>
|
||||
<div>
|
||||
<p className="font-semibold text-foreground">Listed 2 Hours Ago</p>
|
||||
<p className="text-sm text-gray-600">Active • Recently updated</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg font-semibold hover:opacity-90 transition mb-3">
|
||||
Contact Seller
|
||||
</button>
|
||||
<button className="w-full border-2 border-primary-cta text-primary-cta py-3 rounded-lg font-semibold hover:bg-gray-50 transition">
|
||||
View Similar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-6 md:p-8 mb-12 shadow-sm border border-gray-200">
|
||||
<h2 className="text-2xl font-extrabold text-foreground mb-4">Description</h2>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Beautiful vintage leather sofa in excellent condition. Genuine brown leather with minimal wear. Perfect for living rooms or office spaces. Dimensions: 84" W x 36" D x 30" H. Smoke-free home.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Local pickup available in downtown area. Delivery can be arranged for additional fee. Must sell by end of month. Contact for more photos or details.
|
||||
</p>
|
||||
</div>
|
||||
<h1 className="text-4xl font-extrabold mb-4">Listing ID: {params.id}</h1>
|
||||
<p className="text-gray-600 text-lg">Detailed listing information would be loaded here based on the ID.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="related-sellers" data-section="related-sellers">
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ahmed Karim",
|
||||
role: "Verified Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg?_wi=4",
|
||||
imageAlt: "Ahmed Karim",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Fatima Hassan",
|
||||
role: "Top Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=5",
|
||||
imageAlt: "Fatima Hassan",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mohamed Ali",
|
||||
role: "Premium Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg?_wi=4",
|
||||
imageAlt: "Mohamed Ali",
|
||||
},
|
||||
]}
|
||||
title="Other Listings from This Seller"
|
||||
description="Check out more items from verified sellers"
|
||||
tag="Sellers"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I contact the seller?",
|
||||
content:
|
||||
"Click the 'Contact Seller' button above to open a direct messaging channel. You can negotiate price and arrange viewing times through ClassifiedHub's secure messaging system.",
|
||||
},
|
||||
id: "1", title: "How do I contact the seller?", content: "Click the 'Message Seller' button to start a direct conversation. All messages are tracked and timestamped for safety."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Is the price negotiable?",
|
||||
content:
|
||||
"Most listings show negotiable status. Feel free to make an offer through the messaging system. The seller will respond within 24 hours typically.",
|
||||
},
|
||||
id: "2", title: "Can I make an offer?", content: "Yes! Use the messaging feature to negotiate directly with the seller. Many items are open to offers."},
|
||||
{
|
||||
id: "3",
|
||||
title: "How do I know this seller is trustworthy?",
|
||||
content:
|
||||
"Check the seller's verified badge, rating percentage, and complaint history. All displayed information is verified by ClassifiedHub. You can also view all their completed transactions.",
|
||||
},
|
||||
id: "3", title: "Is this seller verified?", content: "Check the seller's profile badge and ratings to see their verification status and feedback history."},
|
||||
{
|
||||
id: "4",
|
||||
title: "What's the return policy?",
|
||||
content:
|
||||
"Return policies vary by seller. Discuss terms directly with the seller before purchase. ClassifiedHub recommends inspecting items in person when possible.",
|
||||
},
|
||||
id: "4", title: "How do I report a listing?", content: "If a listing violates our policies, use the 'Report' button to notify our moderation team."},
|
||||
{
|
||||
id: "5", title: "Can I save this listing?", content: "Click the heart icon to save the listing to your favorites for later reference."},
|
||||
{
|
||||
id: "6", title: "What payment methods are available?", content: "Payment methods are arranged directly between buyer and seller for maximum flexibility."},
|
||||
]}
|
||||
sideTitle="Questions About This Listing?"
|
||||
sideDescription="Get answers to common questions about buying and arranging details"
|
||||
sideTitle="Listing Details FAQ"
|
||||
sideDescription="Common questions about this listing and how to proceed"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -196,30 +70,27 @@ export default function ListingDetailPage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
{ label: "Browse Listings", href: "listings" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "/listings" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Seller Dashboard", href: "/my-listings" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "about" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
{ label: "Blog", href: "#blog" },
|
||||
{ label: "Careers", href: "#careers" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Safety Tips", href: "#safety" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "/safety" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -31,9 +31,7 @@ export default function ListingsPage() {
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "List Your Item",
|
||||
href: "/sell",
|
||||
}}
|
||||
text: "List Your Item", href: "/sell"}}
|
||||
brandName="ClassifiedHub"
|
||||
/>
|
||||
</div>
|
||||
@@ -42,58 +40,22 @@ export default function ListingsPage() {
|
||||
<ProductCardFour
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Vintage Leather Sofa",
|
||||
price: "$450",
|
||||
variant: "Brown 2 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg?_wi=2",
|
||||
imageAlt: "Vintage leather sofa",
|
||||
isFavorited: false,
|
||||
id: "1", name: "Vintage Leather Sofa", price: "$450", variant: "Brown 2 Colors", imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg", imageAlt: "Vintage leather sofa", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Web Development Services",
|
||||
price: "$80/hour",
|
||||
variant: "Full-Stack 5+ Reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg?_wi=2",
|
||||
imageAlt: "Web development service",
|
||||
isFavorited: false,
|
||||
id: "2", name: "Web Development Services", price: "$80/hour", variant: "Full-Stack 5+ Reviews", imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg", imageAlt: "Web development service", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Modern Apartment Rental",
|
||||
price: "$1,200/mo",
|
||||
variant: "2 Bed Downtown",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg?_wi=2",
|
||||
imageAlt: "Modern apartment",
|
||||
isFavorited: false,
|
||||
id: "3", name: "Modern Apartment Rental", price: "$1,200/mo", variant: "2 Bed Downtown", imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg", imageAlt: "Modern apartment", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Gaming Laptop Bundle",
|
||||
price: "$899",
|
||||
variant: "RTX 4060 16GB RAM",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg?_wi=3",
|
||||
imageAlt: "Gaming laptop",
|
||||
isFavorited: false,
|
||||
id: "4", name: "Gaming Laptop Bundle", price: "$899", variant: "RTX 4060 16GB RAM", imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg", imageAlt: "Gaming laptop", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Professional Photography Package",
|
||||
price: "$250/session",
|
||||
variant: "Weddings Events",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg?_wi=3",
|
||||
imageAlt: "Photography service",
|
||||
isFavorited: false,
|
||||
id: "5", name: "Professional Photography Package", price: "$250/session", variant: "Weddings Events", imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg", imageAlt: "Photography service", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Cozy Studio Apartment",
|
||||
price: "$950/mo",
|
||||
variant: "1 Bed City Center",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg?_wi=3",
|
||||
imageAlt: "Studio apartment",
|
||||
isFavorited: false,
|
||||
id: "6", name: "Cozy Studio Apartment", price: "$950/mo", variant: "1 Bed City Center", imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg", imageAlt: "Studio apartment", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
title="All Available Listings"
|
||||
@@ -111,47 +73,30 @@ export default function ListingsPage() {
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How can I filter listings by category?",
|
||||
content:
|
||||
"Use the category filter on the left sidebar to narrow down results. You can select multiple categories and combine them with other filters like price range and seller rating.",
|
||||
},
|
||||
id: "1", title: "How can I filter listings by category?", content:
|
||||
"Use the category filter on the left sidebar to narrow down results. You can select multiple categories and combine them with other filters like price range and seller rating."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do I save listings for later?",
|
||||
content:
|
||||
"Click the heart icon on any listing card to add it to your favorites. Access your saved listings from your account dashboard at any time.",
|
||||
},
|
||||
id: "2", title: "How do I save listings for later?", content:
|
||||
"Click the heart icon on any listing card to add it to your favorites. Access your saved listings from your account dashboard at any time."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I contact the seller directly?",
|
||||
content:
|
||||
"Yes! Click 'Message Seller' on any listing to start a direct conversation. All messages are tracked and timestamped for transparency and safety.",
|
||||
},
|
||||
id: "3", title: "Can I contact the seller directly?", content:
|
||||
"Yes! Click 'Message Seller' on any listing to start a direct conversation. All messages are tracked and timestamped for transparency and safety."},
|
||||
{
|
||||
id: "4",
|
||||
title: "What does 'Recently Listed' mean?",
|
||||
content:
|
||||
"Recently listed items are those posted within the last 24 hours. A green pulsing dot indicates the most recent, highly active listings on the platform.",
|
||||
},
|
||||
id: "4", title: "What does 'Recently Listed' mean?", content:
|
||||
"Recently listed items are those posted within the last 24 hours. A green pulsing dot indicates the most recent, highly active listings on the platform."},
|
||||
{
|
||||
id: "5",
|
||||
title: "How do I verify a seller's rating?",
|
||||
content:
|
||||
"Each seller profile displays comprehensive ratings, verified reviews, complaint history, and transaction statistics. Click on the seller name to view their full profile.",
|
||||
},
|
||||
id: "5", title: "How do I verify a seller's rating?", content:
|
||||
"Each seller profile displays comprehensive ratings, verified reviews, complaint history, and transaction statistics. Click on the seller name to view their full profile."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Are there any hidden fees when buying?",
|
||||
content:
|
||||
"No. Prices shown are final. ClassifiedHub connects buyers and sellers directly with no additional platform fees. Payment methods are arranged between parties.",
|
||||
},
|
||||
id: "6", title: "Are there any hidden fees when buying?", content:
|
||||
"No. Prices shown are final. ClassifiedHub connects buyers and sellers directly with no additional platform fees. Payment methods are arranged between parties."},
|
||||
]}
|
||||
sideTitle="Listings Help"
|
||||
sideDescription="Find answers to common questions about browsing and managing listings on ClassifiedHub"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -159,8 +104,7 @@ export default function ListingsPage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "/listings" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Seller Dashboard", href: "/my-listings" },
|
||||
@@ -168,8 +112,7 @@ export default function ListingsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
@@ -177,8 +120,7 @@ export default function ListingsPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "/safety" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
|
||||
182
src/app/page.tsx
182
src/app/page.tsx
@@ -37,9 +37,7 @@ export default function HomePage() {
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "List Your Item",
|
||||
href: "/sell",
|
||||
}}
|
||||
text: "List Your Item", href: "/sell"}}
|
||||
brandName="ClassifiedHub"
|
||||
/>
|
||||
</div>
|
||||
@@ -53,7 +51,7 @@ export default function HomePage() {
|
||||
{ text: "List Your Item", href: "/sell" },
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-taking-notes-by-hand-laptop-sunny-day_23-2148154888.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-taking-notes-by-hand-laptop-sunny-day_23-2148154888.jpg"
|
||||
imageAlt="Online marketplace platform"
|
||||
mediaAnimation="slide-up"
|
||||
frameStyle="card"
|
||||
@@ -64,31 +62,13 @@ export default function HomePage() {
|
||||
<ProductCardFour
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Vintage Leather Sofa",
|
||||
price: "$450",
|
||||
variant: "Brown 2 Colors",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg?_wi=1",
|
||||
imageAlt: "Vintage leather sofa",
|
||||
isFavorited: false,
|
||||
id: "1", name: "Vintage Leather Sofa", price: "$450", variant: "Brown 2 Colors", imageSrc: "http://img.b2bpic.net/free-psd/male-grooming-template-design_23-2150200808.jpg", imageAlt: "Vintage leather sofa", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Web Development Services",
|
||||
price: "$80/hour",
|
||||
variant: "Full-Stack 5+ Reviews",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg?_wi=1",
|
||||
imageAlt: "Web development service",
|
||||
isFavorited: false,
|
||||
id: "2", name: "Web Development Services", price: "$80/hour", variant: "Full-Stack 5+ Reviews", imageSrc: "http://img.b2bpic.net/free-photo/manager-rd-company-specialist-office-building-solar-powered-prototype_482257-130204.jpg", imageAlt: "Web development service", isFavorited: false,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Modern Apartment Rental",
|
||||
price: "$1,200/mo",
|
||||
variant: "2 Bed Downtown",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg?_wi=1",
|
||||
imageAlt: "Modern apartment",
|
||||
isFavorited: false,
|
||||
id: "3", name: "Modern Apartment Rental", price: "$1,200/mo", variant: "2 Bed Downtown", imageSrc: "http://img.b2bpic.net/free-vector/business-card-with-abstract-shapes_23-2148363400.jpg", imageAlt: "Modern apartment", isFavorited: false,
|
||||
},
|
||||
]}
|
||||
title="Featured Listings"
|
||||
@@ -106,33 +86,17 @@ export default function HomePage() {
|
||||
<FeatureCardTwentyThree
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Check Seller Credibility",
|
||||
tags: ["Trust", "Verification"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg?_wi=1",
|
||||
imageAlt: "Seller verification badge",
|
||||
},
|
||||
id: "1", title: "Check Seller Credibility", tags: ["Trust", "Verification"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg", imageAlt: "Seller verification badge"},
|
||||
{
|
||||
id: "2",
|
||||
title: "View Complaint History",
|
||||
tags: ["Transparency", "Safety"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg?_wi=2",
|
||||
imageAlt: "Complaint records display",
|
||||
},
|
||||
id: "2", title: "View Complaint History", tags: ["Transparency", "Safety"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg", imageAlt: "Complaint records display"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Negotiate & Message",
|
||||
tags: ["Communication", "Direct"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg?_wi=3",
|
||||
imageAlt: "Real-time messaging",
|
||||
},
|
||||
id: "3", title: "Negotiate & Message", tags: ["Communication", "Direct"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg", imageAlt: "Real-time messaging"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Track Listing Activity",
|
||||
tags: ["Analytics", "Real-time"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg?_wi=4",
|
||||
imageAlt: "Listing analytics dashboard",
|
||||
},
|
||||
id: "4", title: "Track Listing Activity", tags: ["Analytics", "Real-time"],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-father-s-day-labels-collection_23-2148946402.jpg", imageAlt: "Listing analytics dashboard"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="How ClassifiedHub Works"
|
||||
@@ -147,33 +111,13 @@ export default function HomePage() {
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ahmed Karim",
|
||||
role: "Verified Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg?_wi=1",
|
||||
imageAlt: "Ahmed Karim",
|
||||
},
|
||||
id: "1", name: "Ahmed Karim", role: "Verified Seller", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg", imageAlt: "Ahmed Karim"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Fatima Hassan",
|
||||
role: "Top Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=1",
|
||||
imageAlt: "Fatima Hassan",
|
||||
},
|
||||
id: "2", name: "Fatima Hassan", role: "Top Seller", imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg", imageAlt: "Fatima Hassan"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mohamed Ali",
|
||||
role: "Premium Seller",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg?_wi=1",
|
||||
imageAlt: "Mohamed Ali",
|
||||
},
|
||||
id: "3", name: "Mohamed Ali", role: "Premium Seller", imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg", imageAlt: "Mohamed Ali"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Leila Noor",
|
||||
role: "Trusted Vendor",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-practicing-tai-chi-indoors_23-2150478922.jpg",
|
||||
imageAlt: "Leila Noor",
|
||||
},
|
||||
id: "4", name: "Leila Noor", role: "Trusted Vendor", imageSrc: "http://img.b2bpic.net/free-photo/person-practicing-tai-chi-indoors_23-2150478922.jpg", imageAlt: "Leila Noor"},
|
||||
]}
|
||||
title="Top Sellers on ClassifiedHub"
|
||||
description="Trusted merchants with verified ratings and transparent complaint records"
|
||||
@@ -189,41 +133,17 @@ export default function HomePage() {
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Buyer",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=2",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", role: "Buyer", company: "ClassifiedHub User", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ahmed Hassan",
|
||||
role: "Seller",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg?_wi=2",
|
||||
imageAlt: "Ahmed Hassan",
|
||||
},
|
||||
id: "2", name: "Ahmed Hassan", role: "Seller", company: "ClassifiedHub User", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg", imageAlt: "Ahmed Hassan"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Maria Garcia",
|
||||
role: "Buyer & Seller",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=3",
|
||||
imageAlt: "Maria Garcia",
|
||||
},
|
||||
id: "3", name: "Maria Garcia", role: "Buyer & Seller", company: "ClassifiedHub User", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg", imageAlt: "Maria Garcia"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Chen",
|
||||
role: "Premium Seller",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg?_wi=2",
|
||||
imageAlt: "David Chen",
|
||||
},
|
||||
id: "4", name: "David Chen", role: "Premium Seller", company: "ClassifiedHub User", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg", imageAlt: "David Chen"},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "50K+", label: "Active Listings" },
|
||||
@@ -243,47 +163,30 @@ export default function HomePage() {
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I check a seller's complaint history?",
|
||||
content:
|
||||
"Each seller profile displays their complete complaint record and ratings. You can view verified feedback from previous buyers and see any resolved issues before making a purchase.",
|
||||
},
|
||||
id: "1", title: "How do I check a seller's complaint history?", content:
|
||||
"Each seller profile displays their complete complaint record and ratings. You can view verified feedback from previous buyers and see any resolved issues before making a purchase."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How does the listing status indicator work?",
|
||||
content:
|
||||
"Green pulsing dot = Listed within 24 hours. Orange pulsing dot = Listed 2-3 days ago. Off dot = No updates for 3+ days. This helps you find the most recently active listings.",
|
||||
},
|
||||
id: "2", title: "How does the listing status indicator work?", content:
|
||||
"Green pulsing dot = Listed within 24 hours. Orange pulsing dot = Listed 2-3 days ago. Off dot = No updates for 3+ days. This helps you find the most recently active listings."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I delete or edit my comments and negotiations?",
|
||||
content:
|
||||
"You can delete your comments, but they'll remain visible with a 'Deleted' label. This maintains transparency and prevents manipulation of seller records.",
|
||||
},
|
||||
id: "3", title: "Can I delete or edit my comments and negotiations?", content:
|
||||
"You can delete your comments, but they'll remain visible with a 'Deleted' label. This maintains transparency and prevents manipulation of seller records."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I track views and compare my listings?",
|
||||
content:
|
||||
"Visit your 'My Listings' dashboard to see detailed analytics including view counts, comparison charts, and performance metrics for each listing.",
|
||||
},
|
||||
id: "4", title: "How do I track views and compare my listings?", content:
|
||||
"Visit your 'My Listings' dashboard to see detailed analytics including view counts, comparison charts, and performance metrics for each listing."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is dark mode available?",
|
||||
content:
|
||||
"Yes! Toggle dark mode from the header. Your preference is saved automatically across all your sessions.",
|
||||
},
|
||||
id: "5", title: "Is dark mode available?", content:
|
||||
"Yes! Toggle dark mode from the header. Your preference is saved automatically across all your sessions."},
|
||||
{
|
||||
id: "6",
|
||||
title: "What languages does ClassifiedHub support?",
|
||||
content:
|
||||
"We support Arabic, English, French, and Spanish. Change your language preference from the account dropdown menu.",
|
||||
},
|
||||
id: "6", title: "What languages does ClassifiedHub support?", content:
|
||||
"We support Arabic, English, French, and Spanish. Change your language preference from the account dropdown menu."},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about buying, selling, and staying safe on ClassifiedHub"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -305,8 +208,7 @@ export default function HomePage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "/listings" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Seller Dashboard", href: "/my-listings" },
|
||||
@@ -314,8 +216,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
@@ -323,8 +224,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "/safety" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
|
||||
@@ -2,62 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
||||
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
export default function SellerProfilePage() {
|
||||
const params = useParams();
|
||||
const sellerId = params.id;
|
||||
|
||||
// Synthesize seller profile data based on ID
|
||||
const sellerProfiles: Record<string, any> = {
|
||||
"1": {
|
||||
name: "Ahmed Karim",
|
||||
role: "Verified Seller",
|
||||
image: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg",
|
||||
stats: [
|
||||
{ value: "250+", label: "Items Listed" },
|
||||
{ value: "99%", label: "Satisfaction Rate" },
|
||||
{ value: "5K+", label: "Happy Buyers" },
|
||||
],
|
||||
},
|
||||
"2": {
|
||||
name: "Fatima Hassan",
|
||||
role: "Top Seller",
|
||||
image: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg",
|
||||
stats: [
|
||||
{ value: "180+", label: "Items Listed" },
|
||||
{ value: "98%", label: "Satisfaction Rate" },
|
||||
{ value: "3K+", label: "Happy Buyers" },
|
||||
],
|
||||
},
|
||||
"3": {
|
||||
name: "Mohamed Ali",
|
||||
role: "Premium Seller",
|
||||
image: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg",
|
||||
stats: [
|
||||
{ value: "320+", label: "Items Listed" },
|
||||
{ value: "99.5%", label: "Satisfaction Rate" },
|
||||
{ value: "8K+", label: "Happy Buyers" },
|
||||
],
|
||||
},
|
||||
"4": {
|
||||
name: "Leila Noor",
|
||||
role: "Trusted Vendor",
|
||||
image: "http://img.b2bpic.net/free-photo/person-practicing-tai-chi-indoors_23-2150478922.jpg",
|
||||
stats: [
|
||||
{ value: "150+", label: "Items Listed" },
|
||||
{ value: "97%", label: "Satisfaction Rate" },
|
||||
{ value: "2K+", label: "Happy Buyers" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const currentSeller = sellerProfiles[String(sellerId)] || sellerProfiles["1"];
|
||||
|
||||
export default function SellerProfilePage({ params }: { params: { id: string } }) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -75,121 +23,46 @@ export default function SellerProfilePage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Browse Listings", id: "listings" },
|
||||
{ name: "Sell", id: "sell" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Browse Listings", id: "/listings" },
|
||||
{ name: "Sell", id: "/sell" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
button={{ text: "List Your Item", href: "sell" }}
|
||||
button={{
|
||||
text: "List Your Item", href: "/sell"}}
|
||||
brandName="ClassifiedHub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="seller-profile" data-section="seller-profile">
|
||||
<TeamCardOne
|
||||
members={[
|
||||
{
|
||||
id: String(sellerId),
|
||||
name: currentSeller.name,
|
||||
role: currentSeller.role,
|
||||
imageSrc: currentSeller.image,
|
||||
imageAlt: `${currentSeller.name} seller profile`,
|
||||
},
|
||||
]}
|
||||
title={`${currentSeller.name}'s Profile`}
|
||||
description={`Trusted seller on ClassifiedHub with verified ratings, transparent complaint records, and active listings. Message directly to negotiate and buy with confidence.`}
|
||||
tag="Seller"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="seller-profile" data-section="seller-profile" className="mx-auto px-4 md:px-6 py-12">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl font-extrabold mb-4">Seller Profile: ID {params.id}</h1>
|
||||
<p className="text-gray-600 text-lg">Seller profile information would be loaded here based on the ID.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="seller-testimonials" data-section="seller-testimonials">
|
||||
<TestimonialCardSixteen
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Buyer",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-vendor-with-apron-selling-seasonal-food-street-market-stand_482257-77607.jpg?_wi=4",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Buyer",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg?_wi=3",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Rodriguez",
|
||||
role: "Buyer",
|
||||
company: "ClassifiedHub User",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-supermarket_107420-96366.jpg?_wi=3",
|
||||
imageAlt: "Emma Rodriguez",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: currentSeller.stats[0].value, label: currentSeller.stats[0].label },
|
||||
{ value: currentSeller.stats[1].value, label: currentSeller.stats[1].label },
|
||||
{ value: currentSeller.stats[2].value, label: currentSeller.stats[2].label },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Customer Reviews"
|
||||
description="Real feedback from buyers who have successfully transacted with this seller"
|
||||
tag="Reviews"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="seller-faq" data-section="seller-faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How can I contact this seller?",
|
||||
content: "Click the message button on their profile to send a direct message. This seller typically responds within 24 hours. You can negotiate pricing, ask questions about items, and discuss delivery details.",
|
||||
},
|
||||
id: "1", title: "How do I view all listings from this seller?", content: "Click 'View All Listings' to see the complete catalog of items from this seller."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do I know this seller is trustworthy?",
|
||||
content: "This seller has a verified rating badge and transparent complaint history. View their feedback scores, buyer reviews, and resolved issues to make an informed decision before purchasing.",
|
||||
},
|
||||
id: "2", title: "What is the seller's rating?", content: "Check the rating badge and review the seller's complaint history and feedback from previous buyers."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What payment methods do they accept?",
|
||||
content: "Payment methods vary by seller. Check their active listings or send them a message to confirm which payment options they prefer. ClassifiedHub supports secure payment escrow for protection.",
|
||||
},
|
||||
id: "3", title: "How can I contact this seller?", content: "Use the messaging feature available on any of their listings to start a conversation."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Can I return items purchased from this seller?",
|
||||
content: "Return policies are set by individual sellers. Always review the listing description for return information before purchasing. Contact the seller directly to discuss any concerns about returns or refunds.",
|
||||
},
|
||||
id: "4", title: "Is this seller verified?", content: "Look for the verification badge on their profile. Verified sellers have undergone our authentication process."},
|
||||
{
|
||||
id: "5",
|
||||
title: "How do I report a problem with this seller?",
|
||||
content: "If you experience issues, use the report feature on their profile or contact our support team. All complaints are recorded transparently on the seller's profile to help protect the community.",
|
||||
},
|
||||
id: "5", title: "What should I know before buying?", content: "Review their transaction history, ratings, and any reported complaints to make an informed decision."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Can I view all of this seller's listings?",
|
||||
content: "Yes! Click on their profile to browse all active listings. You can filter by category, price, or posting date to find exactly what you're looking for.",
|
||||
},
|
||||
id: "6", title: "Can I follow this seller?", content: "Yes! Follow sellers to get notified when they list new items that match your interests."},
|
||||
]}
|
||||
sideTitle="About This Seller"
|
||||
sideDescription={`Get to know ${currentSeller.name} and learn about buying from their store on ClassifiedHub.`}
|
||||
sideTitle="Seller Profile FAQ"
|
||||
sideDescription="Learn more about this seller and how to interact with them"
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
animationType="smooth"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -197,30 +70,27 @@ export default function SellerProfilePage() {
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Marketplace",
|
||||
items: [
|
||||
{ label: "Browse Listings", href: "listings" },
|
||||
{ label: "How It Works", href: "how-it-works" },
|
||||
title: "Marketplace", items: [
|
||||
{ label: "Browse Listings", href: "/listings" },
|
||||
{ label: "How It Works", href: "/#how-it-works" },
|
||||
{ label: "Seller Dashboard", href: "/my-listings" },
|
||||
{ label: "My Account", href: "/account" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "about" },
|
||||
{ label: "Contact", href: "contact" },
|
||||
{ label: "Blog", href: "blog" },
|
||||
{ label: "Careers", href: "careers" },
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Safety Tips", href: "safety" },
|
||||
{ label: "FAQ", href: "faq" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
title: "Resources", items: [
|
||||
{ label: "Safety Tips", href: "/safety" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -1,51 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fontWeight?: string | number;
|
||||
fill?: string;
|
||||
letterSpacing?: string | number;
|
||||
dominantBaseline?: 'auto' | 'text-top' | 'hanging' | 'middle' | 'central' | 'text-bottom' | 'ideographic' | 'mathematical' | 'inherit';
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 48,
|
||||
fontFamily = 'system-ui, -apple-system, sans-serif',
|
||||
fontWeight = 700,
|
||||
fill = 'currentColor',
|
||||
letterSpacing = 0,
|
||||
dominantBaseline = 'middle',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.2}`}
|
||||
className={className}
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
aria-label={text}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x={`${text.length * fontSize * 0.3}`}
|
||||
y={`${fontSize * 0.6}`}
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fontWeight={fontWeight}
|
||||
fill={fill}
|
||||
letterSpacing={letterSpacing}
|
||||
textAnchor="middle"
|
||||
dominantBaseline={dominantBaseline}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user