Spaces:
Sleeping
Sleeping
File size: 2,164 Bytes
6528c1e 2f819d6 6528c1e 2f819d6 6528c1e 29d1cf9 6528c1e fcfb631 6528c1e 29d1cf9 6528c1e |
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 |
"use client";
import { ShootingStars } from "../ui/shooting-stars";
import { SparklesCore } from "../ui/sparkles";
import { StarsBackground } from "../ui/stars-background";
const WelcomeSection = () => {
return (
<section id="#" className="h-screen w-full dark:bg-black flex flex-col items-center justify-center overflow-hidden">
<h1
className="md:text-7xl text-3xl lg:text-9xl font-bold text-center relative z-20
bg-clip-text text-transparent bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white"
>
ATOM
</h1>
<div className="w-[40rem] h-40 relative">
{/* Gradients */}
<div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
<div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
<div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
<div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
{/* Core component */}
<SparklesCore
background="transparent"
minSize={0.4}
maxSize={1}
particleDensity={1200}
className="w-full h-full"
particleColor="#FFFFFF"
/>
<h3 className="mt-[-9rem] pb-1 md:text-xl text-sm lg:text-3xl bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-500 dark:from-neutral-200 dark:to-neutral-600 text-center font-sans font-bold relative z-20">
Your one-stop shop
<br />
for gravity-free design...
</h3>
{/* Radial Gradient to prevent sharp edges */}
<div className="hidden dark:block absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
</div>
<ShootingStars minSpeed={3} maxSpeed={12} />
<StarsBackground starDensity={0.0005} />
</section>
);
};
export default WelcomeSection;
|