feat: add tinte ad

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev --port 3003",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

src/app/header.tsx

@@ -14,8 +14,10 @@ export default function Header() {
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <div className="mr-4 hidden md:flex">
           <a className="mr-6 flex items-center space-x-2" href="/">
-            <img src="/rh-logo.svg" className="w-7 h-7" />
-            <span className="hidden font-bold sm:inline-block">railly.dev</span>
+            <img src="/rh-logo-2024.svg" className="w-7 h-7" />
+            <span className="hidden font-semibold sm:inline-block">
+              railly.dev
+            </span>
           </a>
           <nav className="flex items-center gap-4 text-sm lg:gap-6">
             <Link

src/app/page.tsx

@@ -39,7 +39,7 @@ export default function ThemesPage() {
         {/* Hero Section */}
         <ThemeWrapper
           defaultTheme="zinc"
-          className="relative flex flex-col items-center justify-center !text-center pt-8 pb-16"
+          className="relative flex flex-col items-center justify-center pt-4 md:pt-0 !text-center pb-16"
         >
           <PageHeader className="!text-center flex flex-col gap-2 py-2">
             <PageHeaderHeading>
@@ -48,7 +48,7 @@ export default function ThemesPage() {
             <PageHeaderDescription className="w-full !text-center flex justify-center">
               Choose colors, adjust themes, and copy the generated CSS.
             </PageHeaderDescription>
-            <div className="flex flex-col items-center w-full justify-center mt-8 gap-6">
+            <div className="flex flex-col items-center w-full justify-center mt-3 gap-6">
               <div className="flex w-full max-w-sm gap-4">
                 <Link
                   href="https://github.com/Railly/shadcn-ui-customizer"

src/components/email-subscribe.tsx

@@ -38,11 +38,30 @@ const EmailSubscribe = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col w-full max-w-sm gap-6"
+      className="flex flex-col w-full max-w-2xl gap-6"
     >
-      <legend className="font-mono border border-amber-400 dark:border-yellow-400 border-dashed px-2 py-1.5 rounded-lg text-xs bg-accent text-accent-foreground">
-        A PG Database Assistant is comming... Stay tuned
-      </legend>
+      <div className="flex flex-col items-center md:flex-row gap-4 border border-amber-400 dark:border-yellow-400 border-dashed px-2 py-1.5 rounded-lg">
+        <a href="https://tinte.railly.dev" target="_blank" rel="noreferrer">
+          <img
+            src="/tinte.png"
+            alt="tinte screenshot"
+            height={606}
+            width={318}
+          />
+        </a>
+        <div className="flex flex-col gap-4">
+          <legend className="font-mono font-bold text-accent-foreground">
+            Generate your own VS Code Themes
+          </legend>
+          <ol className="list-decimal flex flex-col gap-2 text-left list-inside text-xs">
+            <li>
+              Provide a 13 color palette or <b> generate one with AI</b>
+            </li>
+            <li>Adjust the theme settings to your liking</li>
+            <li>Download the vsix file and install it in VS Code</li>
+          </ol>
+        </div>
+      </div>
       <div className="flex w-full gap-4">
         <Input
           type="email"