Merge pull request #27 from willwearing/feat/graspful-landing-page

Match Just Listen styling + favicon fix

Author: willwearing

apps/web/src/app/favicon.ico

@@ -171,13 +171,21 @@
 }
 
 @keyframes word-enter {
-  from { opacity: 0; translate: 0 20px; }
-  to { opacity: 1; translate: 0 0; }
+  from {
+    opacity: 0;
+    filter: blur(20px);
+    transform: translateY(40px) scale(0.88);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0px);
+    transform: translateY(0) scale(1);
+  }
 }
 
 .animate-word-enter {
   opacity: 0;
-  animation: word-enter 0.5s ease-out forwards;
+  animation: word-enter 1s ease-out forwards;
 }
 
 @keyframes fade-up {
@@ -231,8 +239,8 @@
 
 /* ── Connecting line animation for How It Works ──────────────────── */
 @keyframes line-grow {
-  from { height: 0; }
-  to { height: 100%; }
+  from { width: 0; }
+  to { width: 100%; }
 }
 
 .animate-line-grow {

apps/web/src/app/globals.css

@@ -29,9 +29,9 @@ describe("Hero", () => {
     expect(orbs.length).toBe(4);
   });
 
-  it("uses 9xl font size on xl screens", () => {
+  it("uses 9xl font size on lg screens", () => {
     const { container } = render(<Hero {...props} />);
     const h1 = container.querySelector("h1");
-    expect(h1?.className).toContain("xl:text-9xl");
+    expect(h1?.className).toContain("lg:text-9xl");
   });
 });

apps/web/src/components/marketing/__tests__/hero.test.tsx

@@ -17,14 +17,11 @@ describe("HowItWorks", () => {
   it("renders all step titles and descriptions", () => {
     render(<HowItWorks heading="How It Works" steps={steps} />);
     expect(screen.getByText("Take a Diagnostic")).toBeTruthy();
+    expect(screen.getByText("Quick quiz.")).toBeTruthy();
+    expect(screen.getByText("Study Adaptively")).toBeTruthy();
+    expect(screen.getByText("Personalized lessons.")).toBeTruthy();
     expect(screen.getByText("Pass Your Exam")).toBeTruthy();
-  });
-
-  it("renders step numbers", () => {
-    render(<HowItWorks heading="How It Works" steps={steps} />);
-    expect(screen.getByText("1")).toBeTruthy();
-    expect(screen.getByText("2")).toBeTruthy();
-    expect(screen.getByText("3")).toBeTruthy();
+    expect(screen.getByText("Retain everything.")).toBeTruthy();
   });
 
   it("uses dark navy background", () => {

apps/web/src/components/marketing/__tests__/how-it-works.test.tsx

@@ -8,9 +8,13 @@ interface CTAProps {
 
 export function CTA({ ctaText, headline, subheadline }: CTAProps) {
   return (
-    <section className="relative overflow-hidden py-24 bg-white dark:bg-background">
-      <div className="relative z-10 mx-auto max-w-2xl px-6 text-center">
-        <h2 className="text-3xl font-bold text-foreground sm:text-4xl mb-4">
+    <section className="relative overflow-hidden py-32 md:py-44 bg-white dark:bg-background">
+      <div className="gradient-mesh opacity-20">
+        <div className="orb-1" />
+        <div className="orb-2" />
+      </div>
+      <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
+        <h2 className="text-4xl font-bold tracking-[-0.04em] text-foreground sm:text-5xl lg:text-7xl mb-4">
           {headline}
         </h2>
         <p className="text-lg text-muted-foreground mb-2">

apps/web/src/components/marketing/cta.tsx

@@ -20,9 +20,9 @@ interface FeaturesProps {
 
 export function Features({ heading, subheading, features }: FeaturesProps) {
   return (
-    <section className="bg-[#F8FAFC] py-24 dark:bg-card/50">
+    <section className="bg-[#F8FAFC] py-32 md:py-40 dark:bg-card/50">
       <div className="mx-auto max-w-6xl px-6">
-        <h2 className="text-center text-3xl font-bold text-foreground sm:text-4xl mb-4">
+        <h2 className="text-center text-4xl font-bold tracking-[-0.04em] text-foreground sm:text-5xl lg:text-6xl mb-4">
           {heading}
         </h2>
         <p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto text-lg">
@@ -35,12 +35,12 @@ export function Features({ heading, subheading, features }: FeaturesProps) {
               <div
                 key={`${feature.icon}-${feature.title}`}
                 data-wide={feature.wide ? "true" : undefined}
-                className={`group rounded-2xl border border-border/50 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:bg-card ${
+                className={`group rounded-2xl border border-border/50 bg-white p-10 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:bg-card ${
                   feature.wide ? "sm:col-span-2 lg:col-span-2" : ""
                 }`}
               >
-                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-accent/20">
-                  <Icon className="h-6 w-6 text-primary" />
+                <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-accent/20">
+                  <Icon className="h-7 w-7 text-primary" />
                 </div>
                 <h3 className="text-lg font-semibold text-foreground mb-2">
                   {feature.title}

apps/web/src/components/marketing/features.tsx

@@ -19,22 +19,22 @@ export function Hero({ headline, subheadline, ctaText }: HeroProps) {
       </div>
 
       <div className="relative z-10 mx-auto max-w-5xl px-6 py-32 text-center md:py-44">
-        <h1 className="text-5xl font-bold leading-[1.1] tracking-tight sm:text-6xl lg:text-7xl xl:text-9xl">
+        <h1 className="text-7xl font-bold tracking-[-0.045em] leading-[1.08] sm:text-8xl lg:text-9xl">
           {words.map((word, i) => (
             <span
               key={`${word}-${i}`}
               className={`inline-block animate-word-enter ${
                 i >= words.length - 1 ? "text-gradient" : "text-foreground"
               }`}
-              style={{ animationDelay: `${0.15 + i * 0.12}s` }}
+              style={{ animationDelay: `${0.15 + i * 0.14}s` }}
             >
               {word}
               {i < words.length - 1 ? <span>&nbsp;</span> : null}
             </span>
           ))}
         </h1>
         <p
-          className="animate-fade-up mx-auto mt-8 max-w-xl text-lg leading-relaxed text-muted-foreground md:text-xl"
+          className="animate-fade-up mx-auto mt-8 max-w-xl text-xl leading-relaxed text-muted-foreground md:text-2xl"
           style={{ animationDelay: "0.6s" }}
         >
           {subheadline}

apps/web/src/components/marketing/hero.tsx

@@ -1,45 +1,32 @@
 interface HowItWorksProps {
   heading: string;
-  steps: Array<{
-    title: string;
-    description: string;
-  }>;
+  steps: Array<{ title: string; description: string }>;
 }
 
 export function HowItWorks({ heading, steps }: HowItWorksProps) {
   return (
-    <section className="relative bg-[#0A1628] py-24 overflow-hidden">
+    <section className="relative bg-[#0A1628] py-32 md:py-40 overflow-hidden">
       <div className="gradient-mesh opacity-30">
         <div className="orb-1" />
         <div className="orb-2" />
       </div>
-
-      <div className="relative z-10 mx-auto max-w-4xl px-6">
-        <h2 className="text-center text-3xl font-bold text-white sm:text-4xl mb-16">
+      <div className="relative z-10 mx-auto max-w-5xl px-6">
+        <h2 className="text-center text-4xl font-bold tracking-[-0.04em] text-white sm:text-5xl lg:text-6xl mb-20">
           {heading}
         </h2>
         <div className="relative">
-          <div className="absolute left-8 top-0 bottom-0 w-px hidden md:block overflow-hidden">
-            <div className="w-full bg-gradient-to-b from-primary via-secondary to-primary animate-line-grow" />
+          {/* Horizontal connecting line */}
+          <div className="absolute top-10 left-[10%] right-[10%] h-px hidden sm:block overflow-hidden">
+            <div className="w-full h-full bg-gradient-to-r from-primary via-secondary to-primary animate-line-grow" style={{ animationDuration: '1.5s' }} />
           </div>
-
-          <div className="space-y-12">
+          <div className="grid gap-16 sm:grid-cols-3 sm:gap-8">
             {steps.map((step, i) => (
-              <div
-                key={`${step.title}-${step.description}`}
-                className="flex gap-6 items-start"
-              >
-                <div className="relative flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary to-secondary text-white text-xl font-bold shadow-lg shadow-primary/20">
+              <div key={step.title} className="flex flex-col items-center text-center">
+                <div className="relative flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary to-secondary text-white text-2xl font-bold shadow-[0_0_40px_rgba(99,102,241,0.3),0_0_80px_rgba(99,102,241,0.15)] mb-8">
                   {i + 1}
                 </div>
-                <div className="pt-2">
-                  <h3 className="text-xl font-semibold text-white mb-2">
-                    {step.title}
-                  </h3>
-                  <p className="text-slate-400 leading-relaxed">
-                    {step.description}
-                  </p>
-                </div>
+                <h3 className="text-xl font-semibold text-white mb-3">{step.title}</h3>
+                <p className="text-slate-400 leading-relaxed">{step.description}</p>
               </div>
             ))}
           </div>

apps/web/src/components/marketing/how-it-works.tsx

@@ -7,8 +7,8 @@ export function MarketingNav() {
   const brand = useBrand();
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/30 bg-background/70 backdrop-blur-xl">
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+    <nav className="absolute top-0 left-0 right-0 z-20 border-b border-[#0F172A]/[0.06] bg-transparent">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6 md:px-12">
         <Link href="/" className="flex items-center gap-2">
           <span className="text-xl font-bold text-foreground tracking-tight">
             {brand.name}