landing

package-lock.json

@@ -12,6 +12,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@tabler/icons-react": "^3.17.0",
         "@tsparticles/engine": "^3.5.0",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.5.0",
@@ -23,6 +24,7 @@
         "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
+        "simplex-noise": "^4.0.3",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -1081,6 +1083,32 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.17.0.tgz",
+      "integrity": "sha512-sCSfAQ0w93KSnSL7tS08n73CdIKpuHP8foeLMWgDKiZaCs8ZE//N3ytazCk651ZtruTtByI3b+ZDj7nRf+hHvA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.17.0.tgz",
+      "integrity": "sha512-Ndm9Htv7KpIU1PYYrzs5EMhyA3aZGcgaxUp9Q1XOxcRZ+I0X+Ub2WS5f4bkRyDdL1s0++k2T9XRgmg2pG113sw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.17.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tsparticles/basic": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.5.0.tgz",
@@ -5547,6 +5575,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simplex-noise": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/simplex-noise/-/simplex-noise-4.0.3.tgz",
+      "integrity": "sha512-qSE2I4AngLQG7BXqoZj51jokT4WUXe8mOBrvfOXpci8+6Yu44+/dD5zqDpOx3Ux792eamTd2lLcI8jqFntk/lg==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tabler/icons-react": "^3.17.0",
     "@tsparticles/engine": "^3.5.0",
     "@tsparticles/react": "^3.0.0",
     "@tsparticles/slim": "^3.5.0",
@@ -24,6 +25,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "simplex-noise": "^4.0.3",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/page.tsx

@@ -1,7 +1,9 @@
 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 { SparklesCore } from "@/components/ui/sparkles";
