File size: 2,950 Bytes
851da48 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import React from "react";
import { Link } from "react-router-dom";
import { products } from "../data/products.js";
export default function Home() {
const featured = products[0];
return (
<div className="space-y-12">
<section className="overflow-hidden rounded-3xl border border-neutral-200 bg-gradient-to-b from-neutral-50 to-white">
<div className="grid items-center gap-10 p-8 md:grid-cols-2 md:p-12">
<div className="space-y-4">
<p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">New</p>
<h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
{featured.name}
</h1>
<p className="text-lg text-neutral-600">{featured.tagline}</p>
<div className="flex flex-wrap gap-3 pt-2">
<Link
to={`/product/${featured.slug}`}
className="rounded-full bg-neutral-900 px-5 py-2.5 text-sm font-semibold text-white hover:bg-neutral-800"
>
Learn more
</Link>
<Link
to="/store"
className="rounded-full border border-neutral-300 bg-white px-5 py-2.5 text-sm font-semibold text-neutral-900 hover:bg-neutral-50"
>
Shop all
</Link>
</div>
<p className="text-xs text-neutral-500 pt-2">
Tip: Replace placeholder images/specs with your own licensed assets & data.
</p>
</div>
<div className="relative">
<img
src={featured.heroImage}
alt={featured.name}
className="w-full rounded-2xl border border-neutral-200 object-cover"
loading="lazy"
/>
</div>
</div>
</section>
<section className="grid gap-4 md:grid-cols-3">
{products.map((p) => (
<Link
key={p.slug}
to={`/product/${p.slug}`}
className="group rounded-3xl border border-neutral-200 bg-white p-5 hover:shadow-sm"
>
<div className="overflow-hidden rounded-2xl border border-neutral-200">
<img
src={p.heroImage}
alt={p.name}
className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
loading="lazy"
/>
</div>
<div className="pt-4">
<p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">{p.category}</p>
<h3 className="pt-1 text-lg font-semibold tracking-tight">{p.name}</h3>
<p className="pt-1 text-sm text-neutral-600">{p.tagline}</p>
<p className="pt-3 text-sm font-semibold text-neutral-900">From ${p.priceFrom}</p>
</div>
</Link>
))}
</section>
</div>
);
}
|