diff --git a/package-lock.json b/package-lock.json
index 8a7e8a6..2b44a8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
"name": "para",
"version": "0.1.0",
"dependencies": {
+ "gsap": "^3.12.5",
"next": "14.2.3",
+ "next-google-fonts": "^2.2.0",
"react": "^18",
"react-dom": "^18"
},
@@ -2249,6 +2251,11 @@
"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
"dev": true
},
+ "node_modules/gsap": {
+ "version": "3.12.5",
+ "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+ "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+ },
"node_modules/has-bigints": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -3112,6 +3119,17 @@
}
}
},
+ "node_modules/next-google-fonts": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/next-google-fonts/-/next-google-fonts-2.2.0.tgz",
+ "integrity": "sha512-TCtNp+uu0vof2X8Xfptfw96Unc3zsUekBY2l4g2mGAX+U8QO/yfAaEioGhFCwU05M8NbMgwP5C8V40Vtwp87iQ==",
+ "deprecated": "As of Next.js 10.2, Google Fonts are automatically optimized! For more info, see https://github.com/joe-bell/next-google-fonts",
+ "peerDependencies": {
+ "next": ">= 10.0.7",
+ "react": ">= 17.0.1",
+ "react-dom": ">= 17.0.1"
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 51e6002..f81ff97 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/app/components/Content.jsx b/src/app/components/Content.jsx
new file mode 100644
index 0000000..39c1d9e
--- /dev/null
+++ b/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({letters}
)
+ })
+ return body
+ }
+
+ const splitLetters = (word) => {
+ let letters = []
+ word.split("").forEach( (letter, i) => {
+ letters.push( {refs.current.push(el)}}>{letter})
+ })
+ return letters;
+ }
+
+ return (
+
+
+ {
+ splitWords(phrase)
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx
new file mode 100644
index 0000000..b1a11c1
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ {currthank === "شكراً" && "!"} {currthank}{" "}
+ {currthank != "شكراً" && "!"}
+
+
+
+
+
+
@{new Date().getFullYear()} mystory. all rights reserved.
+
+
+
A way to share stories anonymously.
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/app/components/fonts/Trap-Bold.otf b/src/app/components/fonts/Trap-Bold.otf
new file mode 100644
index 0000000..87f2446
Binary files /dev/null and b/src/app/components/fonts/Trap-Bold.otf differ
diff --git a/src/app/components/fonts/index.jsx b/src/app/components/fonts/index.jsx
new file mode 100644
index 0000000..e4428eb
--- /dev/null
+++ b/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",
+});
\ No newline at end of file
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..a4f4de8 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 875c01e..f787a38 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&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 {
diff --git a/src/app/layout.js b/src/app/layout.js
index 9aef1df..6462b57 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -1,12 +1,34 @@
-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 (
@@ -14,4 +36,4 @@ export default function RootLayout({ children }) {
{children}