+import { Cover } from "@/components/ui/cover";
+import WelcomeSection from "@/components/welcome-section";
 import Image from "next/image";
 
 export default function Home() {
@@ -9,42 +11,12 @@ export default function Home() {
     <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">
-        <div className="h-screen w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
-          <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
-            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="absolute inset-0 w-full h-full bg-black [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
-          </div>
-        </div>
-        <div className="flex flex-col overflow-hidden bg-black">
+        <WelcomeSection />
+        <section className="flex flex-col overflow-hidden bg-background dark:bg-black">
           <ContainerScroll
             titleComponent={
               <>
-                <h1 className="text-4xl font-semibold text-black dark:text-white">
+                <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
@@ -62,7 +34,22 @@ export default function Home() {
               draggable={false}
             />
           </ContainerScroll>
-        </div>
+        </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>

src/components/ui/compare.tsx

@@ -0,0 +1,240 @@
+"use client";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { SparklesCore } from "@/components/ui/sparkles";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { IconDotsVertical } from "@tabler/icons-react";
+
+interface CompareProps {
+  firstImage?: string;
+  secondImage?: string;
+  className?: string;
+  firstImageClassName?: string;
+  secondImageClassname?: string;
+  initialSliderPercentage?: number;
+  slideMode?: "hover" | "drag";
+  showHandlebar?: boolean;
+  autoplay?: boolean;
+  autoplayDuration?: number;
+}
+export const Compare = ({
+  firstImage = "",
+  secondImage = "",
+  className,
+  firstImageClassName,
+  secondImageClassname,
+  initialSliderPercentage = 50,
+  slideMode = "hover",
+  showHandlebar = true,
+  autoplay = false,
+  autoplayDuration = 5000,
+}: CompareProps) => {
+  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+
+  const startAutoplay = useCallback(() => {
+    if (!autoplay) return;
+
+    const startTime = Date.now();
+    const animate = () => {
+      const elapsedTime = Date.now() - startTime;
+      const progress =
+        (elapsedTime % (autoplayDuration * 2)) / autoplayDuration;
+      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
+
+      setSliderXPercent(percentage);
+      autoplayRef.current = setTimeout(animate, 16); // ~60fps
+    };
+
+    animate();
+  }, [autoplay, autoplayDuration]);
+
+  const stopAutoplay = useCallback(() => {
+    if (autoplayRef.current) {
+      clearTimeout(autoplayRef.current);
+      autoplayRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    startAutoplay();
+    return () => stopAutoplay();
+  }, [startAutoplay, stopAutoplay]);
+
+  function mouseEnterHandler() {
+    setIsMouseOver(true);
+    stopAutoplay();
+  }
+
+  function mouseLeaveHandler() {
+    setIsMouseOver(false);
+    if (slideMode === "hover") {
+      setSliderXPercent(initialSliderPercentage);
+    }
+    if (slideMode === "drag") {
+      setIsDragging(false);
+    }
+    startAutoplay();
+  }
+
+  const handleStart = useCallback(
+    (clientX: number) => {
+      if (slideMode === "drag") {
+        setIsDragging(true);
+      }
+    },
+    [slideMode]
+  );
+
+  const handleEnd = useCallback(() => {
+    if (slideMode === "drag") {
+      setIsDragging(false);
+    }
+  }, [slideMode]);
+
+  const handleMove = useCallback(
+    (clientX: number) => {
+      if (!sliderRef.current) return;
+      if (slideMode === "hover" || (slideMode === "drag" && isDragging)) {
+        const rect = sliderRef.current.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const percent = (x / rect.width) * 100;
+        requestAnimationFrame(() => {
+          setSliderXPercent(Math.max(0, Math.min(100, percent)));
+        });
+      }
+    },
+    [slideMode, isDragging]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => handleStart(e.clientX),
+    [handleStart]
+  );
+  const handleMouseUp = useCallback(() => handleEnd(), [handleEnd]);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => handleMove(e.clientX),
+    [handleMove]
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!autoplay) {
+        handleStart(e.touches[0].clientX);
+      }
+    },
+    [handleStart, autoplay]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    if (!autoplay) {
+      handleEnd();
+    }
+  }, [handleEnd, autoplay]);
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!autoplay) {
+        handleMove(e.touches[0].clientX);
+      }
+    },
+    [handleMove, autoplay]
+  );
+
+  return (
+    <div
+      ref={sliderRef}
+      className={cn("w-[400px] h-[400px] overflow-hidden", className)}
+      style={{
+        position: "relative",
+        cursor: slideMode === "drag" ? "grab" : "col-resize",
+      }}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={mouseLeaveHandler}
+      onMouseEnter={mouseEnterHandler}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
+    >
+      <AnimatePresence initial={false}>
+        <motion.div
+          className="h-full w-px absolute top-0 m-auto z-30 bg-gradient-to-b from-transparent from-[5%] to-[95%] via-indigo-500 to-transparent"
+          style={{
+            left: `${sliderXPercent}%`,
+            top: "0",
+            zIndex: 40,
+          }}
+          transition={{ duration: 0 }}
+        >
+          <div className="w-36 h-full [mask-image:radial-gradient(100px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-indigo-400 via-transparent to-transparent z-20 opacity-50" />
+          <div className="w-10 h-1/2 [mask-image:radial-gradient(50px_at_left,white,transparent)] absolute top-1/2 -translate-y-1/2 left-0 bg-gradient-to-r from-cyan-400 via-transparent to-transparent z-10 opacity-100" />
+          <div className="w-10 h-3/4 top-1/2 -translate-y-1/2 absolute -right-10 [mask-image:radial-gradient(100px_at_left,white,transparent)]">
+            <MemoizedSparklesCore
+              background="transparent"
+              minSize={0.4}
+              maxSize={1}
+              particleDensity={1200}
+              className="w-full h-full"
+              particleColor="#FFFFFF"
+            />
+          </div>
+          {showHandlebar && (
+            <div className="h-5 w-5 rounded-md top-1/2 -translate-y-1/2 bg-white z-30 -right-2.5 absolute   flex items-center justify-center shadow-[0px_-1px_0px_0px_#FFFFFF40]">
+              <IconDotsVertical className="h-4 w-4 text-black" />
+            </div>
+          )}
+        </motion.div>
+      </AnimatePresence>
+      <div className="overflow-hidden w-full h-full relative z-20 pointer-events-none">
+        <AnimatePresence initial={false}>
+          {firstImage ? (
+            <motion.div
+              className={cn(
+                "absolute inset-0 z-20 rounded-2xl flex-shrink-0 w-full h-full select-none overflow-hidden",
+                firstImageClassName
+              )}
+              style={{
+                clipPath: `inset(0 ${100 - sliderXPercent}% 0 0)`,
+              }}
+              transition={{ duration: 0 }}
+            >
+              <img
+                alt="first image"
+                src={firstImage}
+                className={cn(
+                  "absolute inset-0  z-20 rounded-2xl flex-shrink-0 w-full h-full select-none",
+                  firstImageClassName
+                )}
+                draggable={false}
+              />
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {secondImage ? (
+          <motion.img
+            className={cn(
+              "absolute top-0 left-0 z-[19]  rounded-2xl w-full h-full select-none",
+              secondImageClassname
+            )}
+            alt="second image"
+            src={secondImage}
+            draggable={false}
+          />
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const MemoizedSparklesCore = React.memo(SparklesCore);

src/components/ui/cover.tsx

@@ -0,0 +1,228 @@
+"use client";
+import React, { useEffect, useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef } from "react";
+import { cn } from "@/lib/utils";
+import { SparklesCore } from "@/components/ui/sparkles";
+
+export const Cover = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  const [hovered, setHovered] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [beamPositions, setBeamPositions] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (ref.current) {
+      setContainerWidth(ref.current?.clientWidth ?? 0);
+
+      const height = ref.current?.clientHeight ?? 0;
+      const numberOfBeams = Math.floor(height / 10); // Adjust the divisor to control the spacing
+      const positions = Array.from(
+        { length: numberOfBeams },
+        (_, i) => (i + 1) * (height / (numberOfBeams + 1))
+      );
+      setBeamPositions(positions);
+    }
+  }, [ref.current]);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      ref={ref}
+      className="relative hover:bg-neutral-900  group/cover inline-block dark:bg-neutral-900 bg-neutral-100 px-2 py-2  transition duration-200 rounded-sm"
+    >
+      <AnimatePresence>
+        {hovered && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              opacity: {
+                duration: 0.2,
+              },
+            }}
+            className="h-full w-full overflow-hidden absolute inset-0"
+          >
+            <motion.div
+              animate={{
+                translateX: ["-50%", "0%"],
+              }}
+              transition={{
+                translateX: {
+                  duration: 10,
+                  ease: "linear",
+                  repeat: Infinity,
+                },
+              }}
+              className="w-[200%] h-full flex"
+            >
+              <SparklesCore
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={500}
+                className="w-full h-full"
+                particleColor="#FFFFFF"
+              />
+              <SparklesCore
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={500}
+                className="w-full h-full"
+                particleColor="#FFFFFF"
+              />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      {beamPositions.map((position, index) => (
+        <Beam
+          key={index}
+          hovered={hovered}
+          duration={Math.random() * 2 + 1}
+          delay={Math.random() * 2 + 1}
+          width={containerWidth}
+          style={{
+            top: `${position}px`,
+          }}
+        />
+      ))}
+      <motion.span
+        key={String(hovered)}
+        animate={{
+          scale: hovered ? 0.8 : 1,
+          x: hovered ? [0, -30, 30, -30, 30, 0] : 0,
+          y: hovered ? [0, 30, -30, 30, -30, 0] : 0,
+        }}
+        exit={{
+          filter: "none",
+          scale: 1,
+          x: 0,
+          y: 0,
+        }}
+        transition={{
+          duration: 0.2,
+          x: {
+            duration: 0.2,
+            repeat: Infinity,
+            repeatType: "loop",
+          },
+          y: {
+            duration: 0.2,
+            repeat: Infinity,
+            repeatType: "loop",
+          },
+          scale: {
+            duration: 0.2,
+          },
+          filter: {
+            duration: 0.2,
+          },
+        }}
+        className={cn(
+          "dark:text-white inline-block text-neutral-900 relative z-20 group-hover/cover:text-white transition duration-200",
+          className
+        )}
+      >
+        {children}
+      </motion.span>
+      <CircleIcon className="absolute -right-[2px] -top-[2px]" />
+      <CircleIcon className="absolute -bottom-[2px] -right-[2px]" delay={0.4} />
+      <CircleIcon className="absolute -left-[2px] -top-[2px]" delay={0.8} />
+      <CircleIcon className="absolute -bottom-[2px] -left-[2px]" delay={1.6} />
+    </div>
+  );
+};
+
+export const Beam = ({
+  className,
+  delay,
+  duration,
+  hovered,
+  width = 600,
+  ...svgProps
+}: {
+  className?: string;
+  delay?: number;
+  duration?: number;
+  hovered?: boolean;
+  width?: number;
+} & React.ComponentProps<typeof motion.svg>) => {
+  const id = useId();
+
+  return (
+    <motion.svg
+      width={width ?? "600"}
+      height="1"
+      viewBox={`0 0 ${width ?? "600"} 1`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("absolute inset-x-0 w-full", className)}
+      {...svgProps}
+    >
+      <motion.path
+        d={`M0 0.5H${width ?? "600"}`}
+        stroke={`url(#svgGradient-${id})`}
+      />
+
+      <defs>
+        <motion.linearGradient
+          id={`svgGradient-${id}`}
+          key={String(hovered)}
+          gradientUnits="userSpaceOnUse"
+          initial={{
+            x1: "0%",
+            x2: hovered ? "-10%" : "-5%",
+            y1: 0,
+            y2: 0,
+          }}
+          animate={{
+            x1: "110%",
+            x2: hovered ? "100%" : "105%",
+            y1: 0,
+            y2: 0,
+          }}
+          transition={{
+            duration: hovered ? 0.5 : duration ?? 2,
+            ease: "linear",
+            repeat: Infinity,
+            delay: hovered ? Math.random() * (1 - 0.2) + 0.2 : 0,
+            repeatDelay: hovered ? Math.random() * (2 - 1) + 1 : delay ?? 1,
+          }}
+        >
+          <stop stopColor="#2EB9DF" stopOpacity="0" />
+          <stop stopColor="#3b82f6" />
+          <stop offset="1" stopColor="#3b82f6" stopOpacity="0" />
+        </motion.linearGradient>
+      </defs>
+    </motion.svg>
+  );
+};
+
+export const CircleIcon = ({
+  className,
+  delay,
+}: {
+  className?: string;
+  delay?: number;
+}) => {
+  return (
+    <div
+      className={cn(
+        `pointer-events-none animate-pulse group-hover/cover:hidden group-hover/cover:opacity-100 group h-2 w-2 rounded-full bg-neutral-600 dark:bg-white opacity-20 group-hover/cover:bg-white`,
+        className
+      )}
+    ></div>
+  );
+};

