import { Head, Link } from '@inertiajs/react'
import Layout from './Layout'
export default function Home({ auth, featured_images = [] }) {
return (
<Layout user={auth.user}>
<Head title="Welcome" />
<div className="relative bg-white overflow-hidden">
<div className="max-w-7xl mx-auto">
<div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg
className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="currentColor"
viewBox="0 0 100 100"
preserveAspectRatio="none"
aria-hidden="true"
>
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div className="sm:text-center lg:text-left">
<h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">Manage and share your</span>{' '}
<span className="block text-indigo-600 xl:inline">
image collection
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Upload, categorize, and share your images with our powerful image management platform.
Organize with tags, search with ease, and collaborate with others.
</p>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
{auth.user ? (
<div className="rounded-md shadow">
<Link
href="/images"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
>
My Images
</Link>
</div>
) : (
<>
<div className="rounded-md shadow">
<Link
href="/register"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
>
Get started
</Link>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<Link
href="/login"
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10"
>
Log in
</Link>
</div>
</>
)}
</div>
</div>
</main>
</div>
</div>
<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<div className="h-56 w-full bg-indigo-100 sm:h-72 md:h-96 lg:w-full lg:h-full grid grid-cols-2 gap-1">
{featured_images.slice(0, 4).map((image, index) => (
<div key={image.id} className={`${index % 2 === 0 ? 'col-span-1' : 'col-span-1'}`}>
<img
className="h-full w-full object-cover"
src={image.file_url}
alt={image.title}
/>
</div>
))}
</div>
</div>
</div>
{/* Features section */}
<div className="py-12 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="lg:text-center">
<h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
Features
</h2>
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
A better way to manage your images
</p>
<p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
Our platform provides all the tools you need to organize, categorize, and share your image collection.
</p>
</div>
<div className="mt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
<div className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">
Upload and Store
</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">
Easily upload and store your images in a secure cloud environment.
Access your collection from anywhere, anytime.
</dd>
</div>
<div className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
/>
</svg>
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">
Tag and Categorize
</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">
Organize your images with custom tags and categories.
Create a structured system that works for your specific needs.
</dd>
</div>
<div className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">
Search and Filter
</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">
Powerful search capabilities let you find images by title, tags, date, and more.
Filter your collection to quickly locate what you need.
</dd>
</div>
<div className="relative">
<dt>
<div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg
className="h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
</div>
<p className="ml-16 text-lg leading-6 font-medium text-gray-900">
User Management
</p>
</dt>
<dd className="mt-2 ml-16 text-base text-gray-500">
Admin controls for managing users and content.
Approval workflows ensure quality control for all uploaded images.
</dd>
</div>
</dl>
</div>
</div>
</div>
{/* CTA section */}
<div className="bg-indigo-50">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span className="block">Ready to get started?</span>
<span className="block text-indigo-600">Create your account today.</span>
</h2>
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
{auth.user ? (
<div className="inline-flex rounded-md shadow">
<Link
href="/images/new"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
>
Upload New Image
</Link>
</div>
) : (
<>
<div className="inline-flex rounded-md shadow">
<Link
href="/register"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</Link>
</div>
<div className="ml-3 inline-flex rounded-md shadow">
<Link
href="/login"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
>
Log in
</Link>
</div>
</>
)}
</div>
</div>
</div>
</Layout>
)
}