From 58ce72e5b430ea156c5b529f057faf14408f40fc Mon Sep 17 00:00:00 2001
From: Arjun Mahar <arjunsingh.mahar55@gmail.com>
Date: Tue, 14 Apr 2026 14:39:42 +0500
Subject: [PATCH 1/2] Redesign Why FlutterInit bento grid interactions

---
 app/components/landing/WhyFlutterInit.tsx | 232 ++++++++++++++--------
 1 file changed, 151 insertions(+), 81 deletions(-)

diff --git a/app/components/landing/WhyFlutterInit.tsx b/app/components/landing/WhyFlutterInit.tsx
index af5698d..3ee3841 100644
--- a/app/components/landing/WhyFlutterInit.tsx
+++ b/app/components/landing/WhyFlutterInit.tsx
@@ -9,122 +9,192 @@ import {
 } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/react';
 
+type Feature = {
+  title: string;
+  description: string;
+  className: string;
+  icon: JSX.Element;
+  accent: string;
+  gradient: string;
+  pattern: 'dots' | 'grid' | 'waves';
+  metric: string;
+  chips: string[];
+};
+
 export function WhyFlutterInit() {
-  const features = [
+  const features: Feature[] = [
     {
-      title: "Architecture Agnostic",
-      description: "Clean Architecture, MVVM, or MVC. FlutterInit adapts to your team's workflow, providing the perfect structure every time.",
-      icon: <HugeiconsIcon icon={Layers01Icon} size={24} className="text-primary" />,
-      className: "md:col-span-2 md:row-span-1",
-      gradient: "from-primary/10 via-primary/5 to-transparent",
-      pattern: true,
-      hoverBg: "group-hover:bg-primary/10",
-      hoverBorder: "group-hover:border-primary/25"
+      title: 'Architecture Agnostic',
+      description:
+        "Clean Architecture, MVVM, or MVC. FlutterInit mirrors your team\'s mental model without forcing a single doctrine.",
+      className: 'md:col-span-2 md:row-span-1',
+      icon: <HugeiconsIcon icon={Layers01Icon} size={22} className="text-primary" />,
+      accent: 'primary',
+      gradient: 'from-primary/15 via-primary/5 to-transparent',
+      pattern: 'grid',
+      metric: '3 major patterns supported',
+      chips: ['Clean', 'MVVM', 'Feature-first']
     },
     {
-      title: "Zero Boilerplate",
-      description: "Skip the 4-hour setup. Focus on features.",
-      icon: <HugeiconsIcon icon={FlashIcon} size={24} className="text-amber-500" />,
-      className: "md:col-span-1 md:row-span-1",
-      gradient: "from-amber-500/10 to-transparent",
-      hoverBg: "group-hover:bg-amber-500/10",
-      hoverBorder: "group-hover:border-amber-500/25"
+      title: 'Zero Boilerplate',
+      description: 'Generate battle-tested structure, wiring, and defaults in seconds.',
+      className: 'md:col-span-1 md:row-span-1',
+      icon: <HugeiconsIcon icon={FlashIcon} size={22} className="text-amber-500" />,
+      accent: 'amber',
+      gradient: 'from-amber-500/20 via-amber-500/5 to-transparent',
+      pattern: 'dots',
+      metric: '< 60 sec setup',
+      chips: ['Fast', 'Typed', 'Ready']
     },
     {
-      title: "Production Ready",
-      description: "Enterprise-grade logging, error handling, and monitoring built into the core. Scale with confidence.",
-      icon: <HugeiconsIcon icon={Shield01Icon} size={24} className="text-emerald-500" />,
-      className: "md:col-span-1 md:row-span-2",
-      gradient: "from-emerald-500/10 to-transparent",
-      vertical: true,
-      hoverBg: "group-hover:bg-emerald-500/10",
-      hoverBorder: "group-hover:border-emerald-500/25"
+      title: 'Production Ready',
+      description:
+        'Error handling, logging, and environment management are built in from day one.',
+      className: 'md:col-span-1 md:row-span-2',
+      icon: <HugeiconsIcon icon={Shield01Icon} size={22} className="text-emerald-500" />,
+      accent: 'emerald',
+      gradient: 'from-emerald-500/20 via-emerald-500/5 to-transparent',
+      pattern: 'waves',
+      metric: 'Enterprise defaults included',
+      chips: ['Logging', 'Env', 'Reliability']
     },
     {
-      title: "Optimized Performance",
-      description: "Lightweight Scaffold following best practices for 60fps animations.",
-      icon: <HugeiconsIcon icon={CpuIcon} size={24} className="text-indigo-500" />,
-      className: "md:col-span-1 md:row-span-1",
-      gradient: "from-indigo-500/10 to-transparent",
-      hoverBg: "group-hover:bg-indigo-500/10",
-      hoverBorder: "group-hover:border-indigo-500/25"
+      title: 'Optimized Performance',
+      description: 'Lean templates and pragmatic defaults for smooth 60fps experiences.',
+      className: 'md:col-span-1 md:row-span-1',
+      icon: <HugeiconsIcon icon={CpuIcon} size={22} className="text-indigo-500" />,
+      accent: 'indigo',
+      gradient: 'from-indigo-500/20 via-indigo-500/5 to-transparent',
+      pattern: 'grid',
+      metric: 'Performance-first scaffolds',
+      chips: ['Lightweight', 'Scalable', 'Maintainable']
     },
     {
-      title: "Modern Tech Stack",
-      description: "Riverpod, Bloc, GoRouter, and Material 3 design tokens pre-integrated.",
-      icon: <HugeiconsIcon icon={DashboardSquare01Icon} size={24} className="text-blue-500" />,
-      className: "md:col-span-1 md:row-span-1",
-      gradient: "from-blue-500/10 to-transparent",
-      hoverBg: "group-hover:bg-blue-500/10",
-      hoverBorder: "group-hover:border-blue-500/25"
+      title: 'Modern Tech Stack',
+      description: 'Riverpod, Bloc, GoRouter, and Material 3 tokens pre-integrated.',
+      className: 'md:col-span-1 md:row-span-1',
+      icon: <HugeiconsIcon icon={DashboardSquare01Icon} size={22} className="text-blue-500" />,
+      accent: 'blue',
+      gradient: 'from-blue-500/20 via-blue-500/5 to-transparent',
+      pattern: 'dots',
+      metric: 'Tools teams already love',
+      chips: ['Riverpod', 'Bloc', 'GoRouter']
     },
     {
-      title: "Rapid Prototyping",
-      description: "From idea to running app in under 60 seconds. The faster way to ship Flutter applications to production.",
-      icon: <HugeiconsIcon icon={Clock01Icon} size={24} className="text-rose-500" />,
-      className: "md:col-span-2 md:row-span-1",
-      gradient: "from-rose-500/10 to-transparent",
-      pattern: true,
-      hoverBg: "group-hover:bg-rose-500/10",
-      hoverBorder: "group-hover:border-rose-500/25"
+      title: 'Rapid Prototyping',
+      description: 'Move from idea to installable build quickly and iterate without friction.',
+      className: 'md:col-span-2 md:row-span-1',
+      icon: <HugeiconsIcon icon={Clock01Icon} size={22} className="text-rose-500" />,
+      accent: 'rose',
+      gradient: 'from-rose-500/20 via-rose-500/5 to-transparent',
+      pattern: 'waves',
+      metric: 'More time for product thinking',
+      chips: ['Prototype', 'Validate', 'Ship']
     }
   ];
 
+  const patternClassByType: Record<Feature['pattern'], string> = {
+    dots:
+      'bg-[radial-gradient(circle_at_center,rgba(24,24,27,0.12)_1px,transparent_1px)] [background-size:16px_16px]',
+    grid:
+      'bg-[linear-gradient(rgba(24,24,27,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(24,24,27,0.08)_1px,transparent_1px)] [background-size:18px_18px]',
+    waves:
+      'bg-[radial-gradient(ellipse_at_top,rgba(24,24,27,0.1),transparent_65%),radial-gradient(ellipse_at_bottom,rgba(24,24,27,0.08),transparent_60%)]'
+  };
+
+  const chipClassByAccent: Record<Feature['accent'], string> = {
+    primary: 'bg-primary/10 text-primary',
+    amber: 'bg-amber-500/10 text-amber-700',
+    emerald: 'bg-emerald-500/10 text-emerald-700',
+    indigo: 'bg-indigo-500/10 text-indigo-700',
+    blue: 'bg-blue-500/10 text-blue-700',
+    rose: 'bg-rose-500/10 text-rose-700'
+  };
+
   return (
-    <section className="w-full py-24 bg-zinc-50/50 relative overflow-hidden">
-      {/* Background decorations */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_50%_0%,var(--color-primary)_0.03,transparent_50%)] opacity-5 pointer-events-none" />
-
-      <div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
-        <div className="flex flex-col items-center text-center mb-16">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/5 border border-primary/10 mb-4">
-            <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+    <section className="relative w-full overflow-hidden bg-zinc-50/60 py-24">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,var(--color-primary)_0.05,transparent_60%)]" />
+
+      <div className="relative z-10 mx-auto max-w-7xl px-6 md:px-12">
+        <div className="mb-16 flex flex-col items-center text-center">
+          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/15 bg-primary/5 px-3 py-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
             <span className="text-[11px] font-bold uppercase tracking-wider text-primary">Core Philosophy</span>
           </div>
