From e853a73ef2c5f8a016369b5ca438329ee5d40934 Mon Sep 17 00:00:00 2001 From: BFlat Date: Mon, 18 Nov 2024 23:04:14 +0700 Subject: [PATCH] board landing page (#66) * landing page * update * add redirect to /landing --------- Co-authored-by: Brandon Thomas --- _redirects | 3 +- index.html | 4 + package-lock.json | 13 ++- package.json | 1 + src/app/global.css | 86 +++++++++++++++++++ src/app/pages/landing/index.tsx | 101 +++++++++++++++++++++++ src/app/router.tsx | 5 ++ src/components/landing/FeatureCard.tsx | 63 ++++++++++++++ src/components/landing/Footer.tsx | 55 +++++++++++++ src/components/landing/Hero.tsx | 109 +++++++++++++++++++++++++ src/components/landing/Navbar.tsx | 30 +++++++ tailwind.config.js | 9 ++ yarn.lock | 7 ++ 13 files changed, 484 insertions(+), 2 deletions(-) create mode 100644 src/app/pages/landing/index.tsx create mode 100644 src/components/landing/FeatureCard.tsx create mode 100644 src/components/landing/Footer.tsx create mode 100644 src/components/landing/Hero.tsx create mode 100644 src/components/landing/Navbar.tsx diff --git a/_redirects b/_redirects index ccf3107059..11440a2b80 100644 --- a/_redirects +++ b/_redirects @@ -6,5 +6,6 @@ # are always processed first, followed by rules in the Netlify # configuration file. -/login /index.html 200! +/landing /index.html 200! +/login /index.html 200! /m_* /index.html 200! diff --git a/index.html b/index.html index 9e28a69324..46f7ac3c1d 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,10 @@ href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" /> + Board | Storyteller.AI diff --git a/package-lock.json b/package-lock.json index abaed8c393..741295fb38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "storyteller-board", "version": "0.0.0", "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", "@headlessui/react": "^2.1.3", "@preact/signals-react": "^2.2.0", "@techstark/opencv-js": "^4.10.0-release.1", @@ -571,7 +572,6 @@ "version": "6.6.0", "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.6.0/fontawesome-common-types-6.6.0.tgz", "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -590,6 +590,17 @@ "node": ">=6" } }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/6.6.0/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@fortawesome/pro-solid-svg-icons": { "version": "6.6.0", "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.6.0/pro-solid-svg-icons-6.6.0.tgz", diff --git a/package.json b/package.json index 36d411dff2..0d96e2485c 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/free-brands-svg-icons": "^6.6.0", "@headlessui/react": "^2.1.3", "@preact/signals-react": "^2.2.0", "@techstark/opencv-js": "^4.10.0-release.1", diff --git a/src/app/global.css b/src/app/global.css index a38c1fc398..8babe1794a 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -44,3 +44,89 @@ @apply border-0 px-2 py-1 outline-none -outline-offset-2 focus:outline-primary-500 focus:ring-0; } } + +@layer components { + .gradient-blur { + @apply pointer-events-none absolute rounded-full opacity-30 blur-[100px]; + z-index: 0; + } + + .dotted-pattern { + background-image: radial-gradient( + circle at 1px 1px, + rgb(0 0 0 / 0.25) 1px, + transparent 0 + ); + background-size: 32px 32px; + } + + .gradient-text { + @apply animate-gradient bg-clip-text text-transparent; + -webkit-background-clip: text; + background-image: linear-gradient( + to right, + #e66462, + #1cb6be, + #4e00c2, + #e66462 + ); + background-size: 300% auto; + } +} + +/* Custom animations */ +@keyframes float { + 0%, + 100% { + transform: translateY(0) rotate(0); + } + 50% { + transform: translateY(-20px) rotate(2deg); + } +} + +@keyframes float-delayed { + 0%, + 100% { + transform: translateY(0) rotate(0); + } + 50% { + transform: translateY(-20px) rotate(-2deg); + } +} + +@keyframes float-slow { + 0%, + 100% { + transform: translateY(0) scale(1); + } + 50% { + transform: translateY(-10px) scale(1.05); + } +} + +.animate-float { + animation: float 8s ease-in-out infinite; +} + +.animate-float-delayed { + animation: float-delayed 9s ease-in-out infinite 1s; +} + +.animate-float-slow { + animation: float-slow 10s ease-in-out infinite 2s; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 100% { + background-position: 300% 50%; + } +} + +.animate-gradient { + animation: gradient 4s linear infinite; + background-size: 300% auto; +} diff --git a/src/app/pages/landing/index.tsx b/src/app/pages/landing/index.tsx new file mode 100644 index 0000000000..c2f32172b3 --- /dev/null +++ b/src/app/pages/landing/index.tsx @@ -0,0 +1,101 @@ +import Navbar from "../../../components/landing/Navbar"; +import Hero from "../../../components/landing/Hero"; +import FeatureCard from "../../../components/landing/FeatureCard"; +import Footer from "../../../components/landing/Footer"; + +const Landing = () => { + const features = [ + { + title: "Step 1: Compose Your Scene", + description: + "Begin your story on our intuitive canvas. Drop and arrange photos and videos to create layered scenes. Position, scale, and transform elements with precision to build your perfect composition. Our dynamic canvas makes it easy to bring your vision to life.", + image: "", + gradient: "bg-gradient-to-br from-purple-500/20 to-blue-500/20", + }, + { + title: "Step 2: Smart Segmentation", + description: + "Clean up your scenes with powerful AI segmentation. Remove green screens instantly, isolate subjects from any background, and perfect your layer masks with intelligent tools. Create professional-quality compositions with just a few clicks.", + image: "", + gradient: "bg-gradient-to-br from-emerald-500/20 to-cyan-500/20", + }, + { + title: "Step 3: AI Style Transfer", + description: + "Transform your composition with AI style transfer magic. Choose from our curated collection of artistic styles - from classic art to modern aesthetics. Apply consistent styling across your entire scene to create a cohesive visual masterpiece.", + image: "", + gradient: "bg-gradient-to-br from-rose-500/20 to-orange-500/20", + }, + { + title: "Final Step: Render Your Movie", + description: + "Watch your story come to life as we render your styled composition into a stunning final movie. Export in high quality, ready to share with the world. From concept to final cut - create professional-looking videos in minutes, not hours.", + image: "", + gradient: "bg-gradient-to-br from-blue-500/20 to-indigo-500/20", + }, + ]; + + return ( +
+ + +
+ + +
+ {/* Decorative elements */} +
+ +
+ {/* Section header with enhanced styling */} +
+
+ + AI-POWERED WORKFLOW + +
+

+ Create Stunning Videos in + + + {" "} + Four Simple Steps + + + +

+

+ From composition to final render, transform your media into + cinematic stories with our powerful AI-enhanced workflow. +

+
+ + {/* Features stack with enhanced visual separation */} +
+ {/* Vertical timeline line */} +
+ + {features.map((feature, index) => ( +
+ {/* Step number bubble */} +
+
+ + {index + 1} + +
+
+ +
+ ))} +
+
+
+
+ +
+
+ ); +}; + +export default Landing; diff --git a/src/app/router.tsx b/src/app/router.tsx index bbdc53d12b..4e1220e992 100644 --- a/src/app/router.tsx +++ b/src/app/router.tsx @@ -1,6 +1,7 @@ import { createBrowserRouter } from "react-router-dom"; import { Login } from "~/app/pages/login"; import { Main } from "~/app/pages/main"; +import Landing from "~/app/pages/landing"; // import { Sandbox } from "~/app/pages/sandbox"; export const router = createBrowserRouter([ @@ -20,4 +21,8 @@ export const router = createBrowserRouter([ // path: "/sandbox", // element: , // }, + { + path: "/landing", + element: , + }, ]); diff --git a/src/components/landing/FeatureCard.tsx b/src/components/landing/FeatureCard.tsx new file mode 100644 index 0000000000..264aaef512 --- /dev/null +++ b/src/components/landing/FeatureCard.tsx @@ -0,0 +1,63 @@ +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +interface FeatureCardProps { + title: string; + description: string; + image: string; + gradient: string; + isReversed?: boolean; +} + +const FeatureCard = ({ + title, + description, + image, + gradient, + isReversed, +}: FeatureCardProps) => { + return ( +
+ {/* Image Section */} +
+
+
+
+ {title} +
+
+
+
+ + {/* Content Section */} +
+

