From be1ae20d9089e81cb84a8294be76fe680a24b60f Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Sun, 20 Jul 2025 11:00:22 +0300
Subject: format

---
 apps/web/src/app/roadmap/page.tsx | 494 +++++++++++++++++++-------------------
 1 file changed, 247 insertions(+), 247 deletions(-)

(limited to 'apps/web/src/app/roadmap')

diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
index c62dce3a..a3b98908 100644
--- a/apps/web/src/app/roadmap/page.tsx
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -1,247 +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: July 14, 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>
-  );
-}
+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: July 14, 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>
+	);
+}
-- 
cgit v1.3.1