-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (85 loc) · 6.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html class="no-js" lang="">
<head>
@js '/htmx.min.js'
<meta charset="utf-8">
<title>Mowry Coffee</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="output.css" type="text/css" media="screen" />
</head>
<body class="grainy">
<div class="grainy mb-20 flex w-full flex-col items-center h-max">
@include 'nav.html'
<div class="mt-8 flex flex-col items-center justify-center whitespace-pre-line p-4">
<div class="flex items-center justify-center rounded-full border-2 border-stone-200 px-4 py-2 bg-white">
<span class="font-semibold">@banner</span>
</div>
<div class="font-heading mb-6 text-center text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">
Roasting <br class="block sm:hidden" /><span class="text-orange-400">fresh coffee</span>
in Kingston, Tennessee
</div>
<p class="text-center" style="text-wrap:balance;">Coffee delivered straight to your doorstep, <br class="hidden sm:block" />or shipped anywhere in the world.</p>
<a href="/shop" hx-boost="true" class="mt-4 rounded-full bg-orange-400 px-4 py-2 text-white">Get coffee delivered</a>
<a href="#info" class="scroll-mt-20"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="text-muted-foreground mt-16 animate-bounce"><path d="m6 9 6 6 6-6"></path></svg></a>
</div>
<div class="my-20"></div>
<div id="info" class="scroll-mt-20 bg-white flex w-11/12 flex-col justify-between rounded-xl border-2 border-gray-200 p-4 md:flex-row lg:w-7/12">
<div class="flex-1">
<h2 class="mb-4 text-4xl font-semibold sm:text-5xl">
Single batch.<br />
Big <span class="text-orange-400">taste</span>.
</h2>
<p>Each bag of coffee is carefully roasted one at a time. <a href="/shop" hx-boost="true" class="text-orange-400 underline">Check our offerings</a></p>
<div class="my-4 flex flex-col gap-2">
<div>
<svg class="inline h-6 w-6 fill-orange-400 stroke-inherit" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
</svg>
<span class="inline font-semibold">Speed</span>
- Coffee is roasted each week on Sunday, meaning you get it quick.
</div>
<div>
<svg class="inline h-6 w-6 fill-orange-400 stroke-inherit" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"></path>
</svg>
<span class="inline font-semibold">Personal</span>
- We offer 3 different roast levels, and will grind for any brew method.
</div>
<div>
<svg class="inline h-6 w-6 stroke-orange-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"></path>
</svg>
<span class="inline font-semibold">Taste</span>
- Tasting notes are provided for each green coffee we provide.
</div>
</div>
</div>
<img src="https://i.imgur.com/3uVFcHv.jpg" alt="" class="h-96 w-72 self-center overflow-hidden rounded-3xl object-cover object-right p-4" />
</div>
<div class="my-16"></div>
<div class="flex flex-col items-center">
<h2 class="my-4 text-4xl font-bold sm:text-5xl">2 ways to go</h2>
<p class="text-center" style="text-wrap: balance;">
Order coffee when you need it,<br class="block sm:hidden" />
or make sure you never run out <br class="block sm:hidden">with a <a href="/shop" hx-boost="true" class="text-orange-400 underline">subscription</a>
</p>
<div class="my-4 flex w-9/12 flex-col justify-between gap-8 sm:flex-row">
<div class="flex flex-1 flex-col">
<div class="my-3 h-1 w-full bg-stone-300"></div>
<span class="py-2 font-semibold">Single Order</span>
<p style="text-wrap: balance;">Each 12oz. <a href="/shop" hx-boost="true" class="text-orange-400 underline">bag of coffee</a> starts at just $11, with discounts as order quantity increases.</p>
</div>
<div class="flex flex-1 flex-col">
<div class="my-3 h-1 w-full bg-stone-300"></div>
<span class="py-2 font-semibold">Subscription</span>
<p style="text-wrap: balance;">Monthly <a href="/shop" hx-boost="true" class="text-orange-400 underline">subscriptions</a> can be delievered throughout the month, all at once, or shipped once a month.</p>
</div>
</div>
<p class="py-4 text-center text-xs" style="text-wrap: balance;">All orders of 4 bags or more will receive a discount of $1 per bag</p>
</div>
<p class="text-xs mt-4"><a class="text-orange-400 underline" href="https://www.github.com/jacksonmowry">Jackson Mowry</a> | Mowry Coffee 2023</p>
</div>
</body>
</html>