Spaces:

florinbobis
/

atom-landing

Runtime error

App Files Files Community

Florin Bobiș commited on Sep 21, 2024

Commit

6a37227

•

1 Parent(s): f3d88e5

cool landing

Browse files

Files changed (7) hide show

package-lock.json +26 -0
package.json +1 -0
public/screenshot.jpg +0 -0
src/app/layout.tsx +14 -11
src/app/page.tsx +34 -189
src/components/header.tsx +1 -1
src/components/ui/container-scroll-animation.tsx +95 -0

package-lock.json CHANGED Viewed

@@ -17,6 +17,7 @@
         "@tsparticles/slim": "^3.5.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.445.0",
         "next": "14.2.13",
         "next-themes": "^0.3.0",
@@ -3334,6 +3335,31 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

         "@tsparticles/slim": "^3.5.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.5.6",
         "lucide-react": "^0.445.0",
         "next": "14.2.13",
         "next-themes": "^0.3.0",
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.5.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz",
+      "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json CHANGED Viewed

@@ -18,6 +18,7 @@
     "@tsparticles/slim": "^3.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.445.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",

     "@tsparticles/slim": "^3.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.5.6",
     "lucide-react": "^0.445.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",

public/screenshot.jpg ADDED Viewed

src/app/layout.tsx CHANGED Viewed

@@ -1,11 +1,17 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
 });
 export const metadata: Metadata = {
@@ -20,13 +26,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.variable} min-h-screen font-sans antialiased`}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          storageKey="theme"
-        >
           {children}
         </ThemeProvider>
       </body>

 import type { Metadata } from "next";
+import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
 });
 export const metadata: Metadata = {
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} min-h-screen antialiased`}
+      >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="theme">
           {children}
         </ThemeProvider>
       </body>

src/app/page.tsx CHANGED Viewed

@@ -1,15 +1,17 @@
 import Footer from "@/components/footer";
 import Header from "@/components/header";
 import { SparklesCore } from "@/components/ui/sparkles";
 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 gap-4 md:gap-8 md:p-10">
-        <div className="h-[40rem] 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">
-            Aceternity
           </h1>
           <div className="w-[40rem] h-40 relative">
             {/* Gradients */}
@@ -28,196 +30,39 @@ export default function Home() {
               particleColor="#FFFFFF"
             />
             {/* 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>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde id
-          obcaecati minus explicabo, corporis delectus. Debitis ipsam
-          praesentium nam! Vero!
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
-          Voluptatibus, temporibus mollitia. Eaque, magni tempore aliquam odit
-          libero expedita maxime unde obcaecati doloremque eveniet, rerum
-          laboriosam illum fugiat quas et vitae quo veritatis tempora. Officiis
-          non eaque pariatur ducimus nisi temporibus labore? Eum temporibus
-          officiis expedita. Eaque, explicabo numquam. Consequuntur nihil
-          eligendi libero asperiores! Rem, delectus cum molestiae eveniet harum
-          magni!
-        </p>
-        <p>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
-          blanditiis atque sint totam consequatur! Consectetur illo quas rem
-          iure enim totam ex quisquam libero dolorem, commodi voluptatem odit
-          mollitia repellendus similique nulla dicta maiores, amet, quia quod
-          molestias! In officia ut exercitationem! Ut, maiores. Consequuntur
-          eligendi exercitationem laudantium placeat fuga qui, aliquid quod amet
-          facilis vel voluptatem quis maiores minima ut, harum corrupti
-          consectetur rem laborum earum? Laudantium, eaque. Laudantium iste,
-          cumque animi repellat enim voluptatibus quasi quas facilis atque.
-          Sapiente molestiae praesentium fuga illum, numquam id, vero
-          consequuntur, aut molestias magni veritatis dolores aperiam
-          reprehenderit reiciendis. Sunt saepe tempora, reiciendis quaerat
-          accusantium cumque recusandae quisquam numquam expedita iste, veniam
-          ullam ea sequi. Aliquam a rem facilis soluta sint nesciunt.
-        </p>
       </main>
       <Footer />
     </div>

 import Footer from "@/components/footer";
 import Header from "@/components/header";
+import { ContainerScroll } from "@/components/ui/container-scroll-animation";
 import { SparklesCore } from "@/components/ui/sparkles";
+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">
+        <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 */}
               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">
+          <ContainerScroll
+            titleComponent={
+              <>
+                <h1 className="text-4xl font-semibold text-black dark:text-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>
+        </div>
       </main>
       <Footer />
     </div>

src/components/header.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { Button } from "./ui/button";
 const Header = () => {
   return (
-    <header className="sticky top-0 flex h-16 items-center gap-4 bg-background/30 backdrop-blur px-4 md:px-6">
       <Navbar />
       <Sidebar />
       <div className="flex w-full md:w-auto justify-end gap-4 md:ml-auto md:gap-2 lg:gap-4">

 const Header = () => {
   return (
+    <header className="sticky top-0 flex h-16 items-center gap-4 bg-background/30 backdrop-blur px-4 md:px-6 z-30">
       <Navbar />
       <Sidebar />
       <div className="flex w-full md:w-auto justify-end gap-4 md:ml-auto md:gap-2 lg:gap-4">

src/components/ui/container-scroll-animation.tsx ADDED Viewed

	@@ -0,0 +1,95 @@

+"use client";
+import React, { useRef } from "react";
+import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
+export const ContainerScroll = ({
+  titleComponent,
+  children,
+}: {
+  titleComponent: string | React.ReactNode;
+  children: React.ReactNode;
+}) => {
+  const containerRef = useRef<any>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+  const scaleDimensions = () => {
+    return isMobile ? [0.7, 0.9] : [1.05, 1];
+  };
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
+  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
+  return (
+    <div
+      className="h-[60rem] md:h-[80rem] flex items-center justify-center relative p-2 md:p-20"
+      ref={containerRef}
+    >
+      <div
+        className="py-10 md:py-40 w-full relative"
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <Header translate={translate} titleComponent={titleComponent} />
+        <Card rotate={rotate} translate={translate} scale={scale}>
+          {children}
+        </Card>
+      </div>
+    </div>
+  );
+};
+export const Header = ({ translate, titleComponent }: any) => {
+  return (
+    <motion.div
+      style={{
+        translateY: translate,
+      }}
+      className="div max-w-5xl mx-auto text-center"
+    >
+      {titleComponent}
+    </motion.div>
+  );
+};
+export const Card = ({
+  rotate,
+  scale,
+  children,
+}: {
+  rotate: MotionValue<number>;
+  scale: MotionValue<number>;
+  translate: MotionValue<number>;
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        rotateX: rotate,
+        scale,
+        boxShadow:
+          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
+      }}
+      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
+    >
+      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+        {children}
+      </div>
+    </motion.div>
+  );
+};