Revert "Improve library discovery and add CI checks"

.github/ISSUE_TEMPLATE/library-request.yml

@@ -48,13 +48,6 @@ body:
       placeholder: React, Vue, TypeScript
     validations:
       required: true
-  - type: input
-    id: use-cases
-    attributes:
-      label: Use cases
-      placeholder: Dashboards, Rapid Prototyping
-    validations:
-      required: true
   - type: checkboxes
     id: checks
     attributes:

CONTRIBUTING.md

@@ -18,7 +18,7 @@ npm install
 npm run dev
 ```
 
-Run `npm run check` before submitting changes.
+Run `npm run build` before submitting changes.
 
 ## Add a library
 

PRODUCT.md

@@ -8,11 +8,11 @@ web
 
 ## Users
 
-Frontend developers and product designers finding UI libraries for an active project, plus contributors maintaining the directory.
+Frontend developers and product designers comparing UI libraries for an active project, plus contributors maintaining the directory.
 
 ## Product Purpose
 
-Col is a community-maintained directory for finding, filtering, sorting, and saving UI libraries without opening many disconnected sources.
+Col is a community-maintained directory for finding, filtering, and comparing UI libraries without opening many disconnected sources.
 
 ## Positioning
 

README.md

@@ -31,7 +31,7 @@
 
 ## What Col does
 
-Col organizes UI libraries by category, stack, and use case. Search from the homepage, then filter, sort, and save matching libraries in the directory.
+Col organizes UI libraries by category, stack, and use case. Search from the homepage, then compare matching libraries in the directory.
 
 - Search by name, keyword, category, stack, or use case.
 - Filter libraries without leaving the directory.
@@ -57,7 +57,7 @@ Open the local URL printed in the terminal (usually [http://localhost:3000](http
 Before opening a pull request:
 
 ```bash
-npm run check
+npm run build
 ```
 
 ## Request something
@@ -74,7 +74,7 @@ Include:
 - what it provides and who it helps;
 - its supported stacks;
 - the closest Col category and use cases;
-- confirmation that it is publicly accessible.
+- confirmation that it is maintained and publicly accessible.
 
 Search [existing libraries](data/libraries.ts), [issues](https://github.com/screen-gd/Col/issues), and [pull requests](https://github.com/screen-gd/Col/pulls) first.
 
@@ -105,7 +105,7 @@ Library-only pull requests should be small and should not redesign unrelated par
 3. Reuse the existing category, stack, and use-case values when possible.
 4. Keep the description factual and short.
 5. Confirm the URL points to the official project.
-6. Run `npm run check`.
+6. Run `npm run build`.
 7. Open a pull request using the provided template.
 
 ```ts
@@ -163,8 +163,6 @@ When contributing a future detail page, keep the prompt specific to that library
 app/                  Routes, layout, and global styles
 components/           Search, filters, cards, header, and shared UI
 data/libraries.ts     The curated library registry
-lib/                  Shared helpers and route metadata
-tests/                Registry and discovery checks
 public/brand/         Col brand assets
 public/hero-logos/    Library artwork used by the homepage
 .github/              Issue forms and pull request guidance

app/docs/page.tsx

