Skip to content

Commit 9d2d0cc

Browse files
brandonsaldanbrandonsaldan
committed
fix(about): split intro and add padding
1 parent 16bfeb3 commit 9d2d0cc

File tree

1 file changed

+73
-68
lines changed

1 file changed

+73
-68
lines changed

‎src/components/about-page.tsx

+73-68
Original file line numberDiff line numberDiff line change
@@ -139,79 +139,83 @@ function Hero() {
139139
)
140140
}
141141

142-
function About() {
142+
function Intro() {
143143
return (
144-
<div className="bg-white dark:bg-zinc-950">
145-
<main className="isolate">
146-
<div className="relative isolate -z-10">
147-
<svg
148-
aria-hidden="true"
149-
className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)] dark:stroke-zinc-900"
150-
>
151-
<defs>
152-
<pattern
153-
x="50%"
154-
y={-1}
155-
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
156-
width={200}
157-
height={200}
158-
patternUnits="userSpaceOnUse"
159-
>
160-
<path d="M.5 200V.5H200" fill="none" />
161-
</pattern>
162-
</defs>
163-
<svg
164-
x="50%"
165-
y={-1}
166-
className="overflow-visible fill-gray-50 dark:fill-zinc-800"
167-
>
168-
<path
169-
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
170-
strokeWidth={0}
171-
/>
172-
</svg>
173-
<rect
174-
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
175-
width="100%"
176-
height="100%"
177-
strokeWidth={0}
178-
/>
179-
</svg>
180-
<div
181-
aria-hidden="true"
182-
className="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
144+
<div className="relative isolate -z-10 bg-white dark:bg-zinc-950">
145+
<svg
146+
aria-hidden="true"
147+
className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)] dark:stroke-zinc-900"
148+
>
149+
<defs>
150+
<pattern
151+
x="50%"
152+
y={-1}
153+
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
154+
width={200}
155+
height={200}
156+
patternUnits="userSpaceOnUse"
183157
>
184-
<div
185-
style={{
186-
clipPath:
187-
'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
188-
}}
189-
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 dark:hidden"
190-
/>
191-
</div>
192-
<div className="overflow-hidden">
193-
<div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
194-
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
195-
<div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
196-
<h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl dark:text-white">
197-
Giving Hardware a Second Life.
198-
</h1>
199-
<p className="mt-8 text-pretty text-lg text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-300">
200-
When Spotify ended Car Thing support, thousands of devices
201-
became paperweights overnight. We're changing that by
202-
creating open source software that transforms these
203-
forgotten devices into powerful car companions, proving that
204-
great hardware deserves a second chance.
205-
</p>
206-
</div>
207-
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
208-
<AnimatedImageGallery />
209-
</div>
210-
</div>
158+
<path d="M.5 200V.5H200" fill="none" />
159+
</pattern>
160+
</defs>
161+
<svg
162+
x="50%"
163+
y={-1}
164+
className="overflow-visible fill-gray-50 dark:fill-zinc-800"
165+
>
166+
<path
167+
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
168+
strokeWidth={0}
169+
/>
170+
</svg>
171+
<rect
172+
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
173+
width="100%"
174+
height="100%"
175+
strokeWidth={0}
176+
/>
177+
</svg>
178+
<div
179+
aria-hidden="true"
180+
className="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
181+
>
182+
<div
183+
style={{
184+
clipPath:
185+
'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
186+
}}
187+
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 dark:hidden"
188+
/>
189+
</div>
190+
<div className="overflow-hidden pl-6 lg:pl-20">
191+
<div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
192+
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
193+
<div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
194+
<h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl dark:text-white">
195+
Giving Hardware a Second Life.
196+
</h1>
197+
<p className="mt-8 text-pretty text-lg text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none dark:text-gray-300">
198+
When Spotify ended Car Thing support, thousands of devices
199+
became paperweights overnight. We're changing that by creating
200+
open source software that transforms these forgotten devices
201+
into powerful car companions, proving that great hardware
202+
deserves a second chance.
203+
</p>
204+
</div>
205+
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
206+
<AnimatedImageGallery />
211207
</div>
212208
</div>
213209
</div>
210+
</div>
211+
</div>
212+
)
213+
}
214214

215+
function About() {
216+
return (
217+
<div className="bg-white dark:bg-zinc-950">
218+
<main className="isolate">
215219
<div className="mx-auto max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-2 sm:px-0">
216220
<div className="relative hidden sm:block">
217221
<img
@@ -339,8 +343,9 @@ export default function Home() {
339343
return (
340344
<div className="overflow-hidden">
341345
<Hero />
346+
<Intro />
342347
<main>
343-
<div className="bg-gradient-to-b from-white from-50% to-gray-100 pb-20 sm:mb-0 sm:pb-0 dark:from-zinc-950 dark:from-50% dark:to-zinc-950">
348+
<div className="bg-gradient-to-b from-white from-50% to-gray-100 px-6 pb-20 sm:mb-0 sm:pb-0 lg:px-20 dark:from-zinc-950 dark:from-50% dark:to-zinc-950">
344349
<About />
345350
</div>
346351
</main>

0 commit comments

Comments
 (0)