Skip to content

Commit

Permalink
fix(about): split intro and add padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandonsaldan
brandonsaldan committed Jan 12, 2025
1 parent 16bfeb3 commit 9d2d0cc
Showing 1 changed file with 73 additions and 68 deletions.
141 changes: 73 additions & 68 deletions src/components/about-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,79 +139,83 @@ function Hero() {
)
}

function About() {
function Intro() {
return (
<div className="bg-white dark:bg-zinc-950">
<main className="isolate">
<div className="relative isolate -z-10">
<svg
aria-hidden="true"
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"
>
<defs>
<pattern
x="50%"
y={-1}
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg
x="50%"
y={-1}
className="overflow-visible fill-gray-50 dark:fill-zinc-800"
>
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
width="100%"
height="100%"
strokeWidth={0}
/>
</svg>
<div
aria-hidden="true"
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"
<div className="relative isolate -z-10 bg-white dark:bg-zinc-950">
<svg
aria-hidden="true"
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"
>
<defs>
<pattern
x="50%"
y={-1}
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<div
style={{
clipPath:
'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%)',
}}
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 dark:hidden"
/>
</div>
<div className="overflow-hidden">
<div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl dark:text-white">
Giving Hardware a Second Life.
</h1>
<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">
When Spotify ended Car Thing support, thousands of devices
became paperweights overnight. We're changing that by
creating open source software that transforms these
forgotten devices into powerful car companions, proving that
great hardware deserves a second chance.
</p>
</div>
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
<AnimatedImageGallery />
</div>
</div>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg
x="50%"
y={-1}
className="overflow-visible fill-gray-50 dark:fill-zinc-800"
>
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
strokeWidth={0}
/>
</svg>
<rect
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
width="100%"
height="100%"
strokeWidth={0}
/>
</svg>
<div
aria-hidden="true"
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"
>
<div
style={{
clipPath:
'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%)',
}}
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 dark:hidden"
/>
</div>
<div className="overflow-hidden pl-6 lg:pl-20">
<div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
<div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl dark:text-white">
Giving Hardware a Second Life.
</h1>
<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">
When Spotify ended Car Thing support, thousands of devices
became paperweights overnight. We're changing that by creating
open source software that transforms these forgotten devices
into powerful car companions, proving that great hardware
deserves a second chance.
</p>
</div>
<div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
<AnimatedImageGallery />
</div>
</div>
</div>
</div>
</div>
)
}

function About() {
return (
<div className="bg-white dark:bg-zinc-950">
<main className="isolate">
<div className="mx-auto max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-2 sm:px-0">
<div className="relative hidden sm:block">
<img
Expand Down Expand Up @@ -339,8 +343,9 @@ export default function Home() {
return (
<div className="overflow-hidden">
<Hero />
<Intro />
<main>
<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">
<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">
<About />
</div>
</main>
Expand Down

0 comments on commit 9d2d0cc

Please sign in to comment.