Merge pull request #1 from Uraniumking007/feature/responsive-landing-process-flow

Improve landing process flow responsiveness, and fixed issue with default stats

Author: max-programming

src/components/landing/landing-process-flow.tsx

@@ -6,28 +6,28 @@ export function LandingProcessFlow() {
     <div className="lg:pl-4">
       <Card className="shadow-sm border-2 border-slate-200 bg-slate-50/50 hover:border-indigo-200 transition-colors py-2">
         <CardContent className="py-2">
-          <div className="flex items-center justify-between text-xs text-slate-600">
+          <div className="flex items-center justify-center md:justify-start text-xs text-slate-600">
             <div className="text-lg font-medium text-slate-700 mb-1">
-              Share secrets on a whim:
+              Share secrets on a whim
             </div>
           </div>
-          <div className="flex items-center gap-1.5 text-base text-slate-600">
-            <div className="flex items-center gap-1.5">
+          <div className="flex items-center justify-between md:justify-start gap-1.5 text-base text-slate-600">
+            <div className="flex md:flex-row flex-col items-center gap-1.5">
               <Edit3 className="size-4" />
               <span>Write</span>
             </div>
             <ArrowRight className="size-4 text-slate-400" />
-            <div className="flex items-center gap-1.5">
+            <div className="flex md:flex-row flex-col items-center gap-1.5">
               <Timer className="size-4" />
               <span>Time</span>
             </div>
             <ArrowRight className="size-4 text-slate-400" />
-            <div className="flex items-center gap-1.5">
+            <div className="flex md:flex-row flex-col items-center gap-1.5">
               <Link2 className="size-4" />
               <span>Share</span>
             </div>
             <ArrowRight className="size-4 text-slate-400" />
-            <div className="flex items-center gap-1.5">
+            <div className="flex md:flex-row flex-col items-center gap-1.5">
               <Zap className="size-4" />
               <span>Vanish</span>
             </div>

src/server/get-stats.ts

@@ -13,5 +13,12 @@ export const getStats = createServerFn({ method: "GET" }).handler(async () => {
     .where(eq(stats.id, 1))
     .limit(1);
 
+  if (!latestStats) {
+    return {
+      whimsCreated: 0,
+      secretsVanished: 0,
+    };
+  }
+
   return latestStats;
 });