feat: roadmap page and move all open-graph images to /open-graph folder

2 files changed, 249 insertions, 2 deletions

diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
index 6db26811..47f0020b 100644
--- a/apps/web/src/app/metadata.ts
+++ b/apps/web/src/app/metadata.ts
@@ -3,8 +3,8 @@ import { Metadata } from "next";
 const title = "OpenCut";
 const description =
   "A simple but powerful video editor that gets the job done. In your browser.";
-const openGraphImageUrl = "https://opencut.app/opengraph-image.jpg";
-const twitterImageUrl = "/opengraph-image.jpg";
+const openGraphImageUrl = "https://opencut.app/open-graph/default.jpg";
+const twitterImageUrl = "/open-graph/default.jpg";
 
 export const baseMetaData: Metadata = {
   metadataBase: new URL("https://opencut.app"),
diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
new file mode 100644
index 00000000..6b10db47
--- /dev/null
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -0,0 +1,247 @@
+import { Metadata } from "next";

+import { Badge } from "@/components/ui/badge";

+import { GithubIcon } from "@/components/icons";

+import Link from "next/link";

+import { Footer } from "@/components/footer";

+import { Header } from "@/components/header";

+import ReactMarkdown from "react-markdown";

+import { cn } from "@/lib/utils";

+

+const roadmapItems: {

+  title: string;

+  description: string;

+  status: {

+    text: string;

+    type: "complete" | "pending" | "default" | "info";

+  };

+}[] = [

+  {

+    title: "Start",

+    description:

+      "This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.",

+    status: {

+      text: "Completed",

+      type: "complete",

+    },

+  },

+  {

+    title: "Core UI",

+    description:

+      "Built the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.",

+    status: {

+      text: "Completed",

+      type: "complete",

+    },

+  },

+  {

+    title: "Basic Functionality",

+    description:

+      "The heart of any video editor. Timeline zoom in/out, making clips longer/shorter, dragging elements around, selection, playhead scrubbing. **This part has to be fucking perfect** because it's what users interact with 99% of the time.",

+    status: {

+      text: "In Progress",

+      type: "pending",

+    },

+  },

+  {

+    title: "Export/Preview Logic",

+    description:

+      "The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.",

+    status: {

+      text: "In Progress",

+      type: "pending",

+    },

+  },

+  {

+    title: "Text",

+    description:

+      "After media, text is the next most important thing. Font selection with custom font imports, text stroke, colors. All the text essential text properties.",

+    status: {

+      text: "Not Started",

+      type: "default",

+    },

+  },

+  {

+    title: "Effects",

+    description:

+      "Adding visual effects to both text and media. Blur, brightness, contrast, saturation, filters, and all the creative tools that make videos pop. This is where the magic happens.",

+    status: {

+      text: "Not Started",

+      type: "default",

+    },

+  },

+  {

+    title: "Transitions",

+    description:

+      "Smooth transitions between clips. Fade in/out, slide, zoom, dissolve, and custom transition effects.",

+    status: {

+      text: "Not Started",

+      type: "default",

+    },

+  },

+  {

+    title: "Refine from Here",

+    description:

+      "Once we nail the above, we have a **solid foundation** to build anything. Advanced features, performance optimizations, mobile support, desktop app.",

+    status: {

+      text: "Future",

+      type: "info",

+    },

+  },

+];

+

+export const metadata: Metadata = {

+  title: "Roadmap - OpenCut",

+  description:

+    "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",

+  openGraph: {

+    title: "OpenCut Roadmap - What's Coming Next",

+    description:

+      "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",

+    type: "website",

+    images: [

+      {

+        url: "/open-graph/roadmap.jpg",

+        width: 1200,

+        height: 630,

+        alt: "OpenCut Roadmap",

+      },

+    ],

+  },

+  twitter: {

+    card: "summary_large_image",

+    title: "OpenCut Roadmap - What's Coming Next",

+    description:

+      "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",

+    images: ["/open-graph/roadmap.jpg"],

+  },

+};

+

+export default function RoadmapPage() {

+  return (

+    <div className="min-h-screen bg-background">

+      <Header />

+      <main className="relative">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-4xl mx-auto">

+            <div className="text-center mb-10">

+              <Link

+                href="https://github.com/OpenCut-app/OpenCut"

+                target="_blank"

+              >

+                <Badge variant="secondary" className="gap-2 mb-6">

+                  <GithubIcon className="h-3 w-3" />

+                  Open Source

+                </Badge>

+              </Link>

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Roadmap

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                What's coming next for OpenCut (last updated: January 15, 2025)

+              </p>

+            </div>

+            <div className="space-y-6">

+              {roadmapItems.map((item, index) => (

+                <div key={index} className="relative">

+                  <div className="flex items-start gap-2">

+                    <span className="text-lg font-medium text-muted-foreground select-none leading-[1.5]">

+                      {index + 1}.

+                    </span>

+                    <div className="flex-1 pt-[2px]">

+                      <div className="flex items-center gap-2 mb-2">

+                        <h3 className="font-medium text-lg">{item.title}</h3>

+                        <Badge

+                          className={cn("shadow-none", {

+                            "!bg-green-500 text-white":

+                              item.status.type === "complete",

+                            "!bg-yellow-500 text-white":

+                              item.status.type === "pending",

+                            "!bg-blue-500 text-white":

+                              item.status.type === "info",

+                            "!bg-foreground/10 text-accent-foreground":

+                              item.status.type === "default",

+                          })}

+                        >

+                          {item.status.text}

+                        </Badge>

+                      </div>

+                      <div className="text-foreground/70 leading-relaxed">

+                        <ReactMarkdown

+                          components={{

+                            a: ({ className, children, ...props }) => (

+                              <a

+                                className={cn(

+                                  "text-primary hover:underline",

+                                  className

+                                )}

+                                target="_blank"

+                                rel="noopener noreferrer"

+                                {...props}

+                              >

+                                {children}

+                              </a>

+                            ),

+                            strong: ({ children }) => (

+                              <strong className="font-semibold text-foreground">

+                                {children}

+                              </strong>

+                            ),

+                          }}

+                        >

+                          {item.description}

+                        </ReactMarkdown>

+                      </div>

+                    </div>

+                  </div>

+                </div>

+              ))}

+            </div>

+

+            <div className="mt-12 pt-8 border-t border-muted/20">

+              <div className="text-center space-y-4">

+                <h3 className="text-xl font-semibold">Want to Help?</h3>

+                <p className="text-muted-foreground max-w-2xl mx-auto">

+                  OpenCut is open source and built by the community. Every

+                  contribution, no matter how small, helps us build the best

+                  free video editor possible.

+                </p>

+                <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/blob/main/.github/CONTRIBUTING.md"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Badge

+                      variant="outline"

+                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"

+                    >

+                      <GithubIcon className="h-4 w-4 mr-2" />

+                      Start Contributing

+                    </Badge>

+                  </Link>

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/issues"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Badge

+                      variant="outline"

+                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"

+                    >

+                      Report Issues

+                    </Badge>

+                  </Link>

+                </div>

+              </div>

+            </div>

+          </div>

+        </div>

+      </main>

+      <Footer />

+    </div>

+  );

+}