feat(landing): demo in progress link to Parafield Railway demo

Made-with: Cursor

Author: imjustinliao

frontend/src/components/landing/FundamentalBlocks.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useRouter } from "next/navigation"
 import { useState, useCallback, useRef, useEffect } from "react"
-import { useAuth } from "@/context/AuthContext"
+
+const DEMO_IN_PROGRESS_URL = "https://web-production-859f6b.up.railway.app/"
 
 /* ——— Feature data ——— */
 const FEATURES = [
@@ -253,24 +253,13 @@ function ShootingStars() {
 }
 
 export function FundamentalBlocks() {
-  const router = useRouter()
-  const { user, loading, openLoginModal } = useAuth()
   const [activeIdx, setActiveIdx] = useState<number | null>(null)
   const [paused, setPaused] = useState(false)
   const [locked, setLocked] = useState(false)
   const sectionRef = useRef<HTMLElement>(null)
   const featureVideoRef = useRef<HTMLVideoElement>(null)
   const [visible, setVisible] = useState(false)
 
-  const handleExplore = useCallback(() => {
-    if (loading) return
-    if (!user) {
-      openLoginModal("Sign in to explore First Principle.", "/app")
-      return
-    }
-    router.push("/app")
-  }, [loading, user, openLoginModal, router])
-
   useEffect(() => {
     const el = sectionRef.current
     if (!el) return
@@ -445,28 +434,33 @@ export function FundamentalBlocks() {
             }}
           />
 
-          {/* EXPLORE button — centered on logo */}
+          {/* Demo link — centered on logo */}
           {activeIdx === null && (
-            <button
-              onClick={handleExplore}
+            <a
+              href={DEMO_IN_PROGRESS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
               style={{
                 position: "absolute",
                 left: "50%",
                 top: "50%",
                 transform: "translate(-50%, -50%)",
                 fontFamily: "var(--font-source-sans), 'Source Sans 3', sans-serif",
-                fontSize: "50px",
+                fontSize: "clamp(22px, 4.2vw, 36px)",
                 fontWeight: 400,
-                lineHeight: "63px",
+                lineHeight: 1.2,
                 textAlign: "center",
                 color: "#FFFFFF",
+                textDecoration: "none",
                 textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
                 filter: "blur(2px)",
                 transition: "filter 0.3s ease-out",
                 cursor: "pointer",
                 background: "transparent",
                 border: "none",
-                padding: 0,
+                padding: "0 12px",
+                maxWidth: "min(300px, 86vw)",
+                boxSizing: "border-box",
               }}
               onMouseEnter={(e) => {
                 e.currentTarget.style.filter = "blur(0px)"
@@ -479,7 +473,7 @@ export function FundamentalBlocks() {
                 if (line) line.style.opacity = "0"
               }}
             >
-              EXPLORE
+              demo in progress
               <span
                 style={{
                   display: "block",
@@ -491,7 +485,7 @@ export function FundamentalBlocks() {
                   transition: "opacity 0.3s ease-out",
                 }}
               />
-            </button>
+            </a>
           )}
         </div>