Spaces:
Sleeping
Sleeping
File size: 2,600 Bytes
f3d88e5 6528c1e 6a37227 6528c1e 6a37227 cbe7544 f3d88e5 6a37227 6528c1e 6a37227 6528c1e 6a37227 6528c1e cbe7544 f3d88e5 cbe7544 |
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 |
import Footer from "@/components/footer";
import Header from "@/components/header";
import { Compare } from "@/components/ui/compare";
import { ContainerScroll } from "@/components/ui/container-scroll-animation";
import { Cover } from "@/components/ui/cover";
import WelcomeSection from "@/components/welcome-section";
import Image from "next/image";
export default function Home() {
return (
<div className="flex min-h-screen w-full flex-col">
<Header />
<main className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col">
<WelcomeSection />
<section className="flex flex-col overflow-hidden bg-background dark:bg-black">
<ContainerScroll
titleComponent={
<>
<h1 className="p-2 text-4xl font-semibold bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white">
Discover the power of <br />
<span className="text-4xl md:text-[6rem] font-bold mt-1 leading-none">
Microgravity
</span>
</h1>
</>
}
>
<Image
src={`/screenshot.jpg`}
alt="hero"
height={720}
width={1400}
className="mx-auto rounded-2xl object-cover h-full object-left-top"
draggable={false}
/>
</ContainerScroll>
</section>
<section className="flex flex-col overflow-hidden bg-background dark:bg-black h-[calc(100vh_-_theme(spacing.16))] items-center justify-center">
<h1 className="text-4xl md:text-4xl lg:text-6xl font-semibold max-w-7xl mx-auto text-center mt-6 relative z-20 py-6 bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 via-neutral-700 to-neutral-700 dark:from-neutral-800 dark:via-white dark:to-white">
Get amazing insights <br /> at <Cover>warp speed</Cover>
</h1>
<div className="p-4 border rounded-3xl dark:bg-neutral-900 bg-neutral-100 border-neutral-200 dark:border-neutral-800 px-4">
<Compare
firstImage="/segment-before.jpg"
secondImage="/segment-after.jpg"
firstImageClassName="object-cover object-left-top"
secondImageClassname="object-cover object-left-top"
className="h-[250px] w-[200px] md:h-[500px] md:w-[500px]"
slideMode="hover"
/>
</div>
</section>
</main>
<Footer />
</div>
);
}
|