ecommerce / page-examples / storefront-pages
With Offers And Testimonials
02-with-offers-and-testimonials.jsx
'use client'
import { Fragment, useState } from 'react'
import {
Dialog,
DialogBackdrop,
DialogPanel,
Popover,
PopoverButton,
PopoverGroup,
PopoverPanel,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
} from '@headlessui/react'
import { Bars3Icon, MagnifyingGlassIcon, ShoppingCartIcon, UserIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
const currencies = ['CAD', 'USD', 'AUD', 'EUR', 'GBP']
const navigation = {
categories: [
{
name: 'Women',
featured: [
{ name: 'Sleep', href: '#' },
{ name: 'Swimwear', href: '#' },
{ name: 'Underwear', href: '#' },
],
collection: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
],
categories: [
{ name: 'Basic Tees', href: '#' },
{ name: 'Artwork Tees', href: '#' },
{ name: 'Bottoms', href: '#' },
{ name: 'Underwear', href: '#' },
{ name: 'Accessories', href: '#' },
],
brands: [
{ name: 'Full Nelson', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Significant Other', href: '#' },
],
},
{
name: 'Men',
featured: [
{ name: 'Casual', href: '#' },
{ name: 'Boxers', href: '#' },
{ name: 'Outdoor', href: '#' },
],
collection: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
],
categories: [
{ name: 'Artwork Tees', href: '#' },
{ name: 'Pants', href: '#' },
{ name: 'Accessories', href: '#' },
{ name: 'Boxers', href: '#' },
{ name: 'Basic Tees', href: '#' },
],
brands: [
{ name: 'Significant Other', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Full Nelson', href: '#' },
],
},
],
pages: [
{ name: 'Company', href: '#' },
{ name: 'Stores', href: '#' },
],
}
const offers = [
{ name: 'Download the app', description: 'Get an exclusive $5 off code', href: '#' },
{ name: "Return when you're ready", description: '60 days of free returns', href: '#' },
{ name: 'Sign up for our newsletter', description: '15% off your first order', href: '#' },
]
const trendingProducts = [
{
id: 1,
name: 'Machined Pen',
color: 'Black',
price: '$35',
href: '#',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-01.jpg',
imageAlt: 'Black machined steel pen with hexagonal grip and small white logo at top.',
availableColors: [
{ name: 'Black', colorBg: '#111827' },
{ name: 'Brass', colorBg: '#FDE68A' },
{ name: 'Chrome', colorBg: '#E5E7EB' },
],
},
{
id: 2,
name: 'Earthen Mug',
color: 'Matte Black',
price: '$28',
href: '#',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-02.jpg',
imageAlt: 'Black porcelain mug with modern square handle and natural clay accents on rim and bottom.',
availableColors: [
{ name: 'Matte Black', colorBg: '#4B5563' },
{ name: 'Natural', colorBg: '#FEF3C7' },
],
},
{
id: 3,
name: 'Leatherbound Daily Journal Set',
color: 'Natural',
price: '$50',
href: '#',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-03.jpg',
imageAlt: 'Natural leather journal with brass disc binding and three paper refill sets.',
availableColors: [
{ name: 'Natural', colorBg: '#FEF3C7' },
{ name: 'Black', colorBg: '#1F2937' },
{ name: 'Brown', colorBg: '#7C2D12' },
],
},
{
id: 4,
name: 'Leatherbound Daily Journal',
color: 'Black',
price: '$50',
href: '#',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-product-04.jpg',
imageAlt: 'Black leather journal with brass disc binding.',
availableColors: [
{ name: 'Black', colorBg: '#111827' },
{ name: 'Brown', colorBg: '#7C2D12' },
{ name: 'Natural', colorBg: '#FEF3C7' },
],
},
]
const collections = [
{
name: 'Desk and Office',
description: 'Work from home accessories',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-01.jpg',
imageAlt: 'Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug.',
href: '#',
},
{
name: 'Self-Improvement',
description: 'Journals and note-taking',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-02.jpg',
imageAlt: 'Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant.',
href: '#',
},
{
name: 'Travel',
description: 'Daily commute essentials',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-edition-03.jpg',
imageAlt: 'Collection of four insulated travel bottles on wooden shelf.',
href: '#',
},
]
const testimonials = [
{
id: 1,
quote:
'My order arrived super quickly. The product is even better than I hoped it would be. Very happy customer over here!',
attribution: 'Sarah Peters, New Orleans',
},
{
id: 2,
quote:
'I had to return a purchase that didn’t fit. The whole process was so simple that I ended up ordering two new items!',
attribution: 'Kelly McPherson, Chicago',
},
{
id: 3,
quote:
'Now that I’m on holiday for the summer, I’ll probably order a few more shirts. It’s just so convenient, and I know the quality will always be there.',
attribution: 'Chris Paul, Phoenix',
},
]
const footerNavigation = {
products: [
{ name: 'Bags', href: '#' },
{ name: 'Tees', href: '#' },
{ name: 'Objects', href: '#' },
{ name: 'Home Goods', href: '#' },
{ name: 'Accessories', href: '#' },
],
customerService: [
{ name: 'Contact', href: '#' },
{ name: 'Shipping', href: '#' },
{ name: 'Returns', href: '#' },
{ name: 'Warranty', href: '#' },
{ name: 'Secure Payments', href: '#' },
{ name: 'FAQ', href: '#' },
{ name: 'Find a store', href: '#' },
],
company: [
{ name: 'Who we are', href: '#' },
{ name: 'Sustainability', href: '#' },
{ name: 'Press', href: '#' },
{ name: 'Careers', href: '#' },
{ name: 'Terms & Conditions', href: '#' },
{ name: 'Privacy', href: '#' },
],
legal: [
{ name: 'Terms of Service', href: '#' },
{ name: 'Return Policy', href: '#' },
{ name: 'Privacy Policy', href: '#' },
{ name: 'Shipping Policy', href: '#' },
],
bottomLinks: [
{ name: 'Accessibility', href: '#' },
{ name: 'Privacy', href: '#' },
{ name: 'Terms', href: '#' },
],
}
export default function Example() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<div className="bg-white">
{/* Mobile menu */}
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="relative z-40 lg:hidden">
<DialogBackdrop
transition
className="fixed inset-0 bg-black/25 transition-opacity duration-300 ease-linear data-closed:opacity-0"
/>
<div className="fixed inset-0 z-40 flex">
<DialogPanel
transition
className="relative flex w-full max-w-xs transform flex-col overflow-y-auto bg-white pb-12 shadow-xl transition duration-300 ease-in-out data-closed:-translate-x-full"
>
<div className="flex px-4 pt-5 pb-2">
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="relative -m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
>
<span className="absolute -inset-0.5" />
<span className="sr-only">Close menu</span>
<XMarkIcon aria-hidden="true" className="size-6" />
</button>
</div>
{/* Links */}
<TabGroup className="mt-2">
<div className="border-b border-gray-200">
<TabList className="-mb-px flex space-x-8 px-4">
{navigation.categories.map((category) => (
<Tab
key={category.name}
className="flex-1 border-b-2 border-transparent px-1 py-4 text-base font-medium whitespace-nowrap text-gray-900 data-selected:border-indigo-600 data-selected:text-indigo-600"
>
{category.name}
</Tab>
))}
</TabList>
</div>
<TabPanels as={Fragment}>
{navigation.categories.map((category, categoryIdx) => (
<TabPanel key={category.name} className="space-y-12 px-4 pt-10 pb-6">
<div className="grid grid-cols-1 items-start gap-x-6 gap-y-10">
<div className="grid grid-cols-1 gap-x-6 gap-y-10">
<div>
<p id={`mobile-featured-heading-${categoryIdx}`} className="font-medium text-gray-900">
Featured
</p>
<ul
role="list"
aria-labelledby={`mobile-featured-heading-${categoryIdx}`}
className="mt-6 space-y-6"
>
{category.featured.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="text-gray-500">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<p id="mobile-categories-heading" className="font-medium text-gray-900">
Categories
</p>
<ul role="list" aria-labelledby="mobile-categories-heading" className="mt-6 space-y-6">
{category.categories.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="text-gray-500">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="grid grid-cols-1 gap-x-6 gap-y-10">
<div>
<p id="mobile-collection-heading" className="font-medium text-gray-900">
Collection
</p>
<ul role="list" aria-labelledby="mobile-collection-heading" className="mt-6 space-y-6">
{category.collection.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="text-gray-500">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<p id="mobile-brand-heading" className="font-medium text-gray-900">
Brands
</p>
<ul role="list" aria-labelledby="mobile-brand-heading" className="mt-6 space-y-6">
{category.brands.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="text-gray-500">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</TabPanel>
))}
</TabPanels>
</TabGroup>
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
{navigation.pages.map((page) => (
<div key={page.name} className="flow-root">
<a href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
{page.name}
</a>
</div>
))}
</div>
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
<div className="flow-root">
<a href="#" className="-m-2 block p-2 font-medium text-gray-900">
Create an account
</a>
</div>
<div className="flow-root">
<a href="#" className="-m-2 block p-2 font-medium text-gray-900">
Sign in
</a>
</div>
</div>
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
{/* Currency selector */}
<form>
<div className="-ml-2 inline-grid grid-cols-1">
<select
id="mobile-currency"
name="currency"
aria-label="Currency"
className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-0.5 pr-7 pl-2 text-base font-medium text-gray-700 group-hover:text-gray-800 focus:outline-2 sm:text-sm/6"
>
{currencies.map((currency) => (
<option key={currency}>{currency}</option>
))}
</select>
<ChevronDownIcon
aria-hidden="true"
className="pointer-events-none col-start-1 row-start-1 mr-1 size-5 self-center justify-self-end fill-gray-500"
/>
</div>
</form>
</div>
</DialogPanel>
</div>
</Dialog>
<header className="relative z-10">
<nav aria-label="Top">
{/* Top navigation */}
<div className="bg-gray-900">
<div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
{/* Currency selector */}
<form className="hidden lg:block lg:flex-1">
<div className="-ml-2 inline-grid grid-cols-1">
<select
id="desktop-currency"
name="currency"
aria-label="Currency"
className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-gray-900 py-0.5 pr-7 pl-2 text-left text-base font-medium text-white focus:outline-2 focus:-outline-offset-1 focus:outline-white sm:text-sm/6"
>
{currencies.map((currency) => (
<option key={currency}>{currency}</option>
))}
</select>
<ChevronDownIcon
aria-hidden="true"
className="pointer-events-none col-start-1 row-start-1 mr-1 size-5 self-center justify-self-end fill-gray-300"
/>
</div>
</form>
<p className="flex-1 text-center text-sm font-medium text-white lg:flex-none">
Get free delivery on orders over $100
</p>
<div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" className="text-sm font-medium text-white hover:text-gray-100">
Create an account
</a>
<span aria-hidden="true" className="h-6 w-px bg-gray-600" />
<a href="#" className="text-sm font-medium text-white hover:text-gray-100">
Sign in
</a>
</div>
</div>
</div>
{/* Secondary navigation */}
<div className="bg-white">
<div className="border-b border-gray-200">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
{/* Logo (lg+) */}
<div className="hidden lg:flex lg:items-center">
<a href="#">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto"
/>
</a>
</div>
<div className="hidden h-full lg:flex">
{/* Flyout menus */}
<PopoverGroup className="hidden lg:ml-8 lg:block lg:self-stretch">
<div className="flex h-full space-x-8">
{navigation.categories.map((category, categoryIdx) => (
<Popover key={category.name} className="flex">
<div className="relative flex">
<PopoverButton className="group relative flex items-center justify-center text-sm font-medium text-gray-700 transition-colors duration-200 ease-out hover:text-gray-800 data-open:text-indigo-600">
{category.name}
<span
aria-hidden="true"
className="absolute inset-x-0 -bottom-px z-30 h-0.5 transition duration-200 ease-out group-data-open:bg-indigo-600"
/>
</PopoverButton>
</div>
<PopoverPanel
transition
className="absolute inset-x-0 top-full z-20 w-full bg-white text-sm text-gray-500 transition data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"
>
{/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
<div aria-hidden="true" className="absolute inset-0 top-1/2 bg-white shadow-sm" />
<div className="relative bg-white">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 items-start gap-x-8 gap-y-10 pt-10 pb-12">
<div className="grid grid-cols-2 gap-x-8 gap-y-10">
<div>
<p
id={`desktop-featured-heading-${categoryIdx}`}
className="font-medium text-gray-900"
>
Featured
</p>
<ul
role="list"
aria-labelledby={`desktop-featured-heading-${categoryIdx}`}
className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
>
{category.featured.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<p id="desktop-categories-heading" className="font-medium text-gray-900">
Categories
</p>
<ul
role="list"
aria-labelledby="desktop-categories-heading"
className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
>
{category.categories.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="grid grid-cols-2 gap-x-8 gap-y-10">
<div>
<p id="desktop-collection-heading" className="font-medium text-gray-900">
Collection
</p>
<ul
role="list"
aria-labelledby="desktop-collection-heading"
className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
>
{category.collection.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<p id="desktop-brand-heading" className="font-medium text-gray-900">
Brands
</p>
<ul
role="list"
aria-labelledby="desktop-brand-heading"
className="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
>
{category.brands.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
</PopoverPanel>
</Popover>
))}
{navigation.pages.map((page) => (
<a
key={page.name}
href={page.href}
className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>
{page.name}
</a>
))}
</div>
</PopoverGroup>
</div>
{/* Mobile menu and search (lg-) */}
<div className="flex flex-1 items-center lg:hidden">
<button
type="button"
onClick={() => setMobileMenuOpen(true)}
className="-ml-2 rounded-md bg-white p-2 text-gray-400"
>
<span className="sr-only">Open menu</span>
<Bars3Icon aria-hidden="true" className="size-6" />
</button>
{/* Search */}
<a href="#" className="ml-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<MagnifyingGlassIcon aria-hidden="true" className="size-6" />
</a>
</div>
{/* Logo (lg-) */}
<a href="#" className="lg:hidden">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto"
/>
</a>
<div className="flex flex-1 items-center justify-end">
<div className="flex items-center lg:ml-8">
<div className="flex space-x-8">
<div className="hidden lg:flex">
<a href="#" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<MagnifyingGlassIcon aria-hidden="true" className="size-6" />
</a>
</div>
<div className="flex">
<a href="#" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Account</span>
<UserIcon aria-hidden="true" className="size-6" />
</a>
</div>
</div>
<span aria-hidden="true" className="mx-4 h-6 w-px bg-gray-200 lg:mx-6" />
<div className="flow-root">
<a href="#" className="group -m-2 flex items-center p-2">
<ShoppingCartIcon
aria-hidden="true"
className="size-6 shrink-0 text-gray-400 group-hover:text-gray-500"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
{/* Hero */}
<div className="flex flex-col border-b border-gray-200 lg:border-0">
<nav aria-label="Offers" className="order-last lg:order-first">
<div className="mx-auto max-w-7xl lg:px-8">
<ul
role="list"
className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0"
>
{offers.map((offer) => (
<li key={offer.name} className="flex flex-col">
<a
href={offer.href}
className="relative flex flex-1 flex-col justify-center bg-white px-4 py-6 text-center focus:z-10"
>
<p className="text-sm text-gray-500">{offer.name}</p>
<p className="font-semibold text-gray-900">{offer.description}</p>
</a>
</li>
))}
</ul>
</div>
</nav>
<div className="relative">
<div aria-hidden="true" className="absolute hidden h-full w-1/2 bg-gray-100 lg:block" />
<div className="relative bg-gray-100 lg:bg-transparent">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:grid lg:grid-cols-2 lg:px-8">
<div className="mx-auto max-w-2xl py-24 lg:max-w-none lg:py-64">
<div className="lg:pr-16">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl xl:text-6xl">
Focus on what matters
</h1>
<p className="mt-4 text-xl text-gray-600">
All the charts, datepickers, and notifications in the world can't beat checking off some items on
a paper card.
</p>
<div className="mt-6">
<a
href="#"
className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 font-medium text-white hover:bg-indigo-700"
>
Shop Productivity
</a>
</div>
</div>
</div>
</div>
</div>
<div className="h-48 w-full sm:h-64 lg:absolute lg:top-0 lg:right-0 lg:h-full lg:w-1/2">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-hero-half-width.jpg"
className="size-full object-cover"
/>
</div>
</div>
</div>
{/* Trending products */}
<section aria-labelledby="trending-heading" className="bg-white">
<div className="py-16 sm:py-24 lg:mx-auto lg:max-w-7xl lg:px-8 lg:py-32">
<div className="flex items-center justify-between px-4 sm:px-6 lg:px-0">
<h2 id="trending-heading" className="text-2xl font-bold tracking-tight text-gray-900">
Trending products
</h2>
<a href="#" className="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
See everything
<span aria-hidden="true"> →</span>
</a>
</div>
<div className="relative mt-8">
<div className="relative w-full overflow-x-auto">
<ul
role="list"
className="mx-4 inline-flex space-x-8 sm:mx-6 lg:mx-0 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-x-0"
>
{trendingProducts.map((product) => (
<li key={product.id} className="inline-flex w-64 flex-col text-center lg:w-auto">
<div className="group relative">
<img
alt={product.imageAlt}
src={product.imageSrc}
className="aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75"
/>
<div className="mt-6">
<p className="text-sm text-gray-500">{product.color}</p>
<h3 className="mt-1 font-semibold text-gray-900">
<a href={product.href}>
<span className="absolute inset-0" />
{product.name}
</a>
</h3>
<p className="mt-1 text-gray-900">{product.price}</p>
</div>
</div>
<h4 className="sr-only">Available colors</h4>
<ul role="list" className="mt-auto flex items-center justify-center space-x-3 pt-6">
{product.availableColors.map((color) => (
<li
key={color.name}
style={{ backgroundColor: color.colorBg }}
className="size-4 rounded-full border border-black/10"
>
<span className="sr-only">{color.name}</span>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
</div>
<div className="mt-12 px-4 sm:hidden">
<a href="#" className="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
See everything
<span aria-hidden="true"> →</span>
</a>
</div>
</div>
</section>
{/* Collections */}
<section aria-labelledby="collections-heading" className="bg-gray-100">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
<h2 id="collections-heading" className="text-2xl font-bold text-gray-900">
Collections
</h2>
<div className="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:space-y-0 lg:gap-x-6">
{collections.map((collection) => (
<div key={collection.name} className="group relative">
<img
alt={collection.imageAlt}
src={collection.imageSrc}
className="w-full rounded-lg bg-white object-cover group-hover:opacity-75 max-sm:h-80 sm:aspect-2/1 lg:aspect-square"
/>
<h3 className="mt-6 text-sm text-gray-500">
<a href={collection.href}>
<span className="absolute inset-0" />
{collection.name}
</a>
</h3>
<p className="text-base font-semibold text-gray-900">{collection.description}</p>
</div>
))}
</div>
</div>
</div>
</section>
{/* Sale and testimonials */}
<div className="relative overflow-hidden">
{/* Decorative background image and gradient */}
<div aria-hidden="true" className="absolute inset-0">
<div className="absolute inset-0 mx-auto max-w-7xl overflow-hidden xl:px-8">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-02-sale-full-width.jpg"
className="size-full object-cover"
/>
</div>
<div className="absolute inset-0 bg-white/75" />
<div className="absolute inset-0 bg-linear-to-t from-white via-white" />
</div>
{/* Sale */}
<section
aria-labelledby="sale-heading"
className="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-32 text-center sm:px-6 lg:px-8"
>
<div className="mx-auto max-w-2xl lg:max-w-none">
<h2 id="sale-heading" className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
Get 25% off during our one-time sale
</h2>
<p className="mx-auto mt-4 max-w-xl text-xl text-gray-600">
Most of our products are limited releases that won't come back. Get your favorite items while they're in
stock.
</p>
<a
href="#"
className="mt-6 inline-block w-full rounded-md border border-transparent bg-gray-900 px-8 py-3 font-medium text-white hover:bg-gray-800 sm:w-auto"
>
Get access to our one-time sale
</a>
</div>
</section>
{/* Testimonials */}
<section
aria-labelledby="testimonial-heading"
className="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8 lg:py-32"
>
<div className="mx-auto max-w-2xl lg:max-w-none">
<h2 id="testimonial-heading" className="text-2xl font-bold tracking-tight text-gray-900">
What are people saying?
</h2>
<div className="mt-16 space-y-16 lg:grid lg:grid-cols-3 lg:space-y-0 lg:gap-x-8">
{testimonials.map((testimonial) => (
<blockquote key={testimonial.id} className="sm:flex lg:block">
<svg
width={24}
height={18}
viewBox="0 0 24 18"
aria-hidden="true"
className="shrink-0 text-gray-300"
>
<path
d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
fill="currentColor"
/>
</svg>
<div className="mt-8 sm:mt-0 sm:ml-6 lg:mt-10 lg:ml-0">
<p className="text-lg text-gray-600">{testimonial.quote}</p>
<cite className="mt-4 block font-semibold text-gray-900 not-italic">
{testimonial.attribution}
</cite>
</div>
</blockquote>
))}
</div>
</div>
</section>
</div>
</main>
<footer aria-labelledby="footer-heading" className="bg-white">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="border-t border-gray-200">
<div className="pt-16 pb-20">
<div className="md:flex md:justify-center">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto"
/>
</div>
<div className="mx-auto mt-16 max-w-5xl xl:grid xl:grid-cols-2 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
<div className="space-y-12 md:grid md:grid-cols-2 md:gap-8 md:space-y-0">
<div>
<h3 className="text-sm font-medium text-gray-900">Products</h3>
<ul role="list" className="mt-6 space-y-6">
{footerNavigation.products.map((item) => (
<li key={item.name} className="text-sm">
<a href={item.href} className="text-gray-500 hover:text-gray-600">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<h3 className="text-sm font-medium text-gray-900">Customer Service</h3>
<ul role="list" className="mt-6 space-y-6">
{footerNavigation.customerService.map((item) => (
<li key={item.name} className="text-sm">
<a href={item.href} className="text-gray-500 hover:text-gray-600">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="space-y-12 md:grid md:grid-cols-2 md:gap-8 md:space-y-0">
<div>
<h3 className="text-sm font-medium text-gray-900">Company</h3>
<ul role="list" className="mt-6 space-y-6">
{footerNavigation.company.map((item) => (
<li key={item.name} className="text-sm">
<a href={item.href} className="text-gray-500 hover:text-gray-600">
{item.name}
</a>
</li>
))}
</ul>
</div>
<div>
<h3 className="text-sm font-medium text-gray-900">Legal</h3>
<ul role="list" className="mt-6 space-y-6">
{footerNavigation.legal.map((item) => (
<li key={item.name} className="text-sm">
<a href={item.href} className="text-gray-500 hover:text-gray-600">
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="lg:grid lg:grid-cols-2 lg:gap-x-6 xl:gap-x-8">
<div className="flex items-center rounded-lg bg-gray-100 p-6 sm:p-10">
<div className="mx-auto max-w-sm">
<h3 className="font-semibold text-gray-900">Sign up for our newsletter</h3>
<p className="mt-2 text-sm text-gray-500">
The latest news, articles, and resources, sent to your inbox weekly.
</p>
<form className="mt-4 sm:mt-6 sm:flex">
<input
id="email-address"
type="text"
required
autoComplete="email"
aria-label="Email address"
className="block w-full rounded-md bg-white px-4 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
/>
<div className="mt-3 sm:mt-0 sm:ml-4 sm:shrink-0">
<button
type="submit"
className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-xs hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white focus:outline-hidden"
>
Sign up
</button>
</div>
</form>
</div>
</div>
<div className="relative mt-6 flex items-center px-6 py-12 sm:px-10 sm:py-16 lg:mt-0">
<div className="absolute inset-0 overflow-hidden rounded-lg">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/ecommerce-images/footer-02-exclusive-sale.jpg"
className="size-full object-cover saturate-0 filter"
/>
<div className="absolute inset-0 bg-indigo-600/90" />
</div>
<div className="relative mx-auto max-w-sm text-center">
<h3 className="text-2xl font-bold tracking-tight text-white">Get early access</h3>
<p className="mt-2 text-gray-200">
Did you sign up to the newsletter? If so, use the keyword we sent you to get access.{' '}
<a href="#" className="font-bold whitespace-nowrap text-white hover:text-gray-200">
Go now<span aria-hidden="true"> →</span>
</a>
</p>
</div>
</div>
</div>
</div>
<div className="py-10 md:flex md:items-center md:justify-between">
<div className="text-center md:text-left">
<p className="text-sm text-gray-500">© 2021 All Rights Reserved</p>
</div>
<div className="mt-4 flex items-center justify-center md:mt-0">
<div className="flex space-x-8">
{footerNavigation.bottomLinks.map((item) => (
<a key={item.name} href={item.href} className="text-sm text-gray-500 hover:text-gray-600">
{item.name}
</a>
))}
</div>
<div className="ml-6 border-l border-gray-200 pl-6">
<a href="#" className="flex items-center text-gray-500 hover:text-gray-600">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/flags/flag-canada.svg"
className="h-auto w-5 shrink-0"
/>
<span className="ml-3 text-sm">Change</span>
<span className="sr-only">location and currency</span>
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
)
}