Bob AI: Populate src/pages/ShopPage.tsx (snippet builder, 2 sections)
This commit is contained in:
kudinDmitriyUp
@@ -1,135 +1,19 @@
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
|
||||
import Card from "@/components/ui/Card";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import RatingStars from "@/components/ui/RatingStars";
|
||||
import PriceDisplay from "@/components/ui/PriceDisplay";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const SHOP_PRODUCTS = [
|
||||
{
|
||||
id: "p1",
|
||||
name: "Ruby Matte Signature Lipstick",
|
||||
price: 14.99,
|
||||
originalPrice: 22.00,
|
||||
rating: 4.9,
|
||||
reviews: 1284,
|
||||
isSale: true,
|
||||
imageSrc: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?auto=format&fit=crop&q=80"
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Velvet Finish Liquid Foundation",
|
||||
price: 24.50,
|
||||
rating: 4.7,
|
||||
reviews: 856,
|
||||
isSale: false,
|
||||
imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?auto=format&fit=crop&q=80"
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Crimson Glow Highlighter Palette",
|
||||
price: 18.00,
|
||||
originalPrice: 25.00,
|
||||
rating: 4.8,
|
||||
reviews: 642,
|
||||
isSale: true,
|
||||
imageSrc: "https://images.unsplash.com/photo-1599305090598-fe179d501227?auto=format&fit=crop&q=80"
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Midnight Black Precision Eyeliner",
|
||||
price: 12.99,
|
||||
rating: 4.6,
|
||||
reviews: 415,
|
||||
isSale: false,
|
||||
imageSrc: "https://images.unsplash.com/photo-1631214500515-8739516115a8?auto=format&fit=crop&q=80"
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Rose Petal 18-Color Eyeshadow",
|
||||
price: 29.99,
|
||||
originalPrice: 38.00,
|
||||
rating: 4.9,
|
||||
reviews: 2105,
|
||||
isSale: true,
|
||||
imageSrc: "https://images.unsplash.com/photo-1512496115841-8743e1d92f1a?auto=format&fit=crop&q=80"
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "All-Day Flawless Setting Spray",
|
||||
price: 16.50,
|
||||
rating: 4.5,
|
||||
reviews: 328,
|
||||
isSale: false,
|
||||
imageSrc: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&q=80"
|
||||
}
|
||||
];
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import AvatarGroup from "@/components/ui/AvatarGroup";
|
||||
import { Star, Loader2 } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import useProducts from "@/hooks/useProducts";
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
||||
<NavbarCentered
|
||||
logo="Miss Rose"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Cart (0)", href: "/cart" }}
|
||||
/>
|
||||
|
||||
<main className="flex-grow">
|
||||
<HeroBillboard
|
||||
tag="Shop All"
|
||||
title="Bold Beauty, Unapologetically You"
|
||||
description="Discover our full collection of high-performance cosmetics designed to make you stand out. Rich pigments, long-lasting wear, and a signature ruby aesthetic."
|
||||
primaryButton={{ text: "Shop Best Sellers", href: "#products" }}
|
||||
secondaryButton={{ text: "View Offers", href: "#products" }}
|
||||
imageSrc="https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?auto=format&fit=crop&q=80"
|
||||
/>
|
||||
|
||||
<section id="products" className="py-24 px-6 max-w-7xl mx-auto">
|
||||
<div className="mb-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">The Ruby Collection</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">Explore our complete line of premium makeup products, featuring exclusive online pricing and verified customer reviews.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{SHOP_PRODUCTS.map((product) => (
|
||||
<Card key={product.id} className="p-5 flex flex-col gap-4 border-border bg-card hover:border-primary-cta transition-colors">
|
||||
<div className="relative aspect-square overflow-hidden rounded-md bg-muted">
|
||||
<ImageOrVideo imageSrc={product.imageSrc} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
|
||||
{product.isSale && (
|
||||
<div className="absolute top-3 left-3">
|
||||
<Tag text="Sale" className="bg-primary-cta text-primary-cta-foreground border-none font-bold" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-grow gap-3">
|
||||
<h3 className="text-lg font-bold leading-tight text-card-foreground">{product.name}</h3>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<RatingStars rating={product.rating} className="text-primary-cta" />
|
||||
<span className="text-sm text-muted-foreground">({product.reviews} reviews)</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 flex items-center justify-between">
|
||||
<PriceDisplay price={product.price} originalPrice={product.originalPrice} currency="$" className="text-xl font-bold" />
|
||||
</div>
|
||||
|
||||
<Button text="Add to Cart" variant="primary" className="w-full mt-2" />
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<FooterMinimal
|
||||
brand="Miss Rose Cosmetics"
|
||||
copyright="© 2024 Miss Rose. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div data-webild-section="HeroBillboard"><section aria-label="Hero section" className="relative pt-25 pb-20 md:pt-30"><HeroBackgroundSlot /><div className="flex flex-col gap-12 md:gap-15 w-content-width mx-auto"><div className="flex flex-col items-center gap-3 text-center"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/portrait-young-beautiful-woman-with-smoky-eyes-makeup-red-lips_186202-8958.jpg","https://img.freepik.com/free-photo/close-up-portrait-beautiful-young-woman-with-elegant-make-up-red-lips_186202-8960.jpg","https://img.freepik.com/free-photo/beautiful-woman-with-red-lipstick_23-2148330752.jpg"]} label="Loved by beauty enthusiasts everywhere" className="mb-1" /><TextAnimation text="Unleash Your Bold Beauty" variant="fade" gradientText={true} tag="h1" className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Explore our complete collection of professional-grade makeup. From ruby-red lips to flawless foundations, find everything you need to speak your truth." variant="fade" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Shop Collection" href="#products" variant="primary" /><Button text="Read Reviews" href="#reviews" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/flat-lay-makeup-products-with-red-lipstick_23-2148330760.jpg" className="aspect-4/5 md:aspect-video" /></ScrollReveal></div></section></div>
|
||||
<div data-webild-section="ProductRatingCards"><section aria-label="Products section" className="py-20"><div className="w-content-width mx-auto flex justify-center"><Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} /></div></section></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user