first commit

package.json

@@ -9,14 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "gsap": "^3.12.5",
+    "next": "14.2.3",
+    "next-google-fonts": "^2.2.0",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }

src/app/components/Content.jsx

@@ -0,0 +1,60 @@
+'use client';
+import styles from '../page.module.css'
+import { useRef, useEffect } from 'react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import gsap from 'gsap';
+
+const phrase = "In Willowbrook, a boy named Ezra dreamed big. Despite humble beginnings, he devoured books, fueled by curiosity. With grit, he conquered obstacles, turning challenges into stepping stones. When opportunity came, he seized it, embarking on a journey to success. Against all odds, the small-town boy emerged triumphant, a beacon of determination and self-belief."
+
+export default function Cont() {
+
+  let refs = useRef([]);
+  const body = useRef(null);
+  const container = useRef(null);
+
+  useEffect( () => {
+    gsap.registerPlugin(ScrollTrigger);
+    createAnimation();
+  }, [])
+
+  const createAnimation = () => {
+      gsap.to(refs.current, {
+        scrollTrigger: {
+            trigger: container.current,
+            scrub: true,
+            start: `top`,
+            end: `+=${window.innerHeight / 2.5}`,
+        },
+        opacity: 1,
+        ease: "none",
+        stagger: 0.1
+    })
+  }
+
+  const splitWords = (phrase) => {
+    let body = [];
+    phrase.split(" ").forEach( (word, i) => {
+      const letters = splitLetters(word);
+      body.push(<p key={word + "_" + i}>{letters}</p>)
+    })
+    return body
+  }
+
+  const splitLetters = (word) => {
+    let letters = []
+    word.split("").forEach( (letter, i) => {
+      letters.push(<span key={letter + "_" + i} ref={el => {refs.current.push(el)}}>{letter}</span>)
+    })
+    return letters;
+  }
+
+  return (
+    <main ref={container} className={styles.main}>
+      <div ref={body} className={styles.body}>
+        {
+          splitWords(phrase)
+        }
+      </div>
+    </main>
+  )
+}

src/app/components/Footer.jsx

@@ -0,0 +1,54 @@
+import '../globals.css';
+import { trapBold } from './fonts';
+import { Open_Sans, Syne } from 'next/font/google';
+import React, { useEffect, useState } from 'react';
+
+const inter = Open_Sans({ subsets: ['latin'] })
+
+const thankyouList = [
+  "thank you",
+  "gracias",
+  "धन्यवाद",
+  "merci",
+  "danke",
+  "ありがとう",
+  "谢谢",
+  "Спасибо",
+  "شكراً",
+  "감사합니다",
+];
+
+export default function Footer() {
+  const [currthank, setCurrThank] = useState(thankyouList[0]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const currentIndex = thankyouList.indexOf(currthank);
+      const nextIndex = (currentIndex + 1) % thankyouList.length;
+      setCurrThank(thankyouList[nextIndex]);
+    }, 1500);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [currthank]);
+
+    return (
+        <>
+            <div className="bg-white h-64 flex justify-center items-center py-5 px-5 space-x-56 md:max-xl:space-x-20 mx-auto text-center">
+                <div className={`${inter.className} flex items-center justify-center gap-1 md:max-xl:ml-10 cursor-pointer`}>
+                    <p className={`text-slate-400 text-[2rem] font-bold md:w-[385px] md:text-[3rem]`}>
+                        {currthank === "شكراً" && "!"} {currthank}{" "}
+                        {currthank != "شكراً" && "!"}
+                    </p> 
+                </div>
+            </div>
+            <hr className="w-12 border-t-2 border-dashed border-slate-600 mx-auto" />
+            <div className="bg-white flex justify-center items-center py-5 px-5 space-x-56 md:max-xl:space-x-20 mx-auto text-center">
+                    <div className={`flex items-center justify-center gap-1 md:max-xl:ml-10 cursor-pointer`}>
+                        <p claName={`${inter.className}`}>@{new Date().getFullYear()} mystory. all rights reserved.</p>
+                    </div>
+            </div>
+        </>
+    );
+};

src/app/components/Header.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../globals.css';
+import { trapBold } from './fonts';
+
+export default function Header() {
+    return (
+        <>
+            <div className="flex justify-center items-center py-5 px-5 space-x-56 md:max-xl:space-x-20 mt-56">
+                <div className={`${trapBold.className} flex items-center justify-center gap-1 md:max-xl:ml-10 cursor-pointer`}>
+                    <h1 className={`text-slate-100 text-7xl font-bold`}>mystory</h1>
+                </div>
+            </div>
+            <div className={`flex justify-center items-center py-5 px-5 space-x-56 md:max-xl:space-x-20 lg:mb-80`}>
+                <h3 className={`bg-gray-100 rounded-3xl font-bold inline p-2 px-4 text-gray-800 text-sm md:lg:text-base`}>A way to share stories anonymously.</h3>
+            </div>
+        </>
+    );
+};

src/app/components/fonts/index.jsx

@@ -0,0 +1,6 @@
+import localFont from "next/font/local";
+
+export const trapBold = localFont({
+    src: "./Trap-Bold.otf",
+    display: "swap",
+});

src/app/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -17,13 +19,7 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: #191919;
 }
 
 @layer utilities {

src/app/layout.js

@@ -1,17 +1,39 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
+import './globals.css';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'mystory | share your stories anonymously',
+  description: 'a place to share stories anonymously and connect with like minded people.',
+  keywords: [
+    "Anonymous",
+  "Story Writing",
+  "Creative Writing",
+  "Anonymous Stories",
+  "Writing Community",
+  "Online Writing Platform",
+  "Narrative Writing",
+  "Anonymous Authorship",
+  "Story Sharing",
+  "Collaborative Writing",
+  "Creative Expression",
+  "Writing Prompt",
+  "User-generated Content",
+  "Community Stories",
+  "Anonymous Contributions",
+  "Narrative Community",
+  "Anonymous Feedback",
+  "Writing Forum",
+  "Anonymous Platform",
+  "Story Exchange",
+  ],
+}
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
   );
-}
+};