feat/studio

app/ecosystem/page.tsx → app/(marketing)/ecosystem/page.tsx

@@ -8,8 +8,9 @@ import {
   useRef,
   useCallback,
 } from "react";
-import { Search, Plus, ArrowUpRight } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { Plus, ArrowUpRight } from "lucide-react";
+import { motion } from "framer-motion";
+import SearchInput from "@/components/ui/SearchInput";
 import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import { ECOSYSTEM_APPS, ECOSYSTEM_CATEGORIES } from "@/lib/ecosystem-data";
 import PageHero from "@/components/ui/PageHero";
@@ -144,44 +145,13 @@ function EcosystemPageInner() {
               />
             </div>
 
-            <div className="relative">
-              <Search className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-white/50" />
-              <input
-                type="text"
-                placeholder="Search"
-                aria-label="Search ecosystem apps"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="w-full rounded-md border border-white/[0.12] bg-white/[0.03] backdrop-blur-sm py-1.5 pl-9 pr-8 text-sm text-white/60 placeholder:text-white/30 transition-colors duration-200 focus:bg-white/[0.05] focus:border-white/20 focus:outline-none sm:w-56 select-none"
-              />
-              <AnimatePresence>
-                {search && (
-                  <motion.button
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1, transition: { duration: 0.2 } }}
-                    exit={{ opacity: 0, transition: { duration: 0.5 } }}
-                    onClick={() => setSearch("")}
-                    className="absolute right-2.5 top-1/2 -translate-y-1/2 cursor-pointer text-white/50 transition-colors hover:text-white/80"
-                    aria-label="Clear search"
-                  >
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      className="block"
-                    >
-                      <path
-                        d="M5 5L15 15M15 5L5 15"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                      />
-                    </svg>
-                  </motion.button>
-                )}
-              </AnimatePresence>
-            </div>
+            <SearchInput
+              value={search}
+              onChange={setSearch}
+              placeholder="Search"
+              ariaLabel="Search ecosystem apps"
+              className="sm:w-56"
+            />
           </div>
 
           {/* App grid */}

app/(marketing)/layout.tsx

@@ -0,0 +1,16 @@
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+}