Skip to content

Commit 4313631

Browse files
lynnandtoniclynnandtonic
committed
add reactgg launch banner
1 parent 9c6865d commit 4313631

File tree

4 files changed

+271
-2
lines changed

4 files changed

+271
-2
lines changed

‎usehooks.com/public/img/bytes-tshirt.png

1.49 KB
Loading

‎usehooks.com/src/components/CountdownBanner.astro

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
---
2+
import Button from "../components/Button.astro";
3+
---
4+
5+
<!-- Show this one on Day 2 of launch week --><!-- <section class="banner week">
6+
<h3>Launch Week Sale</h3>
7+
<div class="countdown">
8+
<div class="number day">
9+
<span id="days" class="time">5</span>
10+
<span class="unit">days</span>
11+
</div>
12+
<div class="number hour">
13+
<span id="hours" class="time">22</span>
14+
<span class="unit">hours</span>
15+
</div>
16+
<div class="number minute">
17+
<span id="minutes" class="time">47</span>
18+
<span class="unit">minutes</span>
19+
</div>
20+
<div class="number second">
21+
<span id="seconds" class="time">12</span>
22+
<span class="unit">seconds</span>
23+
</div>
24+
</div>
25+
<p>
26+
Get up to <strong>25% off</strong><sup>1</sup> if you buy before this giant clock
27+
goes to zero.
28+
</p>
29+
<Button
30+
type="link"
31+
href="https://react.gg/#register"
32+
color="yellow"
33+
size="large"
34+
text="Get the course now"
35+
/>
36+
<ol class="footnotes">
37+
<li>Literally the cheapest this course will ever be</li>
38+
</ol>
39+
</section> --><!-- Show this one on Day 1 of launch week -->
40+
<section class="banner day-one">
41+
<h3>Launch Day Sale</h3>
42+
<div class="countdown">
43+
<div class="number hour">
44+
<span id="hours" class="time">22</span>
45+
<span class="unit">hours</span>
46+
</div>
47+
<div class="number minute">
48+
<span id="minutes" class="time">47</span>
49+
<span class="unit">minutes</span>
50+
</div>
51+
<div class="number second">
52+
<span id="seconds" class="time">12</span>
53+
<span class="unit">seconds</span>
54+
</div>
55+
</div>
56+
<p>
57+
Get up to <strong>25% off</strong><sup>1</sup> the react.gg course, plus a <strong
58+
>FREE</strong
59+
> ui.dev t-shirt<sup>2,3,4</sup> if you buy before this giant clock goes to zero.
60+
</p>
61+
<Button
62+
type="link"
63+
href="https://react.gg/#register"
64+
color="yellow"
65+
size="large"
66+
text="Get the course + t-shirt now"
67+
/>
68+
<ol class="footnotes">
69+
<li>Literally the cheapest this course will ever be</li>
70+
<li>Our shirts are very soft</li>
71+
<li>We’ll probably send you stickers too</li>
72+
<li>We might lose money on this but wdgaf</li>
73+
</ol>
74+
</section>
75+
76+
<style>
77+
.banner {
78+
margin-bottom: var(--body-padding);
79+
padding: var(--body-border);
80+
display: grid;
81+
gap: 1rem;
82+
background-color: var(--brand-blue);
83+
border-radius: 0.5rem;
84+
color: var(--charcoal);
85+
container-type: inline-size;
86+
}
87+
88+
.banner h3 {
89+
padding: 0.3em;
90+
background-color: var(--brand-pink);
91+
border: var(--border-dark);
92+
border-radius: 0.3rem;
93+
box-shadow: 2px 2px 0 var(--charcoal);
94+
text-align: center;
95+
}
96+
97+
.banner p {
98+
text-align: center;
99+
max-width: 50ch;
100+
justify-self: center;
101+
}
102+
103+
.info-main {
104+
justify-self: center;
105+
}
106+
107+
p {
108+
line-height: 1.3;
109+
}
110+
111+
p strong {
112+
margin: 0 0.1em;
113+
display: inline-block;
114+
font-size: 115%;
115+
}
116+
117+
p sup {
118+
margin-left: 0.2em;
119+
display: inline-block;
120+
font-weight: 400;
121+
font-size: 60%;
122+
transform: translateY(-0.2em);
123+
}
124+
125+
.button {
126+
margin: 1rem 0;
127+
justify-self: center;
128+
}
129+
130+
.day-one .button.large {
131+
padding-right: 5em !important;
132+
position: relative;
133+
}
134+
135+
.day-one .button::after {
136+
content: "";
137+
width: 5.4em;
138+
aspect-ratio: 46 / 40;
139+
display: block;
140+
position: absolute;
141+
right: -1%;
142+
top: 50%;
143+
background-repeat: no-repeat;
144+
background-image: url("/img/bytes-tshirt.png");
145+
background-size: contain;
146+
transform: translateY(-52%) rotate(15deg);
147+
}
148+
149+
.footnotes {
150+
display: flex;
151+
justify-content: center;
152+
flex-wrap: wrap;
153+
gap: 0 0.5em;
154+
}
155+
156+
.footnotes li {
157+
list-style-type: number;
158+
list-style-position: inside;
159+
font-size: clamp(0.8rem, 1.4vw, 0.9rem);
160+
}
161+
162+
.countdown {
163+
padding: 0.6em;
164+
display: flex;
165+
gap: 0.6rem;
166+
background-color: var(--brand-charcoal);
167+
color: var(--brand-beige);
168+
border-radius: 0.4rem;
169+
text-align: center;
170+
}
171+
172+
.number {
173+
padding: 1rem 0.2rem;
174+
flex: 1;
175+
display: grid;
176+
gap: 0.1em 0.3em;
177+
line-height: 1;
178+
border: var(--border-light);
179+
border-color: var(--purple);
180+
border-radius: 0.2rem;
181+
color: var(--brand-beige);
182+
}
183+
184+
.time {
185+
display: flex;
186+
place-content: center;
187+
font-weight: bold;
188+
font-family: Fira Code;
189+
font-size: 2.3rem;
190+
font-size: clamp(1rem, 4vw, 2.3rem);
191+
visibility: hidden;
192+
}
193+
194+
.unit {
195+
font-size: 0.6em;
196+
line-height: 1;
197+
}
198+
</style>
199+
200+
<script>
201+
const targetDate = getPSTDate(2023, 8, 6);
202+
let countdownInterval;
203+
204+
function updateCountdown() {
205+
const now = new Date() as any;
206+
207+
// Calculate the difference in seconds
208+
let delta = Math.floor((targetDate - now) / 1000);
209+
210+
if (delta <= 0) {
211+
// Countdown has ended, clear the interval and set all values to 0
212+
clearInterval(countdownInterval);
213+
// document.getElementById("days").textContent = "00";
214+
document.getElementById("hours").textContent = "00";
215+
document.getElementById("minutes").textContent = "00";
216+
document.getElementById("seconds").textContent = "00";
217+
return;
218+
}
219+
220+
// Calculate days, hours, minutes and seconds
221+
const days = Math.floor(delta / 86400);
222+
delta -= days * 86400;
223+
const hours = Math.floor(delta / 3600) % 24;
224+
delta -= hours * 3600;
225+
const minutes = Math.floor(delta / 60) % 60;
226+
delta -= minutes * 60;
227+
const seconds = delta % 60;
228+
229+
// Uncomment when we move to the other banner
230+
// document.getElementById("days").textContent = String(days).padStart(2, "0");
231+
document.getElementById("hours").textContent = String(hours).padStart(
232+
2,
233+
"0"
234+
);
235+
document.getElementById("minutes").textContent = String(minutes).padStart(
236+
2,
237+
"0"
238+
);
239+
document.getElementById("seconds").textContent = String(seconds).padStart(
240+
2,
241+
"0"
242+
);
243+
}
244+
245+
function showCountDown() {
246+
const elements = document.querySelectorAll<HTMLElement>(".time");
247+
elements.forEach((element) => {
248+
element.style.visibility = "visible";
249+
});
250+
}
251+
252+
function getPSTDate(year, month, day, hour = 0, minute = 0, second = 0): any {
253+
const utcDate = new Date(
254+
Date.UTC(year, month, day, hour + 8, minute, second)
255+
);
256+
257+
const pstString = utcDate.toLocaleString("en-US", {
258+
timeZone: "America/Los_Angeles",
259+
});
260+
261+
return new Date(pstString);
262+
}
263+
264+
updateCountdown();
265+
showCountDown();
266+
countdownInterval = setInterval(updateCountdown, 1000);
267+
</script>

