prd template welcome landing page

CLAUDE.md

@@ -0,0 +1,10 @@
+# CLAUDE.md
+
+## Package Manager
+
+Always use `pnpm` — never `npm` or `yarn`. This is a pnpm workspace project.
+
+- Install dependencies: `pnpm install`
+- Run scripts: `pnpm run <script>` or `pnpm <script>`
+- Build Gatsby site: `pnpm --filter LaunchWare build`
+- Dev server: `pnpm --filter LaunchWare develop`

apps/gatsby/src/components/launch-well/Resources.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+
+import { faFileLines, faFileCode } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+import "./css/resources.css"
+
+export const Resources = () => {
+  return (
+    <div className="resources">
+      <div className="resources__contents">
+        <h2 className="resources__heading">Your Resources</h2>
+
+        <div className="resources__video-container">
+          <div className="resources__video-wrapper">
+            <iframe
+              src="https://www.youtube-nocookie.com/embed/5aX6VcNmlqE"
+              title="PRD Template Walkthrough"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            />
+          </div>
+        </div>
+
+        <div className="resources__links">
+          <a
+            href="https://docs.google.com/document/d/1G3pcPItASgjKZIJSHUWSUKAWwMcuK23Q11Y1Yvjrtio/edit?usp=sharing"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="resources__link-card"
+          >
+            <span className="resources__link-icon">
+              <FontAwesomeIcon icon={faFileLines} />
+            </span>
+            <span className="resources__link-text">
+              <span className="resources__link-title">Google Doc Template</span>
+              <span className="resources__link-description">
+                Make a copy and start filling it out today
+              </span>
+            </span>
+          </a>
+
+          <a href="/prd-template.md" download className="resources__link-card">
+            <span className="resources__link-icon">
+              <FontAwesomeIcon icon={faFileCode} />
+            </span>
+            <span className="resources__link-text">
+              <span className="resources__link-title">Markdown Template</span>
+              <span className="resources__link-description">
+                Download for teams working in GitHub or code repos
+              </span>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/gatsby/src/components/launch-well/WelcomeCta.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import { useBookCallModal } from "../book-call/hooks/useBookCallModal"
+
+import "./css/welcome-cta.css"
+
+export const WelcomeCta = () => {
+  const { modal, clickHandler } = useBookCallModal()
+
+  return (
+    <div className="welcome-cta">
+      {modal}
+      <div className="welcome-cta__contents">
+        <h2 className="welcome-cta__heading">Ready to Bring Your Product to Life?</h2>
+        <p className="welcome-cta__text">
+          Need help writing the PRD, or ready to build? Either way, let's talk.
+        </p>
+        <button className="welcome-cta__button button" type="button" onClick={clickHandler}>
+          Book My Launch Call
+        </button>
+      </div>
+    </div>
+  )
+}

apps/gatsby/src/components/launch-well/WelcomeHero.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+import "./css/welcome-hero.css"
+
+export const WelcomeHero = () => {
+  return (
+    <div className="welcome-hero">
+      <div className="welcome-hero__contents">
+        <h1 className="welcome-hero__heading">Welcome to Launch Well</h1>
+        <p className="welcome-hero__subheading">
+          Thanks for subscribing. Here's your PRD template and everything you need to start using it
+          today.
+        </p>
+      </div>
+    </div>
+  )
+}

apps/gatsby/src/components/launch-well/WhyPrd.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+import "./css/why-prd.css"
+
+export const WhyPrd = () => {
+  return (
+    <div className="why-prd">
+      <div className="why-prd__contents">
+        <h2 className="why-prd__heading">Why You Need a PRD</h2>
+        <p className="why-prd__text">
+          Most software projects don't fail because of bad code. They fail because there wasn't
+          shared aggreement on what to build before the building started. Scope creeps, launches
+          slip, and teams end up rebuilding features that should have been right the first time.
+        </p>
+        <p className="why-prd__text">
+          A good Product Requirements Document (PRD) fixes that. it ensures you, your dev team, and
+          your designers are working from the same blueprint before development begins. Not because
+          process is fun, but because <strong>clarity is cheap and rework is expensive</strong>.
+        </p>
+        <p className="why-prd__text">
+          This template is what we actually use with clients. It's structured enough to be useful
+          and short enough that you'll finish it.
+        </p>
+        <p className="why-prd__text">
+          <strong>What you'll get:</strong>
+        </p>
+        <ul className="why-prd__list">
+          <li>A walkthrough video so you know how to use it</li>
+          <li>A ready-to-use Google Doc you can copy and fill out today</li>
+          <li>A Markdown version for teams working in GitHub or code repos</li>
+        </ul>
+      </div>
+    </div>
+  )
+}

apps/gatsby/src/components/launch-well/css/resources.css

@@ -0,0 +1,53 @@
+@reference "../../../css/index.css";
+
+.resources {
+  @apply parent-section;
+  @apply bg-white;
+}
+
+.resources__contents {
+  @apply contents-container;
+  @apply flex-col max-w-4xl;
+}
+
+.resources__heading {
+  @apply text-4xl mb-10 text-center w-full;
+}
+
+.resources__video-container {
+  @apply w-full mb-12;
+}
+
+.resources__video-wrapper {
+  @apply relative w-full overflow-hidden rounded-xl shadow-lg;
+  padding-bottom: 56.25%;
+}
+
+.resources__video-wrapper iframe {
+  @apply absolute top-0 left-0 w-full h-full;
+}
+
+.resources__links {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6 w-full;
+}
+
+.resources__link-card {
+  @apply flex items-start gap-4 p-6 rounded-xl border border-launch-black-10 shadow-sm;
+  @apply hover:shadow-md hover:border-launch-orange transition-all duration-200;
+}
+
+.resources__link-icon {
+  @apply text-launch-orange text-2xl flex-shrink-0 mt-1;
+}
+
+.resources__link-text {
+  @apply flex flex-col;
+}
+
+.resources__link-title {
+  @apply font-bold text-lg text-launch-black;
+}
+
+.resources__link-description {
+  @apply text-launch-black-70 text-sm mt-1;
+}

apps/gatsby/src/components/launch-well/css/welcome-cta.css

@@ -0,0 +1,23 @@
+@reference "../../../css/index.css";
+
+.welcome-cta {
+  @apply parent-section;
+  @apply bg-launch-neutral-20;
+}
+
+.welcome-cta__contents {
+  @apply contents-container;
+  @apply flex-col items-center text-center max-w-2xl;
+}
+
+.welcome-cta__heading {
+  @apply text-4xl mb-4;
+}
+
+.welcome-cta__text {
+  @apply text-launch-black-70 text-lg mb-8;
+}
+
+.welcome-cta__button[type="button"] {
+  @apply text-lg px-8 py-3;
+}

apps/gatsby/src/components/launch-well/css/welcome-hero.css

@@ -0,0 +1,19 @@
+@reference "../../../css/index.css";
+
+.welcome-hero {
+  @apply parent-section;
+  @apply bg-white relative z-30;
+}
+
+.welcome-hero__contents {
+  @apply contents-container;
+  @apply flex-col text-center items-center;
+}
+
+.welcome-hero__heading {
+  @apply text-5xl mb-4;
+}
+
+.welcome-hero__subheading {
+  @apply text-lg text-launch-black-70 max-w-2xl;
+}

apps/gatsby/src/components/launch-well/css/why-prd.css

@@ -0,0 +1,27 @@
+@reference "../../../css/index.css";
+
+.why-prd {
+  @apply parent-section;
+  @apply bg-launch-neutral-20;
+}
+
+.why-prd__contents {
+  @apply contents-container;
+  @apply flex-col max-w-3xl;
+}
+
+.why-prd__heading {
+  @apply text-4xl mb-6 text-center;
+}
+
+.why-prd__text {
+  @apply text-launch-black-80 text-lg leading-relaxed mb-4;
+}
+
+.why-prd__list {
+  @apply list-disc list-inside text-launch-black-80 text-lg leading-relaxed space-y-2 mt-2;
+}
+
+.why-prd__list-label {
+  @apply font-bold text-launch-black;
+}