+ {title} +

+

{description}

+ +
+
+ ); +}; + +export default FeatureCard; diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx new file mode 100644 index 0000000000..1d166c190d --- /dev/null +++ b/src/components/landing/Footer.tsx @@ -0,0 +1,55 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTwitter, faDiscord } from "@fortawesome/free-brands-svg-icons"; +import { Button } from "../ui"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; + +const Footer = () => { + const currentYear = new Date().getFullYear(); + + return ( +
+
+
+ Storyteller Board + + + + + +
+

© {currentYear} Storyteller AI. All rights reserved.

+
+
+
+
+ ); +}; + +export default Footer; diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx new file mode 100644 index 0000000000..38bc38fc56 --- /dev/null +++ b/src/components/landing/Hero.tsx @@ -0,0 +1,109 @@ +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Button } from "../ui"; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; + +const Hero = () => { + return ( +
+
+
+ {/* Creative beta badge */} +
+
+ +
+ + Join our Creators Community + + +
+ + {/* Dynamic heading */} +

+ {/* + Compose. + {" "} */} + + Storyteller + {" "} + + Board + +

+ + {/* Interactive feature pills */} +
+ {[ + { text: "Canvas Compositing", icon: "🎬" }, + { text: "Smart Segmentation", icon: "✂️" }, + { text: "AI Stylization", icon: "🎨" }, + ].map(({ text, icon }) => ( +
+ + {icon} + + + {text} + +
+ ))} +
+ + {/* Creative description */} +

+ Create stunning visual stories on our intelligent canvas. + + {" "} + Compose scenes, remove backgrounds, apply AI styles + {" "} + and render beautiful movies in minutes. +

+ + {/* Playful CTA */} +
+ +
+ + {/* Video showcase */} +
+
+ +
+
+
+
+
+ ); +}; + +export default Hero; diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx new file mode 100644 index 0000000000..2d5a394ee1 --- /dev/null +++ b/src/components/landing/Navbar.tsx @@ -0,0 +1,30 @@ +import { Button } from "../ui"; + +const Navbar = () => { + return ( + + ); +}; + +export default Navbar; diff --git a/tailwind.config.js b/tailwind.config.js index 1fa9fd1805..3e9011fdc0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,15 @@ export default { fontFamily: { sans: ["'Source Sans 3'", ...defaultTheme.fontFamily.sans], }, + fontSize: { + "7xl": "5rem", + }, + boxShadow: { + soft: "0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)", + }, + animation: { + bounce: "bounce 2s infinite", + }, }, colors: { // color value shorthands diff --git a/yarn.lock b/yarn.lock index 86ba5c7f91..473817bb21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -321,6 +321,13 @@ dependencies: "@fortawesome/fontawesome-common-types" "6.6.0" +"@fortawesome/free-brands-svg-icons@^6.6.0": + version "6.6.0" + resolved "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/6.6.0/free-brands-svg-icons-6.6.0.tgz" + integrity sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ== + dependencies: + "@fortawesome/fontawesome-common-types" "6.6.0" + "@fortawesome/pro-solid-svg-icons@^6.6.0": version "6.6.0" resolved "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.6.0/pro-solid-svg-icons-6.6.0.tgz"