-          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-zinc-400 mb-6 tracking-tight leading-[1.1]">
-            Why <span className="text-primary tracking-wider font-extrabold">FlutterInit</span> exists?
+
+          <h2 className="mb-6 text-4xl font-bold tracking-tight text-zinc-400 md:text-5xl lg:text-6xl leading-[1.1]">
+            Why <span className="font-extrabold tracking-wider text-primary">FlutterInit</span> exists?
           </h2>
-          <p className="text-lg text-zinc-500 max-w-2xl font-medium leading-relaxed">
+
+          <p className="max-w-2xl text-lg font-medium leading-relaxed text-zinc-500">
             We believe Flutter development should be about innovation, not repetitive configuration.
-            Stop wasting days on project setup and start building.
+            Stop wasting days on setup and start shipping meaningful product value.
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:auto-rows-[200px]">
-          {features.map((feature, index) => (
-            <div
-              key={index}
-              className={`group relative overflow-hidden rounded-[2.5rem] border border-zinc-200 bg-white p-6 transition-all duration-500 hover:border-zinc-300 hover:shadow-2xl hover:shadow-zinc-200/50 hover:-translate-y-1.5 flex flex-col ${feature.className}`}
-            >
-              {/* Pattern Overlay */}
-              {feature.pattern && (
-                <div className="absolute inset-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] bg-size-[20px_20px]" />
+        <div className="grid grid-cols-1 gap-6 md:auto-rows-[220px] md:grid-cols-3">
+          {features.map((feature) => (
+            <article
+              key={feature.title}
+              className={cn(
+                'group relative isolate flex h-full flex-col overflow-hidden rounded-[2rem] border border-zinc-200/80 bg-white/95 p-6 shadow-sm transition-all duration-500 hover:-translate-y-1.5 hover:border-zinc-300 hover:shadow-xl hover:shadow-zinc-300/30',
+                feature.className
               )}
+            >
+              <div className="pointer-events-none absolute inset-0 opacity-0 transition duration-700 group-hover:opacity-100">
+                <div className={cn('absolute inset-0 bg-linear-to-br', feature.gradient)} />
+              </div>
 
-              {/* Radial Highlight */}
-              <div className={`absolute -inset-px bg-linear-to-br ${feature.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-700`} />
+              <div
+                className={cn(
+                  'pointer-events-none absolute inset-0 opacity-[0.06] transition duration-700 group-hover:opacity-[0.12]',
+                  patternClassByType[feature.pattern]
+                )}
+              />
+
+              <div className="absolute right-5 top-5 flex items-center gap-1.5 rounded-full border border-zinc-200 bg-white/80 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-zinc-500 transition-all duration-500 group-hover:border-zinc-300 group-hover:text-zinc-700">
+                <span className="h-1.5 w-1.5 rounded-full bg-primary/80 group-hover:animate-ping" />
+                Live
+              </div>
 
-              <div className="relative z-10 flex flex-col h-full">
-                <div className={cn(
-                  "mb-6 inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-zinc-50 border border-zinc-100 group-hover:scale-110 transition-all duration-500 shadow-sm shrink-0",
-                  feature.hoverBg,
-                  feature.hoverBorder
-                )}>
-                  {feature.icon}
+              <div className="relative z-10 flex h-full flex-col">
+                <div className="mb-5 flex items-start justify-between gap-4">
+                  <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-zinc-200 bg-zinc-50/90 shadow-sm transition-all duration-500 group-hover:scale-110 group-hover:-rotate-3 group-hover:border-zinc-300 group-hover:bg-white">
+                    {feature.icon}
+                  </div>
+
+                  <p className="max-w-[180px] text-right text-xs font-semibold uppercase tracking-wide text-zinc-400 transition-colors duration-500 group-hover:text-zinc-600">
+                    {feature.metric}
+                  </p>
                 </div>
 
-                <h3 className="text-xl md:text-2xl font-bold text-zinc-900 mb-3 group-hover:text-primary transition-colors tracking-tight">
+                <h3 className="mb-2 text-xl font-bold tracking-tight text-zinc-900 transition-colors duration-500 group-hover:text-primary md:text-2xl">
                   {feature.title}
                 </h3>
 
-                <p className={`text-zinc-400 text-[15px] leading-relaxed font-medium ${feature.vertical ? 'max-w-[200px]' : ''}`}>
+                <p className="text-[15px] font-medium leading-relaxed text-zinc-500">
                   {feature.description}
                 </p>
+
+                <div className="mt-auto pt-5">
+                  <div className="flex flex-wrap gap-2">
+                    {feature.chips.map((chip) => (
+                      <span
+                        key={chip}
+                        className={cn(
+                          'rounded-full px-2.5 py-1 text-[11px] font-semibold tracking-wide transition-transform duration-500 group-hover:-translate-y-0.5',
+                          chipClassByAccent[feature.accent]
+                        )}
+                      >
+                        {chip}
+                      </span>
+                    ))}
+                  </div>
+                </div>
               </div>
 
-              {/* Decorative Corner Element */}
-              <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-primary/5 rounded-full blur-2xl group-hover:bg-primary/10 transition-colors duration-500" />
-            </div>
+              <div className="pointer-events-none absolute -bottom-12 -right-10 h-32 w-32 rounded-full bg-primary/10 blur-3xl transition-all duration-700 group-hover:scale-125 group-hover:bg-primary/20" />
+            </article>
           ))}
         </div>
       </div>

From 8b7d1a4a7d861a44c3ce751c9ff6fe262811a56f Mon Sep 17 00:00:00 2001
From: Arjun Mahar <arjunsingh.mahar55@gmail.com>
Date: Tue, 14 Apr 2026 14:45:47 +0500
Subject: [PATCH 2/2] Fix WhyFlutterInit icon typing for Next build

---
 app/components/landing/WhyFlutterInit.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/landing/WhyFlutterInit.tsx b/app/components/landing/WhyFlutterInit.tsx
index 3ee3841..83f7204 100644
--- a/app/components/landing/WhyFlutterInit.tsx
+++ b/app/components/landing/WhyFlutterInit.tsx
@@ -7,13 +7,14 @@ import {
   Layers01Icon,
   Shield01Icon
 } from '@hugeicons/core-free-icons';
+import type { ReactNode } from 'react';
 import { HugeiconsIcon } from '@hugeicons/react';
 
 type Feature = {
   title: string;
   description: string;
   className: string;
-  icon: JSX.Element;
+  icon: ReactNode;
   accent: string;
   gradient: string;
   pattern: 'dots' | 'grid' | 'waves';