+ {/* Glow behind */}
+
+
+ {/* Logo */}
+
+
+
+ {"<>"}
+
+
+
+
+ OPENDSA
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
+
+ v0.1.0-alpha
-
+
+ );
+}
+
+export default function ComingSoon() {
+ const [mounted, setMounted] = useState(false);
+ const { displayedText: line1, isComplete: line1Done } = useTypingEffect(
+ "$ initializing opendsa...",
+ 40,
+ 500
+ );
+ const { displayedText: line2, isComplete: line2Done } = useTypingEffect(
+ "$ loading algorithm visualizers...",
+ 40,
+ 2000
+ );
+ const { displayedText: line3 } = useTypingEffect(
+ "$ status: UNDER_DEVELOPMENT",
+ 40,
+ 3500
+ );
+
+ const [showContent, setShowContent] = useState(false);
+ const [currentTime, setCurrentTime] = useState("");
+
+ useEffect(() => {
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setMounted(true);
+ }, []);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setShowContent(true), 4500);
+ return () => clearTimeout(timer);
+ }, []);
+
+ useEffect(() => {
+ const updateTime = () => {
+ setCurrentTime(new Date().toISOString().replace("T", " ").split(".")[0] + " UTC");
+ };
+ updateTime();
+ const interval = setInterval(updateTime, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ if (!mounted) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {/* Matrix rain background */}
+
+ {[...Array(30)].map((_, i) => (
+
+ ))}
+
+
+ {/* Grid pattern */}
+
+
+ {/* Scanlines */}
+
+
+ {/* Gradient orbs */}
+
+
+
+ {/* Main content */}
+
+ {/* Logo */}
+
+
+ {/* Terminal window */}
+
+
+ {/* Terminal header */}
+
+
+
+
+ opendsa@dev ~ bash
+
+
+
+ {currentTime}
+
+
+
+ {/* Terminal content */}
+
+ {/* Line 1 */}
+
+ {line1}
+ {!line1Done && (
+
+ )}
+
+
+ {/* Line 2 */}
+ {line1Done && (
+
+ {line2}
+ {!line2Done && (
+
+ )}
+
+ )}
+
+ {/* Line 3 */}
+ {line2Done && (
+
+ {line3}
+
+ )}
+
+ {/* Status output */}
+ {showContent && (
+
+
+ → Algorithm Engine: building
+
+
+ → Visualization Core: in progress
+
+
+ → UI Components: ready
+
+
+ → Documentation: available
+
+
+ )}
+
+
+
+
+ {/* Coming soon message */}
+ {showContent && (
+
+
+
+ COMING SOON
+
+
+ We're building something amazing. The open-source algorithm visualization platform is under active development.
+
+
+
+ {/* Progress bar */}
+
+
+ {/* Action buttons */}
+
+
+
+ Star on GitHub
+
+
+
+
+ Visit Website
+
+
+
+
+ Read Docs
+
+
+
+ {/* Tech stack hint */}
+
+ {["Next.js 14", "TypeScript", "Framer Motion", "D3.js", "Tailwind"].map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+ )}
+
+ {/* Footer */}
+
+
+ Made with 💚 by{" "}
+
+ @soloshun
+
+ {" "}• MIT License
+
-
+
+
+
);
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ace5cd6..fbbe3b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,15 @@ importers:
apps/app:
dependencies:
+ clsx:
+ specifier: ^2.1.1
+ version: 2.1.1
+ framer-motion:
+ specifier: ^12.29.0
+ version: 12.29.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+ lucide-react:
+ specifier: ^0.563.0
+ version: 0.563.0(react@19.2.3)
next:
specifier: 16.1.4
version: 16.1.4(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -35,6 +44,9 @@ importers:
react-dom:
specifier: 19.2.3
version: 19.2.3(react@19.2.3)
+ tailwind-merge:
+ specifier: ^3.4.0
+ version: 3.4.0
devDependencies:
'@tailwindcss/postcss':
specifier: ^4