https://remix-shadcn-starter.vercel.app/

1<!DOCTYPE html><html lang="en" class="light"><head>

1<script nonce="">
2const cookies = document.cookie.split(';').map(c => c.trim()).reduce((acc, cur) => {
3	const [key, value] = cur.split('=');
4	acc[key] = value;
5	return acc;
6}, {});
7let cookieChanged = false;
8const hints = [
9{ name: "CH-prefers-color-scheme", actual: String(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'), cookie: cookies["CH-prefers-color-scheme"] }
10];
11for (const hint of hints) {
12	if (decodeURIComponent(hint.cookie) !== hint.actual) {
13		cookieChanged = true;
14		document.cookie = encodeURIComponent(hint.name) + '=' + encodeURIComponent(hint.actual) + '; Max-Age=31536000; path=/';
15	}
16}
17// if the cookie changed, reload the page, unless the browser doesn't support
18// cookies (in which case we would enter an infinite loop of reloads)
19if (cookieChanged && navigator.cookieEnabled) {
20	window.location.reload();
21}
22			</script>

22<meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/build/_assets/tailwind-HZY4E6GP.css"/></head><body><section class="w-full min-h-screen flex flex-col"><nav class="flex items-center justify-between p-4 w-full"><a class="flex items-center space-x-2" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-command h-8 w-8"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path></svg><h1 class="text-xl font-semibold">Remix + Shadcn</h1></a><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9" type="button" id="radix-:R14p:" aria-haspopup="menu" aria-expanded="false" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg><span class="sr-only">Toggle theme</span></button></nav><div class="container flex justify-center px-4 md:px-6 flex-1 py-8 overflow-x-hidden"><div class="flex flex-col items-center space-y-4 text-center p-4 md:w-1/2"><h1 class="text-3xl md:text-4xl font-bold tracking-tighter">A<!-- --> <span class="font-extrabold bg-gradient-to-r from-orange-700 via-blue-500 to-green-400 text-transparent bg-clip-text bg-300% animate-gradient">Simple Starter</span> <!-- -->For Remix, Shadcn-ui and<!-- --> <a class="hover:text-blue-500" href="https://ui.aceternity.com">Aceternity-ui</a></h1><p class="text-muted-foreground font-bold mt-2">With optimistic dark-mode.</p><p class="text-muted-foreground mt-2">(On mobile, tap for animations.)</p><div class="border bg-card text-card-foreground shadow relative group overflow-hidden rounded-lg"><div class="p-1 bg-gradient-to-r from-orange-700 via-blue-500 to-green-400 bg-300% animate-gradient"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2" href="https://github.com/rajeshdavidbabu/remix-shadcn-starter">Star on Github</a></div></div><div class="px-4"><div class="flex flex-row items-center justify-center mt-10 w-full"><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=3387&amp;q=80" alt="John Doe" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt="Robert Johnson" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt="Jane Smith" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt="Emily Davis" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=3540&amp;q=80" alt="Tyler Durden" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div><div class="-mr-4  relative group"><img height="100" width="100" src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=3534&amp;q=80" alt="Dora" class="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-white  relative transition duration-500"/></div></div><div class="h-[40rem] w-full flex items-center justify-center "><div class="relative group/pin z-50 cursor-pointer"><div style="perspective:1000px;transform:rotateX(70deg) translateZ(0deg)" class="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"><div style="transform:translate(-50%,-50%) rotateX(0deg)" class="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"><div class="relative z-50"><div class="flex basis-full flex-col p-4 tracking-tight text-slate-100/50 sm:basis-1/2 w-[20rem] h-[20rem] "><h3 class="max-w-xs !pb-2 !m-0 font-bold  text-base text-slate-100">Super neat library</h3><div class="text-base !m-0 !p-0 font-normal"><span class="text-slate-500 ">Customizable Tailwind CSS and Framer Motion Components.</span></div><div class="flex flex-1 w-full rounded-lg mt-4 bg-gradient-to-br from-violet-500 via-purple-500 to-blue-500"></div></div></div></div></div><div class="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500"><div class=" w-full h-full -mt-7 flex-none  inset-0"><div class="absolute top-0 inset-x-0  flex justify-center"><a href="https://twitter.com/mannupaaji" target="_blank" class="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "><span class="relative z-20 text-white text-xs font-bold inline-block py-0.5">new ui library of components</span><span class="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span></a></div><div style="perspective:1000px;transform:rotateX(70deg) translateZ(0)" class="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"><div class="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]" style="opacity:0;transform:translateX(-50%) translateY(-50%) scale(0) translateZ(0)"></div><div class="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]" style="opacity:0;transform:translateX(-50%) translateY(-50%) scale(0) translateZ(0)"></div><div class="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]" style="opacity:0;transform:translateX(-50%) translateY(-50%) scale(0) translateZ(0)"></div></div><div class="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]"></div><div class="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  "></div><div class="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]"></div><div class="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 "></div></div></div></div></div><div class="py-20 flex items-center justify-center" style="perspective:1000px"><div class="flex items-center justify-center relative transition-all duration-200 ease-linear inter-var px-4" style="transform-style:preserve-3d"><div class="[transform-style:preserve-3d] [&amp;&gt;*]:[transform-style:preserve-3d] bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border"><div class="w-fit transition duration-200 ease-linear text-xl font-bold text-neutral-600 dar

22k:text-white">Make things float in air</div><p class="w-fit transition duration-200 ease-linear text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300">Hover over this card to unleash the power of CSS perspective</p><div class="transition duration-200 ease-linear w-full mt-4"><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&amp;w=2560&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" height="1000" width="1000" class="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl" alt="thumbnail"/></div></div></div></div></div></div></div></section>

22<script>((STORAGE_KEY, restoreKey) => {
23    if (!window.history.state || !window.history.state.key) {
24      let key = Math.random().toString(32).slice(2);
25      window.history.replaceState({
26        key
27      }, "");
28    }
29    try {
30      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
31      let storedY = positions[restoreKey || window.history.state.key];
32      if (typeof storedY === "number") {
33        window.scrollTo(0, storedY);
34      }
35    } catch (error) {
36      console.error(error);
37      sessionStorage.removeItem(STORAGE_KEY);
38    }
39  })("positions", null)</script>

39<link rel="modulepreload" href="/build/manifest-D2B6314F.js"/><link rel="modulepreload" href="/build/entry.client-EUON3PQG.js"/><link rel="modulepreload" href="/build/_shared/chunk-Z7AUED45.js"/><link rel="modulepreload" href="/build/_shared/chunk-G5WX4PPA.js"/><link rel="modulepreload" href="/build/_shared/chunk-LJTHE57O.js"/><link rel="modulepreload" href="/build/root-QSNMBXGB.js"/><link rel="modulepreload" href="/build/routes/_index-YJCAFIQE.js"/>

39<script>window.__remixContext = {"url":"/","state":{"loaderData":{"root":{"requestInfo":{"hints":{"theme":"light"},"userPrefs":{"theme":"light"}}},"routes/_index":null},"actionData":null,"errors":null},"future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false}};</script>

39<script type="module" async="">import "/build/manifest-D2B6314F.js";
40import * as route0 from "/build/root-QSNMBXGB.js";
41import * as route1 from "/build/routes/_index-YJCAFIQE.js";
42window.__remixRouteModules = {"root":route0,"routes/_index":route1};
43
44import("/build/entry.client-EUON3PQG.js");</script>

44</body></html>