fix: minor padding and alignment leaks

This commit is contained in:
Kinfe123 2024-06-26 01:11:32 +03:00
parent f46e42c2df
commit eea65a9ae2

View file

@ -23,7 +23,7 @@ const slap = {
function Hero() {
return (
<>
<section className="relative mt-24 flex max-w-3xl flex-col items-center justify-center gap-5 md:mt-32">
<section className="flex relative flex-col gap-5 justify-center items-center mt-24 max-w-xl md:mt-32 md:max-w-2xl lg:max-w-3xl">
<TwitterBorder />
<motion.h1
{...{
@ -33,7 +33,7 @@ function Hero() {
className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)] bg-clip-text text-4xl tracking-tighter text-transparent md:text-7xl"
>
Build your own second brain{" "}
<span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
<span className="text-transparent bg-clip-text bg-gradient-to-r to-blue-200 from-zinc-300">
with supermemory and bring it at scale
</span>
</motion.h1>
@ -42,7 +42,7 @@ function Hero() {
...slap,
transition: { ...slap.transition, delay: 0.3 },
}}
className="text-soft-foreground-text text-lg text-center"
className="text-lg text-center text-soft-foreground-text"
>
Bring saved information from all over the internet into one place
where you can connect it, and ask AI about it
@ -52,25 +52,23 @@ function Hero() {
<AnimatedLogoCloud />
<div className="relative z-20">
<motion.img
{...{
...slap,
transition: { ...slap.transition, delay: 0.35 },
}}
src="/landing-ui.svg"
alt="Landing page background"
width={1512}
height={1405}
draggable="false"
className="z-40 md:mt-[-40px] h-full w-[80%] md:w-full select-none "
/>
<div
className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100 blur-[337.4px]"
style={{ transform: "rotate(-30deg)" }}
/>
<motion.img
{...{
...slap,
transition: { ...slap.transition, delay: 0.35 },
}}
src="/landing-ui.svg"
alt="Landing page background"
width={1512}
height={1405}
draggable="false"
className="z-40 md:mt-[-40px] hidden sm:block h-full w-[80%] mx-auto md:w-full select-none px-5"
/>
<div
className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100 blur-[337.4px]"
style={{ transform: "rotate(-30deg)" }}
/>
</div>
</>
);
}