135 lines
7.4 KiB
TypeScript
135 lines
7.4 KiB
TypeScript
import PageLayout from './components/PageLayout';
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<PageLayout>
|
|
{/* Hero Section */}
|
|
<section
|
|
id="hero"
|
|
className="relative isolate" // removed flex-1 to avoid nested scroll container
|
|
>
|
|
{/* ...existing code (pattern SVG + blurred polygon) ... */}
|
|
<svg
|
|
aria-hidden="true"
|
|
className="absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] stroke-gray-900/10 dark:stroke-white/10"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
x="50%"
|
|
y={-1}
|
|
id="hero-pattern"
|
|
width={200}
|
|
height={200}
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path d="M.5 200V.5H200" fill="none" />
|
|
</pattern>
|
|
</defs>
|
|
<svg x="50%" y={-1} className="overflow-visible fill-gray-100 dark:fill-gray-800">
|
|
<path
|
|
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
|
strokeWidth={0}
|
|
/>
|
|
</svg>
|
|
<rect fill="url(#hero-pattern)" width="100%" height="100%" strokeWidth={0} />
|
|
</svg>
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
|
|
>
|
|
<div
|
|
style={{
|
|
clipPath:
|
|
'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
|
|
}}
|
|
className="aspect-801/1036 w-200.25 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 dark:opacity-30"
|
|
/>
|
|
</div>
|
|
|
|
{/* Background layers */}
|
|
<div className="absolute inset-0 -z-30 bg-white dark:bg-gray-950" />
|
|
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900 dark:from-gray-900/95 dark:via-gray-900/80 dark:to-gray-900" />
|
|
<div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.18),transparent_65%)] dark:bg-[radial-gradient(circle_at_35%_25%,rgba(255,255,255,0.08),transparent_60%)]" />
|
|
<div className="pointer-events-none absolute inset-0 -z-10 mix-blend-overlay [background-image:linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
|
|
|
{/* Content wrapper */}
|
|
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-20 lg:px-8 lg:py-32 flex w-full items-center">
|
|
{/* removed h-full so it sizes to content */}
|
|
<div className="mx-auto max-w-2xl gap-x-8 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-14">
|
|
<div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
|
|
<h1 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
|
|
Profit Planet
|
|
</h1>
|
|
<p className="mt-3 text-lg italic text-gray-300 sm:mt-4 sm:text-xl md:text-2xl">
|
|
Building a Community that will bring change
|
|
</p>
|
|
<p className="mt-6 text-base font-medium text-pretty text-gray-400 sm:mt-8 sm:text-lg md:text-xl lg:max-w-none">
|
|
Profit Planet is a platform building a vibrant community where members access diverse services and products from within. Users enjoy benefits like cashback and discounts, fostering a smart, rewarding ecosystem.
|
|
</p>
|
|
<div className="mt-8 flex flex-col gap-4 sm:mt-10 sm:flex-row sm:items-center sm:gap-x-6">
|
|
<a
|
|
href="/shop"
|
|
className="rounded-md bg-indigo-500 px-4 py-3 text-base font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 text-center sm:px-3.5 sm:py-2.5 sm:text-sm"
|
|
>
|
|
Shop
|
|
</a>
|
|
<a href="/login" className="text-base font-semibold text-white text-center sm:text-sm/6">
|
|
Login <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* Mobile-hidden image gallery */}
|
|
<div className="hidden lg:flex mt-8 lg:mt-0 justify-end gap-4 xl:gap-8">
|
|
<div className="flex flex-col space-y-4 xl:space-y-8">
|
|
<div className="relative w-32 xl:w-44">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&h=528&q=80"
|
|
className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col space-y-4 xl:space-y-8 pt-8 xl:pt-16">
|
|
<div className="relative w-32 xl:w-44">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?auto=format&fit=crop&h=528&q=80"
|
|
className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
|
|
</div>
|
|
<div className="relative w-32 xl:w-44">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
|
|
className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col space-y-4 xl:space-y-8">
|
|
<div className="relative w-32 xl:w-44">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?auto=format&fit=crop&crop=left&w=400&h=528&q=80"
|
|
className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
|
|
</div>
|
|
<div className="relative w-32 xl:w-44">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?auto=format&fit=crop&h=528&q=80"
|
|
className="aspect-2/3 w-full rounded-xl bg-gray-700/5 object-cover shadow-lg"
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-white/10 ring-inset" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</PageLayout>
|
|
);
|
|
} |