Dev

README.md

@@ -39,7 +39,7 @@ The name "Nuto" comes from the Spanish word "diminuto" (tiny), reflecting its pu
 ## ✨ Key Features
 
 - **In-App Browser Escape**: Detects when a link is opened inside an in-app browser (like Instagram) and redirects to the native system browser.
-- **Deep Linking**: Intelligently routes URLs to native applications like YouTube and Spotify for a seamless user experience.
+- **Deep Linking**: Opens YouTube, Spotify, and other supported links in their native apps instead of the in-app browser.
 - **Password Protection**: Secure your links with a password.
 - **Link Expiration**: Set an expiration date for temporary links.
 - **Custom Short Codes**: Users can customize the short code for their links.

app/app.css

@@ -89,7 +89,7 @@
   --font-sans: Inter;
   --font-serif: serif;
   --font-mono: monospace;
-  --radius: 1rem;
+  --radius: 0.6rem;
   --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
   --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);

app/routes/home.tsx

@@ -15,7 +15,7 @@ export function meta({}: Route.MetaArgs) {
     {
       name: "description",
       content:
-        "Give your audience the seamless experience they deserve. Nuto's smart links bypass frustrating in-app browsers and open directly in native apps like YouTube and Spotify.",
+        "Nuto short links open directly in native apps like YouTube and Spotify instead of an in-app browser.",
     },
     {
       property: "og:title",
@@ -24,7 +24,7 @@ export function meta({}: Route.MetaArgs) {
     {
       property: "og:description",
       content:
-        "We fix the broken mobile link experience. Nuto seamlessly routes your visitors to their favorite native apps instead of trapping them in an in-app browser.",
+        "Nuto routes your links to the native app — YouTube, Spotify, Apple Music — instead of the in-app browser.",
     },
     { name: "twitter:card", content: "summary" },
   ];

components/features.tsx

@@ -34,8 +34,8 @@ export function Features() {
             <ExternalLink className="h-5 w-5" /> Launch native apps
           </div>
           <p className="mt-2 text-sm text-muted-foreground">
-            Seamlessly deep-link your visitors straight into the apps they already
-            have installed, like YouTube, Spotify, or Apple Music.
+            Your links open YouTube, Spotify, or Apple Music in their native
+            apps, not in a web view.
           </p>
         </div>
 
@@ -54,8 +54,8 @@ export function Features() {
             <Timer className="h-5 w-5" /> Auto-expiring links
           </div>
           <p className="mt-2 text-sm text-muted-foreground">
-            Create temporary links that self-destruct after a set time, and seamlessly track
-            how many clicks you&apos;re getting.
+            Set an expiry date and the link stops redirecting after it passes.
+            Click counts update as visitors arrive.
           </p>
         </div>
       </div>

components/hero.tsx

@@ -12,9 +12,6 @@ export default function Hero() {
   return (
     <section className="w-full grow min-h-[90dvh] flex flex-col items-center justify-center text-center p-2 px-4 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-3xl text-center content-center mt-auto">
-        <div className="backdrop-blur-sm backdrop-saturate-150 inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground mb-4">
-          Give your users a better experience
-        </div>
         <h1 className="mb-4 text-5xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
           Stop losing visitors to clunky in-app browsers
         </h1>
@@ -74,7 +71,7 @@ export default function Hero() {
       </div>
       <div className="mt-auto text-sm text-muted-foreground flex flex-col gap-4 items-center pb-4">
         <p>Features</p>
-        <MoveDown className="mx-auto animate-bounce text-muted-foreground" />
+        <MoveDown className="mx-auto text-muted-foreground" />
       </div>
     </section>
   );

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 hover:cursor-pointer",
         outline:
-          "backdrop-blur-md backdrop-saturate-150 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:cursor-pointer",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 hover:cursor-pointer",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 hover:cursor-pointer",
         ghost:

components/ui/input.tsx

@@ -8,8 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "backdrop-blur-xl backdrop-saturate-150",
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-background/30 px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className