board landing page (#66)

* landing page

* update

* add redirect to /landing

---------

Co-authored-by: Brandon Thomas <echelon@gmail.com>

_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!

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"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Syne:wght@600&display=swap"
+      rel="stylesheet"
+    />
     <title>Board | Storyteller.AI</title>
   </head>
 

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",

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",

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;
+}

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 (
+    <div className="min-h-screen bg-white">
+      <Navbar />
+
+      <div>
+        <Hero />
+
+        <section className="relative overflow-hidden py-32">
+          {/* Decorative elements */}
+          <div className="dotted-pattern absolute inset-0 opacity-50" />
+
+          <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            {/* Section header with enhanced styling */}
+            <div className="mx-auto mb-24 max-w-3xl text-center">
+              <div className="mb-6 inline-flex items-center rounded-full bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-purple-500/10 px-8 py-2.5">
+                <span className="whitespace-nowrap bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 bg-clip-text text-sm font-semibold text-transparent">
+                  AI-POWERED WORKFLOW
+                </span>
+              </div>
+              <h2 className="mb-6 text-4xl font-bold tracking-tight text-gray-900">
+                Create Stunning Videos in
+                <span className="relative">
+                  <span className="gradient-text relative z-10">
+                    {" "}
+                    Four Simple Steps
+                  </span>
+                  <span className="bg-rose-200/50 absolute -bottom-2 left-0 z-0 h-3 w-full" />
+                </span>
+              </h2>
+              <p className="text-xl leading-relaxed text-gray-600">
+                From composition to final render, transform your media into
+                cinematic stories with our powerful AI-enhanced workflow.
+              </p>
+            </div>
+
+            {/* Features stack with enhanced visual separation */}
+            <div className="relative space-y-32">
+              {/* Vertical timeline line */}
+              <div className="to-rose-500/20 absolute left-1/2 top-0 h-full w-px bg-gradient-to-b from-purple-500/20 via-blue-500/20" />
+
+              {features.map((feature, index) => (
+                <div key={index} className="relative">
+                  {/* Step number bubble */}
+                  <div className="absolute left-1/2 -translate-x-1/2 -translate-y-16">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-full border bg-white shadow-lg">
+                      <span className="bg-gradient-to-br from-purple-600 to-purple-600 bg-clip-text text-xl font-bold text-transparent">
+                        {index + 1}
+                      </span>
+                    </div>
+                  </div>
+                  <FeatureCard {...feature} isReversed={index % 2 === 1} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Landing;

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: <Sandbox />,
   // },
+  {
+    path: "/landing",
+    element: <Landing />,
+  },
 ]);

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 (
+    <div
+      className={`flex flex-col items-center gap-12 lg:flex-row ${isReversed ? "lg:flex-row-reverse" : ""}`}
+    >
+      {/* Image Section */}
+      <div className="group relative w-full lg:w-3/5">
+        <div
+          className={`absolute inset-0 ${gradient} opacity-40 blur-2xl transition-opacity duration-500 group-hover:opacity-60`}
+        />
+        <div className="relative rounded-3xl border border-gray-100 bg-white/50 p-2 backdrop-blur-sm">
+          <div className="relative aspect-[4/3] overflow-hidden rounded-2xl">
+            <img
+              src={image}
+              alt={title}
+              className="h-full w-full transform object-cover transition-transform duration-700 group-hover:scale-105"
+            />
+            <div className="absolute inset-0 bg-black/10" />
+          </div>
+        </div>
+      </div>
+
+      {/* Content Section */}
+      <div className="w-full space-y-6 lg:w-2/5">
+        <h3 className="text-3xl font-bold tracking-tight text-gray-900">
+          {title}
+        </h3>
+        <p className="text-lg leading-relaxed text-gray-600">{description}</p>
+        <div className="flex flex-wrap gap-3">
+          <a
+            href="/create"
+            className="group inline-flex items-center !text-primary-500 transition-colors hover:!text-primary-600"
+          >
+            Start Creating Now
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureCard;

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 (
+    <footer className="border-t border-gray-100 bg-gray-50">
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center space-y-10 text-center">
+          <img
+            src="/brand/Storyteller-Logo-Black.png"
+            alt="Storyteller Board"
+            className="h-9"
+          />
+
+          <Button className="group rounded-xl px-8 py-4 text-lg">
+            <span className="relative flex items-center">
+              Start Creating for Free
+              <FontAwesomeIcon
+                icon={faArrowRight}
+                className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
+              />
+            </span>
+          </Button>
+
+          <div className="flex justify-center space-x-8">
+            <a
+              href="#"
+              className="!text-gray-500 transition-colors hover:!text-gray-600"
+            >
+              <FontAwesomeIcon icon={faTwitter} className="h-6 w-6" />
+              <span className="sr-only">Twitter</span>
+            </a>
+            <a
+              href="#"
+              className="!text-gray-500 transition-colors hover:!text-gray-600"
+            >
+              <FontAwesomeIcon icon={faDiscord} className="h-6 w-6" />
+              <span className="sr-only">Discord</span>
+            </a>
+          </div>
+
+          <div className="text-sm font-medium text-gray-500">
+            <p>© {currentYear} Storyteller AI. All rights reserved.</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

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 (
+    <div className="dotted-pattern relative min-h-screen overflow-hidden">
+      <div className="relative z-10 mx-auto max-w-7xl px-4 pb-16 pt-32 sm:px-6 lg:px-8">
+        <div className="text-center">
+          {/* Creative beta badge */}
+          <div className="group mb-12 inline-flex cursor-pointer items-center rounded-full bg-black/5 px-6 py-2 backdrop-blur-sm transition-colors hover:bg-black/10">
+            <div className="animate-pulse">
+              <FontAwesomeIcon
+                icon={faDiscord}
+                className="text-rose-500 mr-2 h-4 w-4"
+              />
+            </div>
+            <span className="bg-clip-text text-sm font-medium">
+              Join our Creators Community
+            </span>
+            <FontAwesomeIcon
+              icon={faArrowRight}
+              className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1"
+            />
+          </div>
+
+          {/* Dynamic heading */}
+          <h1 className="mb-8 text-6xl font-bold tracking-tight sm:text-7xl">
+            {/* <span className="inline-block transform cursor-default transition-transform hover:scale-105">
+              Compose.
+            </span>{" "} */}
+            <span className="inline-block transform cursor-default transition-transform hover:-rotate-3">
+              Storyteller
+            </span>{" "}
+            <span className="relative inline-block">
+              <span className="gradient-text">Board</span>
+            </span>
+          </h1>
+
+          {/* Interactive feature pills */}
+          <div className="mb-12 flex flex-wrap justify-center gap-4">
+            {[
+              { text: "Canvas Compositing", icon: "🎬" },
+              { text: "Smart Segmentation", icon: "✂️" },
+              { text: "AI Stylization", icon: "🎨" },
+            ].map(({ text, icon }) => (
+              <div
+                key={text}
+                className="group flex transform cursor-pointer items-center space-x-2 rounded-full bg-gray-100/50 px-5 py-2 backdrop-blur-sm transition-all hover:scale-105"
+              >
+                <span className="text-lg group-hover:animate-bounce">
+                  {icon}
+                </span>
+                <span className="text-sm font-medium text-gray-800">
+                  {text}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Creative description */}
+          <p className="mx-auto mb-12 max-w-2xl text-xl leading-relaxed text-gray-600">
+            Create stunning visual stories on our intelligent canvas.
+            <span className="font-semibold text-gray-800">
+              {" "}
+              Compose scenes, remove backgrounds, apply AI styles
+            </span>{" "}
+            and render beautiful movies in minutes.
+          </p>
+
+          {/* Playful CTA */}
+          <div className="mb-20 flex flex-col items-center justify-center gap-6 sm:flex-row">
+            <Button className="group relative overflow-hidden rounded-xl px-8 py-4 text-lg text-white">
+              <div className="from-rose-500 absolute inset-0 bg-gradient-to-r via-purple-500 to-blue-500 opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+              <span className="relative flex items-center">
+                Start Creating
+                <FontAwesomeIcon
+                  icon={faArrowRight}
+                  className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
+                />
+              </span>
+            </Button>
+          </div>
+
+          {/* Video showcase */}
+          <div className="group relative mx-auto max-w-5xl">
+            <div className="relative overflow-hidden rounded-2xl bg-black/10 shadow-2xl">
+              <video
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="h-full w-full object-cover"
+              >
+                <source
+                  src="https://cdn.coverr.co/videos/coverr-typing-on-computer-2401/1080p.mp4"
+                  type="video/mp4"
+                />
+              </video>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/components/landing/Navbar.tsx

@@ -0,0 +1,30 @@
+import { Button } from "../ui";
+
+const Navbar = () => {
+  return (
+    <nav className="fixed top-0 z-50 w-full border-b border-gray-100 bg-white/80 backdrop-blur-md">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-20 items-center justify-between">
+          <div className="flex items-center">
+            <img
+              src="/brand/Storyteller-Logo-Black.png"
+              alt="Storyteller Board"
+              className="h-9"
+            />
+          </div>
+          <div className="flex items-center space-x-5">
+            <a
+              href="/login"
+              className="font-medium !text-gray-600 hover:!text-gray-900"
+            >
+              Login
+            </a>
+            <Button className="btn btn-primary">Sign Up</Button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

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

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"