Archived
austinandClaude Opus 5
c4cd19e175
24px (Tailwind's rounded-3xl) was the roundest thing on the page and read as a phone app. A printed card has a corner you can see. Two tokens rather than a find-and-replace, so this is answered once and not per template: `--radius-panel` (12px) for anything with an edge — cards, photos mounted on them, the admin's boxes — and `--radius-field` (8px) for inputs, which were three different radii across the public form and the admin. Buttons stay fully round: the pill is the brand's button shape and always was. 53 tests green, every class on all seven checked pages still resolves. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
119 lines
5.4 KiB
HTML
119 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/page :: page(${title}, ${description}, ${path}, ~{::content})}">
|
|
<body>
|
|
<div th:fragment="content">
|
|
|
|
<!--/* Hero — centred lockup on a sage wash. */-->
|
|
<section class="relative flex items-center min-h-[78svh] py-20 md:py-28 bg-bakery-900 text-white overflow-hidden">
|
|
<!--/* Softened on purpose: the storefront's own painted sign sits right behind the logo, so a sharp
|
|
photo makes you read the name twice. scale-110 hides the blur's feathered edges. */-->
|
|
<img th:src="${photos.of('gallery/Outside.webp')}" alt="" fetchpriority="high"
|
|
class="absolute inset-0 w-full h-full object-cover object-bottom blur-[3px] scale-110">
|
|
<!--/* Sage wash rather than a neutral black scrim — the tint is the identity. */-->
|
|
<div class="absolute inset-0 bg-bakery-900/80"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-bakery-900 via-bakery-800/60 to-bakery-900/80"></div>
|
|
|
|
<!--/* w-full/min-w-0 keep this flex item from sizing to its max-content width and blowing out the
|
|
page on narrow screens. */-->
|
|
<div class="relative container mx-auto px-4 w-full min-w-0">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<div th:replace="~{fragments/lockup :: large('text-bakery-50 mb-10')}"></div>
|
|
<p class="lede sm:text-xl text-bakery-100 mb-10">
|
|
A coffeehouse and bakery in downtown Princeville, Illinois.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<a href="/products"
|
|
class="pill-cream">
|
|
See the menu
|
|
</a>
|
|
<a href="#visit"
|
|
class="pill-ghost">
|
|
Visit us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* What people come in for */-->
|
|
<section class="section bg-bakery-50">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="h2 text-center text-bakery-900 mb-12">What people come in for</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
|
|
<div th:each="item : ${ {'Cinnamon Rolls', 'Sugar Cookies', 'Cakes'} }"
|
|
class="group panel-lift overflow-hidden text-center hover:-translate-y-1">
|
|
<div class="overflow-hidden">
|
|
<!--/* The filenames carry the spaces in these names; SitePhotos encodes them. */-->
|
|
<img th:src="${photos.of('gallery/' + item + '.webp')}" th:alt="${item}" width="600" height="400" loading="lazy"
|
|
class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105">
|
|
</div>
|
|
<h3 class="panel-head border-b-0 border-t h4 md:text-2xl text-bakery-800 py-6" th:text="${item}">Cinnamon Rolls</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* Our story */-->
|
|
<section class="section bg-bakery-800 text-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<h2 class="h2 mb-8" style="letter-spacing: 0.01em">Our story</h2>
|
|
<p class="text-base md:text-lg text-bakery-100 mb-8 leading-relaxed">
|
|
Morissa Bennett opened The Vine in 2024. We bake in our own kitchen on Main Street:
|
|
cinnamon rolls, cookies, custom cakes, sandwiches, paninis, and coffee.
|
|
</p>
|
|
<a href="/history" class="text-white hover:text-bakery-200 font-semibold underline underline-offset-4">
|
|
Read our story
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/*
|
|
Ordering ahead. The catering page exists and the homepage said nothing about it — a customer only
|
|
found it by reading the nav. Photo on one side, the offer on the other, and the three tables named so
|
|
the link is worth following.
|
|
*/-->
|
|
<section class="section bg-bakery-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center max-w-5xl mx-auto">
|
|
<img th:src="${photos.of('gallery/Sugar Cookies.webp')}" alt="Iced sugar cookies from The Vine"
|
|
width="800" height="600" loading="lazy"
|
|
class="w-full h-64 md:h-80 object-cover rounded-panel shadow-xs">
|
|
<div>
|
|
<h2 class="h2 text-bakery-900">Ordering for a crowd?</h2>
|
|
<p class="mt-4 text-bakery-800 leading-relaxed">
|
|
Goodie boxes for the office, packages for a party, and cakes and desserts for a wedding —
|
|
with prices, sizes and what each one includes, so you can see where to start.
|
|
</p>
|
|
<a href="/catering"
|
|
class="pill-sage mt-6">
|
|
Goodie boxes & catering
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--/* Visit us */-->
|
|
<section id="visit" class="section bg-bakery-50 scroll-mt-24">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="h2 text-center text-bakery-900 mb-12">Visit us</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-4xl mx-auto">
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h3 text-bakery-900 mb-6">Our hours</h2>
|
|
<div th:replace="~{fragments/visit :: hours('text-bakery-800')}"></div>
|
|
</div>
|
|
<div class="panel p-6 md:p-8">
|
|
<h2 class="h3 text-bakery-900 mb-6">Find us</h2>
|
|
<div class="text-bakery-800"
|
|
th:replace="~{fragments/visit :: address('hover:text-bakery-600 underline underline-offset-4')}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|