Update IDEDemo.tsx

Author: brandonkachen

web/src/components/IDEDemo.tsx

@@ -380,9 +380,9 @@ export function IDEDemo({ className }: IDEDemoProps) {
               <div className="flex flex-col h-full">
                 <div className="bg-zinc-900 p-2 flex items-center justify-between border-b border-zinc-800">
                   <div className="flex items-center">
-                    <Files size={16} className="text-green-500 mr-2" />
-                    <span className="text-sm text-white font-medium">
-                      Your favorite IDE
+                    <Files size={16} className="text-green-500 mr-2" />{' '}
+                    <span className="text-xs text-zinc-500">
+                      YOUR FAVORITE IDE
                     </span>
                   </div>
                   <div className="flex items-center space-x-3">
@@ -407,7 +407,7 @@ export function IDEDemo({ className }: IDEDemoProps) {
 
                 <div
                   className={cn(
-                    'flex-1 p-3 font-mono text-xs relative bg-black/60 transition-all duration-500',
+                    'flex-1 p-3 text-xs font-dm-mono relative bg-black/60 transition-all duration-500',
                     expandTerminal && 'h-[30%]'
                   )}
                 >
@@ -449,9 +449,8 @@ export function IDEDemo({ className }: IDEDemoProps) {
                         <ChevronRight size={14} className="text-zinc-400" />
                       )}
                     </button>
-                  </div>
-
-                  <div className="p-3 text-xs">
+                  </div>{' '}
+                  <div className="p-3 text-xs font-dm-mono">
                     {terminalLines.length > 0 ? (
                       <>
                         {terminalLines.map((line, index) => (

web/src/components/ui/hero.tsx

@@ -67,29 +67,60 @@ export function Hero() {
       >
         <motion.h1
           className="hero-heading text-center mb-8 text-white text-balance"
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{
-            duration: 0.8,
-            ease: [0.165, 0.84, 0.44, 1],
+          variants={{
+            animate: {
+              transition: {
+                staggerChildren: 0.2,
+              },
+            },
           }}
+          initial="initial"
+          animate="animate"
         >
           <motion.span
-            className="relative inline-block"
-            initial={{ y: 20 }}
-            animate={{ y: 0 }}
-            transition={{ duration: 0.5, delay: 0.1 }}
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
           >
-            <span className="relative z-10">Supercharge</span>
+            Supercharge
           </motion.span>{' '}
-          Your{' '}
           <motion.span
-            className="relative inline-block"
-            initial={{ y: 20 }}
-            animate={{ y: 0 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
           >
-            <span className="relative z-10">AI Coding</span>
+            Your AI
+          </motion.span>{' '}
+          <motion.span
+            variants={{
+              initial: { opacity: 0, y: 20 },
+              animate: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.165, 0.84, 0.44, 1],
+                },
+              },
+            }}
+          >
+            Coding
           </motion.span>
         </motion.h1>
       </motion.div>

web/src/styles/globals.css

@@ -88,8 +88,14 @@
 }
 
 .hero-heading {
-  @apply text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight;
+  @apply text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-medium;
   font-family: 'Domine', serif;
+  letter-spacing: 0.005em;
+  word-spacing: 0.005em;
+  /* Enable proper text shaping */
+  font-kerning: normal;
+  font-feature-settings: "kern" 1, "liga" 1;
+  text-rendering: optimizeLegibility;
 }
 
 .hero-subtext {
@@ -176,17 +182,32 @@
 /* Ensure proper text wrapping in headings on mobile */
 @media (max-width: 767px) {
   :where(h1, h2, h3, h4, h5, h6) {
-    /* Use flexbox for robust wrapping */
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    line-height: 1; /* Minimal line spacing */
-    gap: 0; /* Remove gap between items */
-    margin-top: 0rem; /* Reduce top margin */
+    /* Revert to normal text flow for proper kerning */
+    display: block;
+    line-height: 1.2;
+    margin-top: 0rem;
+    /* Enable proper text shaping and kerning */
+    font-kerning: normal;
+    font-feature-settings: "kern" 1, "liga" 1;
+    text-rendering: optimizeLegibility;
   }
 
   /* Keep code snippets from breaking on mobile */
   :where(h1, h2, h3, h4, h5, h6) code {
     white-space: nowrap;
   }
+
+  /* Specific spacing fixes for hero text */
+  .hero-heading {
+    line-height: 1.15;
+    margin-bottom: 2rem;
+    text-wrap: balance;
+  }
+
+  .hero-subtext {
+    line-height: 1.5;
+    margin-bottom: 2rem;
+    letter-spacing: 0.015em;
+    word-spacing: 0.01em;
+  }
 }

web/tailwind.config.ts

@@ -13,6 +13,7 @@ const config = {
     fontFamily: {
       sans: ['var(--font-sans)'],
       mono: ['"DM Mono"', 'var(--font-mono)'],
+      'dm-mono': ['"DM Mono"', 'monospace'],
       paragraph: ['Manrope', 'var(--font-sans)', 'sans-serif'],
       serif: ['Domine', 'serif'],
     },