216 lines
10 KiB
TypeScript
216 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Dialog, DialogPanel } from '@headlessui/react'
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
|
|
const navigation = [
|
|
{ name: 'Shop', href: '/shop' },
|
|
{ name: 'Affiliate-Links', href: '#' },
|
|
{ name: 'Memberships', href: '#' },
|
|
{ name: 'About us', href: '#' },
|
|
]
|
|
|
|
export default function Example() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="bg-gray-900">
|
|
<header className="absolute inset-x-0 top-0 z-50">
|
|
<nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
|
|
<div className="flex lg:flex-1">
|
|
<a href="#" className="-m-1.5 p-1.5">
|
|
<span className="sr-only">Your Company</span>
|
|
<img
|
|
alt=""
|
|
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
|
className="h-8 w-auto"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div className="flex lg:hidden">
|
|
<button
|
|
type="button"
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
<Bars3Icon aria-hidden="true" className="size-6" />
|
|
</button>
|
|
</div>
|
|
<div className="hidden lg:flex lg:gap-x-12">
|
|
{navigation.map((item) => (
|
|
<a key={item.name} href={item.href} className="text-sm/6 font-semibold text-white">
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
|
<a href="#" className="text-sm/6 font-semibold text-white">
|
|
Log in <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
|
<div className="fixed inset-0 z-50" />
|
|
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/10">
|
|
<div className="flex items-center justify-between">
|
|
<a href="#" className="-m-1.5 p-1.5">
|
|
<span className="sr-only">Your Company</span>
|
|
<img
|
|
alt=""
|
|
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
|
className="h-8 w-auto"
|
|
/>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
className="-m-2.5 rounded-md p-2.5 text-gray-200"
|
|
>
|
|
<span className="sr-only">Close menu</span>
|
|
<XMarkIcon aria-hidden="true" className="size-6" />
|
|
</button>
|
|
</div>
|
|
<div className="mt-6 flow-root">
|
|
<div className="-my-6 divide-y divide-white/10">
|
|
<div className="space-y-2 py-6">
|
|
{navigation.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="py-6">
|
|
<a
|
|
href="#"
|
|
className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
|
|
>
|
|
Log in
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogPanel>
|
|
</Dialog>
|
|
</header>
|
|
<main>
|
|
<div className="relative isolate">
|
|
<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-white/10"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
x="50%"
|
|
y={-1}
|
|
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
|
|
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-800">
|
|
<path
|
|
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
|
strokeWidth={0}
|
|
/>
|
|
</svg>
|
|
<rect fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)" 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"
|
|
/>
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<div className="mx-auto max-w-7xl px-6 pt-36 pb-32 sm:pt-60 lg:px-8 lg:pt-32">
|
|
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
|
|
<div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
|
|
<h1 className="text-5xl font-semibold tracking-tight text-pretty text-white sm:text-7xl">
|
|
Profit Planet
|
|
</h1>
|
|
<p className="mt-8 text-lg font-medium text-pretty text-gray-400 sm:max-w-md sm:text-xl/8 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-10 flex items-center gap-x-6">
|
|
<a
|
|
href="/shop"
|
|
className="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
|
>
|
|
Shop
|
|
</a>
|
|
<a href="/login" className="text-sm/6 font-semibold text-white">
|
|
Login <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
|
|
<div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80">
|
|
<div className="relative">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
|
|
<div className="relative">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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="w-44 flex-none space-y-8 pt-32 sm:pt-0">
|
|
<div className="relative">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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">
|
|
<img
|
|
alt=""
|
|
src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
} |