‎usehooks.com/src/pages/index.astro

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { getCollection } from "astro:content";
33
import Layout from "../layouts/Layout.astro";
4+
import CountdownBanner from "../components/CountdownBanner.astro";
45
import NavMain from "../sections/NavMain.astro";
56
import HomeHero from "../sections/HomeHero.astro";
67
import HooksList from "../components/search/HooksList";
@@ -13,6 +14,7 @@ const hooks = await getCollection("hooks");
1314
title="useHooks – The React Hooks Library"
1415
description="A collection of modern, server-safe React hooks – from the ui.dev team"
1516
>
17+
<CountdownBanner />
1618
<NavMain />
1719
<HomeHero />
1820
<HooksList client:load hooks={hooks} />

‎usehooks.com/src/styles/globals.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ video {
152152
--brand-pink: #f38ba3;
153153
--brand-green: #0ba95b;
154154
--brand-purple: #7b5ea7;
155-
--brand-biege: #f9f4da;
155+
--brand-beige: #f9f4da;
156156
--brand-blue: #12b5e5;
157157
--brand-orange: #fc7428;
158158
--brand-red: #ed203d;
@@ -161,7 +161,7 @@ video {
161161
--magesticPurple: #9d7dce;
162162

163163
--red: var(--brand-red);
164-
--white: var(--brand-biege);
164+
--white: var(--brand-beige);
165165
--purple: var(--brand-purple);
166166
--black: var(--brand-coal);
167167
--blue: var(--brand-blue);

0 commit comments

Comments
 (0)