@@ -59,7 +59,7 @@ export default function DocsPage() {
 
             <DocSection id="pull-requests" title="Open a pull request">
               <p>Fork the repository, create a focused branch, and keep unrelated changes out. Library additions belong in <code>data/libraries.ts</code> with a unique kebab-case slug, canonical URL, factual description, and existing taxonomy values where possible.</p>
-              <pre><code>{`npm install\nnpm run dev\nnpm run check`}</code></pre>
+              <pre><code>{`npm install\nnpm run dev\nnpm run build`}</code></pre>
               <p>Explain what changed, why it changed, and how you verified it. Include screenshots for visible interface changes.</p>
               <DocLink href="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/screen-gd/Col/blob/main/CONTRIBUTING.md">Read the contribution guide</DocLink>
             </DocSection>

app/globals.css

@@ -179,10 +179,26 @@ html.light .docs-copy pre {
   color: #111;
 }
 
+.gooey-surface {
+  background: #090909;
+  color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
+}
+.hero-search-surface { box-shadow: none; }
+.gooey-input-text { color: #fff; }
+.gooey-key { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
+
+html.light .gooey-surface {
+  background: #fff;
+  color: #111;
+  box-shadow: inset 0 0 0 1px rgba(17,17,17,.16);
+}
+html.light .hero-search-surface { box-shadow: none; }
+html.light .gooey-input-text { color: #111; }
+html.light .gooey-key { border-color: rgba(17,17,17,.14); color: rgba(17,17,17,.65); }
 html.light .hero-stat { background: transparent !important; border-color: rgba(17,17,17,.14) !important; }
 
 .hero-search { border-color: rgba(255,255,255,.15); background: #090909; color: #fff; }
-.hero-search:focus-within { outline: 1px solid #fff; outline-offset: 2px; }
 .hero-search-icon { color: rgba(255,255,255,.72); transition: transform 220ms ease; }
 .hero-search:focus-within .hero-search-icon { transform: translateX(2px); }
 .hero-search-input { color: #fff; }
@@ -209,7 +225,6 @@ html.light .hero-stat { background: transparent !important; border-color: rgba(1
 }
 
 html.light .hero-search { border-color: rgba(17,17,17,.16); background: #fff; color: #111; }
-html.light .hero-search:focus-within { outline-color: #111; }
 html.light .hero-search-icon { color: rgba(17,17,17,.68); }
 html.light .hero-search-input { color: #111; }
 html.light .hero-search-hints { color: rgba(17,17,17,.48); }
@@ -387,6 +402,28 @@ html.light .site-header-search kbd { border-color: rgba(17,17,17,.14); color: rg
   html.light .site-header-mobile-menu a:hover, html.light .site-header-mobile-menu a[aria-current="page"] { background: rgba(17,17,17,.06); }
 }
 
+html.light .gooey-filter-layer { filter: none !important; }
+html.light .gooey-orb { display: none !important; }
+
+html.light [data-slot="select-content"] {
+  border-color: rgba(17,17,17,.14);
+  background: #fff;
+  color: #111;
+  box-shadow: none;
+}
+
+html.dark [data-slot="select-content"] { box-shadow: none; }
+html.dark [data-slot="select-item"][data-highlighted],
+html.dark [data-slot="select-item"]:focus {
+  background: #191919;
+  color: #fff;
+}
+
+html.light [data-slot="select-item"][data-highlighted] {
+  background: #f0f0ed;
+  color: #111;
+}
+
 .popular-filter-button {
   border-color: rgba(255,255,255,.18);
   background: #050505;
@@ -460,9 +497,9 @@ html.light .filter-shell {
 .coss-menu-item:focus,
 .coss-menu-item:focus-visible,
 .coss-menu-item[data-highlighted] {
-  background: #303030;
+  background: transparent;
   color: #fff;
-  outline: 1px solid #fff;
+  outline: none;
 }
 
 html.light .coss-input,
@@ -475,9 +512,9 @@ html.light .coss-menu-item { color: rgba(17,17,17,.76); }
 html.light .coss-menu-item:focus,
 html.light .coss-menu-item:focus-visible,
 html.light .coss-menu-item[data-highlighted] {
-  background: #e8e8e5;
+  background: transparent;
   color: #111;
-  outline: 1px solid #111;
+  outline: none;
 }
 
 @keyframes coss-menu-in {
@@ -492,11 +529,11 @@ html.light .coss-menu-item[data-highlighted] {
 
 .filter-tab { color: rgba(255,255,255,.72); }
 .filter-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
-.filter-tab[aria-pressed="true"] { border-color: rgba(255,255,255,.24); background: #fff; color: #080808; }
+.filter-tab[data-state="active"] { border-color: rgba(255,255,255,.24); background: #fff; color: #080808; }
 
 html.light .filter-tab { color: rgba(17,17,17,.68); }
 html.light .filter-tab:hover { background: rgba(17,17,17,.05); color: #111; }
-html.light .filter-tab[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; }
+html.light .filter-tab[data-state="active"] { border-color: #111; background: #111; color: #fff; }
 
 .library-card { border-color: rgba(255,255,255,.14); background: #050505; color: #fff; }
 .library-card:hover { border-color: rgba(255,255,255,.3); background: #090909; }
@@ -507,7 +544,7 @@ html.light .filter-tab[aria-pressed="true"] { border-color: #111; background: #1
 html.light .library-card { border-color: rgba(17,17,17,.14); background: #fff; color: #111; }
 html.light .library-card:hover { border-color: rgba(17,17,17,.3); background: #fcfcfb; }
 html.light .library-muted { color: rgba(17,17,17,.7); }
-html.light .library-subtle { color: rgba(17,17,17,.65); }
+html.light .library-subtle { color: rgba(17,17,17,.52); }
 html.light .library-chip { border-color: rgba(17,17,17,.12); background: rgba(17,17,17,.045); color: rgba(17,17,17,.72); }
 
 html.light [class~="text-white"] { color: #111; }
@@ -551,6 +588,26 @@ html.light .hero-logo-card {
   filter: blur(3px) brightness(.85) saturate(0);
 }
 
+.hero-background-card--mid {
+  opacity: 0.62;
+  filter: blur(1.5px) brightness(0.94) saturate(0);
+}
+
+.hero-background-card--far {
+  opacity: 0.4;
+  filter: blur(4px) brightness(0.82) saturate(0);
+}
+
+@keyframes star-border-movement-bottom {
+  0% { transform: translate(0%, 0%); opacity: 1; }
+  100% { transform: translate(-100%, 0%); opacity: 0; }
+}
+
+@keyframes star-border-movement-top {
+  0% { transform: translate(0%, 0%); opacity: 1; }
+  100% { transform: translate(100%, 0%); opacity: 0; }
+}
+
 /* Entrance */
 @keyframes fade-up {
   from {
@@ -571,6 +628,22 @@ html.light .hero-logo-card {
 .delay-2 {
   animation-delay: 0.24s;
 }
+.delay-3 {
+  animation-delay: 0.36s;
+}
+
+/* Infinite marquee */
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+.animate-marquee {
+  animation: marquee 60s linear infinite;
+}
 
 :focus-visible:not(input) {
   outline: 1px solid rgba(255, 255, 255, 0.7);
@@ -607,6 +680,16 @@ html.light ::-webkit-scrollbar-thumb { border-color: #f7f7f5; background: #aaa;
     scroll-behavior: auto !important;
   }
 }
+.marquee-mask {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 12%,
+    black 88%,
+    transparent
+  );
+}
+
 @theme inline {
   --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
   --color-color-5: var(--color-5);

app/layout.tsx

@@ -19,7 +19,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "Col — Collection of Libraries",
-  description: "Browse UI libraries by category, stack, and use case.",
+  description: "We curate all the best libraries, so you don't have to.",
   icons: { icon: "/brand/col-mark.png" },
   keywords: [
     "ui libraries",
@@ -39,7 +39,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark" suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: `let t;try{t=localStorage.getItem('col:theme')}catch{}const l=t==='light'||(t!=='dark'&&matchMedia('(prefers-color-scheme: light)').matches);document.documentElement.classList.toggle('light',l);document.documentElement.classList.toggle('dark',!l)` }} />
+        <script dangerouslySetInnerHTML={{ __html: `try{const t=localStorage.getItem('col:theme');const l=t==='light'||(!t&&matchMedia('(prefers-color-scheme: light)').matches);document.documentElement.classList.toggle('light',l);document.documentElement.classList.toggle('dark',!l)}catch{}` }} />
       </head>
       <body
         className={`${inter.variable} ${pixelifySans.variable} ${geistMono.variable} min-h-screen font-sans`}

app/libraries/page.tsx

@@ -1,19 +1,15 @@
 import { DirectoryExplorer } from "@/components/DirectoryExplorer";
 import { Header } from "@/components/Header";
-import { SiteFooter } from "@/components/SiteFooter";
-import { firstQuery } from "@/lib/directory";
 
-export default async function LibrariesPage({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
-  const { q } = await searchParams;
-  const initialQuery = firstQuery(q);
+export default async function LibrariesPage({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
+  const { q = "" } = await searchParams;
 
   return (
     <>
       <Header />
       <main className="w-full max-w-full overflow-x-hidden">
-        <DirectoryExplorer initialQuery={initialQuery} />
+        <DirectoryExplorer initialQuery={q} />
       </main>
-      <SiteFooter />
     </>
   );
 }