beautify: vip shop
This commit is contained in:
seaznCode
parent
2bddd8360b
commit
c646c30748
@ -6,43 +6,53 @@ import { HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
|
|||||||
import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
|
import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
|
||||||
import PageLayout from '../../components/PageLayout'
|
import PageLayout from '../../components/PageLayout'
|
||||||
|
|
||||||
|
// Collections für die Promo Section
|
||||||
|
const collections = [
|
||||||
|
{
|
||||||
|
name: "Women's",
|
||||||
|
href: '#',
|
||||||
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-01.jpg',
|
||||||
|
imageAlt: 'Woman wearing an off-white cotton t-shirt.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Men's",
|
||||||
|
href: '#',
|
||||||
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-02.jpg',
|
||||||
|
imageAlt: 'Man wearing a charcoal gray cotton t-shirt.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Desk Accessories',
|
||||||
|
href: '#',
|
||||||
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-03.jpg',
|
||||||
|
imageAlt: 'Person sitting at a wooden desk with paper note organizer, pencil and tablet.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
// Featured Products für die Shop-Startseite
|
// Featured Products für die Shop-Startseite
|
||||||
const featuredProducts = [
|
const featuredProducts = [
|
||||||
{
|
{
|
||||||
id: 101,
|
id: 101,
|
||||||
name: 'Leather Long Wallet',
|
name: 'Black Basic Tee',
|
||||||
color: 'Natural',
|
price: '$32',
|
||||||
price: '$75',
|
|
||||||
href: '#',
|
href: '#',
|
||||||
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-02.jpg',
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-01.jpg',
|
||||||
imageAlt: 'Hand stitched, orange leather long wallet.',
|
imageAlt: "Model wearing women's black cotton crewneck tee.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 102,
|
id: 102,
|
||||||
name: 'Machined Pencil and Pen Set',
|
name: 'Off-White Basic Tee',
|
||||||
color: 'Black',
|
price: '$32',
|
||||||
price: '$70',
|
|
||||||
href: '#',
|
href: '#',
|
||||||
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-03.jpg',
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-02.jpg',
|
||||||
imageAlt: '12-sided, machined black pencil and pen.',
|
imageAlt: "Model wearing women's off-white cotton crewneck tee.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 103,
|
id: 103,
|
||||||
name: 'Mini-Sketchbooks',
|
name: 'Mountains Artwork Tee',
|
||||||
color: 'Light Brown',
|
price: '$36',
|
||||||
price: '$27',
|
|
||||||
href: '#',
|
href: '#',
|
||||||
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-04.jpg',
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-03.jpg',
|
||||||
imageAlt: 'Set of three light and dark brown mini sketch books.',
|
imageAlt: "Model wearing women's burgundy red crewneck artwork tee with small white triangle overlapping larger black triangle.",
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 104,
|
|
||||||
name: 'Organizer Set',
|
|
||||||
color: 'Walnut',
|
|
||||||
price: '$149',
|
|
||||||
href: '#',
|
|
||||||
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-01.jpg',
|
|
||||||
imageAlt: 'Beautiful walnut organizer set with multiple white compartments',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -161,7 +171,7 @@ const products = [
|
|||||||
const stats = [
|
const stats = [
|
||||||
{ name: 'Total Users', stat: '71,897' },
|
{ name: 'Total Users', stat: '71,897' },
|
||||||
{ name: 'Gold Members', stat: '68,161' },
|
{ name: 'Gold Members', stat: '68,161' },
|
||||||
{ name: 'Saved through Gold Membership', stat: '25k €' },
|
{ name: 'Savings as Gold member', stat: '25k €' },
|
||||||
]
|
]
|
||||||
|
|
||||||
function classNames(...classes: (string | undefined | null | boolean)[]): string {
|
function classNames(...classes: (string | undefined | null | boolean)[]): string {
|
||||||
@ -237,31 +247,108 @@ export default function ShopPage() {
|
|||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="bg-white">
|
<div className="bg-white">
|
||||||
{/* Header Section */}
|
{/* Promo Section with Stats Cards */}
|
||||||
<div
|
<div className="relative overflow-hidden bg-white">
|
||||||
className="text-white py-16 relative"
|
<div className="pt-16 pb-80 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
|
||||||
style={{
|
<div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
|
||||||
backgroundImage: 'url(/images/misc/grey_BG.jpg)',
|
<div className="sm:max-w-lg">
|
||||||
backgroundSize: 'cover',
|
{/* Stats Cards */}
|
||||||
backgroundPosition: 'center',
|
{/* <div className="mb-8">
|
||||||
backgroundRepeat: 'no-repeat'
|
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5">
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <div className="absolute inset-0 bg-black/40"></div> */}
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
||||||
<div className="text-center">
|
|
||||||
<div>
|
|
||||||
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
|
|
||||||
{stats.map((item) => (
|
{stats.map((item) => (
|
||||||
<div
|
<div
|
||||||
key={item.name}
|
key={item.name}
|
||||||
className="overflow-hidden rounded-lg bg-[#0F172A]/90 px-4 py-5 shadow-sm inset-ring inset-ring-white/10 sm:p-6"
|
className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-lg border border-gray-200 sm:p-6"
|
||||||
>
|
>
|
||||||
<dt className="truncate text-sm font-medium text-gray-400">{item.name}</dt>
|
<dt className="truncate text-sm font-medium text-gray-600">{item.name}</dt>
|
||||||
<dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{item.stat}</dd>
|
<dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">{item.stat}</dd>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</dl>
|
</dl>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
|
||||||
|
Shop with an infinite variety of products
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-xl text-gray-500">
|
||||||
|
Discover a curated selection of high-quality products that cater to your every need.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="mt-10">
|
||||||
|
{/* Decorative image grid */}
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
|
||||||
|
>
|
||||||
|
<div className="absolute transform sm:top-0 sm:left-1/2 sm:translate-x-8 lg:top-1/2 lg:left-1/2 lg:translate-x-8 lg:-translate-y-1/2">
|
||||||
|
<div className="flex items-center space-x-6 lg:space-x-8">
|
||||||
|
<div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-01.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-02.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-03.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-04.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-05.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-06.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="h-64 w-44 overflow-hidden rounded-lg">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-07.jpg"
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700"
|
||||||
|
>
|
||||||
|
Shop Collection
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -269,36 +356,37 @@ export default function ShopPage() {
|
|||||||
|
|
||||||
{/* Featured Products Section */}
|
{/* Featured Products Section */}
|
||||||
<div className="bg-white">
|
<div className="bg-white">
|
||||||
<div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
|
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
|
||||||
<div className="md:flex md:items-center md:justify-between">
|
<div className="sm:flex sm:items-baseline sm:justify-between">
|
||||||
<h2 className="text-2xl font-bold tracking-tight text-gray-900">Trending products</h2>
|
<h2 className="text-2xl font-bold tracking-tight text-gray-900">Trending right now</h2>
|
||||||
<a href="#" className="hidden text-sm font-medium text-indigo-600 hover:text-indigo-500 md:block">
|
<a href="#" className="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
|
||||||
Shop the collection
|
Browse all trending
|
||||||
<span aria-hidden="true"> →</span>
|
<span aria-hidden="true"> →</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8">
|
<div className="mt-6 grid grid-cols-1 gap-y-10 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-0 lg:gap-x-8">
|
||||||
{featuredProducts.map((product) => (
|
{featuredProducts.map((product) => (
|
||||||
<div key={product.id} className="group relative">
|
<div key={product.id} className="group relative">
|
||||||
<div className="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
|
<img
|
||||||
<img alt={product.imageAlt} src={product.imageSrc} className="size-full object-cover" />
|
alt={product.imageAlt}
|
||||||
</div>
|
src={product.imageSrc}
|
||||||
<h3 className="mt-4 text-sm text-gray-700">
|
className="h-96 w-full rounded-lg object-cover group-hover:opacity-75 sm:aspect-2/3 sm:h-auto"
|
||||||
|
/>
|
||||||
|
<h3 className="mt-4 text-base font-semibold text-gray-900">
|
||||||
<a href={product.href}>
|
<a href={product.href}>
|
||||||
<span className="absolute inset-0" />
|
<span className="absolute inset-0" />
|
||||||
{product.name}
|
{product.name}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mt-1 text-sm text-gray-500">{product.color}</p>
|
<p className="mt-1 text-sm text-gray-500">{product.price}</p>
|
||||||
<p className="mt-1 text-sm font-medium text-gray-900">{product.price}</p>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 text-sm md:hidden">
|
<div className="mt-6 sm:hidden">
|
||||||
<a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
|
<a href="#" className="block text-sm font-semibold text-indigo-600 hover:text-indigo-500">
|
||||||
Shop the collection
|
Browse all favorites
|
||||||
<span aria-hidden="true"> →</span>
|
<span aria-hidden="true"> →</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user