src/components/ui/shooting-stars.tsx

@@ -0,0 +1,146 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, { useEffect, useState, useRef } from "react";
+
+interface ShootingStar {
+  id: number;
+  x: number;
+  y: number;
+  angle: number;
+  scale: number;
+  speed: number;
+  distance: number;
+}
+
+interface ShootingStarsProps {
+  minSpeed?: number;
+  maxSpeed?: number;
+  minDelay?: number;
+  maxDelay?: number;
+  starColor?: string;
+  trailColor?: string;
+  starWidth?: number;
+  starHeight?: number;
+  className?: string;
+}
+
+const getRandomStartPoint = () => {
+  const side = Math.floor(Math.random() * 4);
+  const offset = Math.random() * window.innerWidth;
+
+  switch (side) {
+    case 0:
+      return { x: offset, y: 0, angle: 45 };
+    case 1:
+      return { x: window.innerWidth, y: offset, angle: 135 };
+    case 2:
+      return { x: offset, y: window.innerHeight, angle: 225 };
+    case 3:
+      return { x: 0, y: offset, angle: 315 };
+    default:
+      return { x: 0, y: 0, angle: 45 };
+  }
+};
+export const ShootingStars: React.FC<ShootingStarsProps> = ({
+  minSpeed = 10,
+  maxSpeed = 30,
+  minDelay = 1200,
+  maxDelay = 4200,
+  starColor = "#9E00FF",
+  trailColor = "#2EB9DF",
+  starWidth = 10,
+  starHeight = 1,
+  className,
+}) => {
+  const [star, setStar] = useState<ShootingStar | null>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const createStar = () => {
+      const { x, y, angle } = getRandomStartPoint();
+      const newStar: ShootingStar = {
+        id: Date.now(),
+        x,
+        y,
+        angle,
+        scale: 1,
+        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
+        distance: 0,
+      };
+      setStar(newStar);
+
+      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;
+      setTimeout(createStar, randomDelay);
+    };
+
+    createStar();
+
+    return () => {};
+  }, [minSpeed, maxSpeed, minDelay, maxDelay]);
+
+  useEffect(() => {
+    const moveStar = () => {
+      if (star) {
+        setStar((prevStar) => {
+          if (!prevStar) return null;
+          const newX =
+            prevStar.x +
+            prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180);
+          const newY =
+            prevStar.y +
+            prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180);
+          const newDistance = prevStar.distance + prevStar.speed;
+          const newScale = 1 + newDistance / 100;
+          if (
+            newX < -20 ||
+            newX > window.innerWidth + 20 ||
+            newY < -20 ||
+            newY > window.innerHeight + 20
+          ) {
+            return null;
+          }
+          return {
+            ...prevStar,
+            x: newX,
+            y: newY,
+            distance: newDistance,
+            scale: newScale,
+          };
+        });
+      }
+    };
+
+    const animationFrame = requestAnimationFrame(moveStar);
+    return () => cancelAnimationFrame(animationFrame);
+  }, [star]);
+
+  return (
+    <svg
+      ref={svgRef}
+      className={cn("w-full h-full absolute inset-0", className)}
+    >
+      {star && (
+        <rect
+          key={star.id}
+          x={star.x}
+          y={star.y}
+          width={starWidth * star.scale}
+          height={starHeight}
+          fill="url(#gradient)"
+          transform={`rotate(${star.angle}, ${
+            star.x + (starWidth * star.scale) / 2
+          }, ${star.y + starHeight / 2})`}
+        />
+      )}
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />
+          <stop
+            offset="100%"
+            style={{ stopColor: starColor, stopOpacity: 1 }}
+          />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

src/components/ui/stars-background.tsx

@@ -0,0 +1,143 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  RefObject,
+  useCallback,
+} from "react";
+
+interface StarProps {
+  x: number;
+  y: number;
+  radius: number;
+  opacity: number;
+  twinkleSpeed: number | null;
+}
+
+interface StarBackgroundProps {
+  starDensity?: number;
+  allStarsTwinkle?: boolean;
+  twinkleProbability?: number;
+  minTwinkleSpeed?: number;
+  maxTwinkleSpeed?: number;
+  className?: string;
+}
+
+export const StarsBackground: React.FC<StarBackgroundProps> = ({
+  starDensity = 0.00015,
+  allStarsTwinkle = true,
+  twinkleProbability = 0.7,
+  minTwinkleSpeed = 0.5,
+  maxTwinkleSpeed = 1,
+  className,
+}) => {
+  const [stars, setStars] = useState<StarProps[]>([]);
+  const canvasRef: RefObject<HTMLCanvasElement> =
+    useRef<HTMLCanvasElement>(null);
+
+  const generateStars = useCallback(
+    (width: number, height: number): StarProps[] => {
+      const area = width * height;
+      const numStars = Math.floor(area * starDensity);
+      return Array.from({ length: numStars }, () => {
+        const shouldTwinkle =
+          allStarsTwinkle || Math.random() < twinkleProbability;
+        return {
+          x: Math.random() * width,
+          y: Math.random() * height,
+          radius: Math.random() * 0.05 + 0.5,
+          opacity: Math.random() * 0.5 + 0.5,
+          twinkleSpeed: shouldTwinkle
+            ? minTwinkleSpeed +
+              Math.random() * (maxTwinkleSpeed - minTwinkleSpeed)
+            : null,
+        };
+      });
+    },
+    [
+      starDensity,
+      allStarsTwinkle,
+      twinkleProbability,
+      minTwinkleSpeed,
+      maxTwinkleSpeed,
+    ]
+  );
+
+  useEffect(() => {
+    const updateStars = () => {
+      if (canvasRef.current) {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+
+        const { width, height } = canvas.getBoundingClientRect();
+        canvas.width = width;
+        canvas.height = height;
+        setStars(generateStars(width, height));
+      }
+    };
+
+    updateStars();
+
+    const resizeObserver = new ResizeObserver(updateStars);
+    if (canvasRef.current) {
+      resizeObserver.observe(canvasRef.current);
+    }
+
+    return () => {
+      if (canvasRef.current) {
+        resizeObserver.unobserve(canvasRef.current);
+      }
+    };
+  }, [
+    starDensity,
+    allStarsTwinkle,
+    twinkleProbability,
+    minTwinkleSpeed,
+    maxTwinkleSpeed,
+    generateStars,
+  ]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let animationFrameId: number;
+
+    const render = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      stars.forEach((star) => {
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
+        ctx.fill();
+
+        if (star.twinkleSpeed !== null) {
+          star.opacity =
+            0.5 +
+            Math.abs(Math.sin((Date.now() * 0.001) / star.twinkleSpeed) * 0.5);
+        }
+      });
+
+      animationFrameId = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [stars]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={cn("h-full w-full absolute inset-0", className)}
+    />
+  );
+};

src/components/welcome-section.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { ShootingStars } from "./ui/shooting-stars";
+import { SparklesCore } from "./ui/sparkles";
+import { StarsBackground } from "./ui/stars-background";
+
+const WelcomeSection = () => {
+  const { theme } = useTheme();
+  return (
+    <section className="h-screen w-full bg-background dark:bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
+      <h1
+        className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white 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"
+        />
+
+        {theme == "dark" && 
+          <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>
+        }
+
+        {theme === "dark" && (
+          /* Radial Gradient to prevent sharp edges */
+          <div className="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;