added 1RM and macro calculators to fitness dashboard.

2026-09-17 17:48:26 +05:30
commit 21f1ce7918
50 changed files with 14396 additions and 0 deletions
@@ -0,0 +1,112 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+const INTERESTS = [
+  { id: "fashion", label: "Streetwear", emoji: "👟" },
+  { id: "travel", label: "Travel & Places", emoji: "✈️" },
+  { id: "architecture", label: "Architecture", emoji: "🏛️" },
+  { id: "food", label: "Food & Drink", emoji: "🍔" },
+  { id: "tech", label: "Technology", emoji: "💻" },
+  { id: "art", label: "Digital Art", emoji: "🎨" },
+  { id: "music", label: "Music & Audio", emoji: "🎵" },
+  { id: "nature", label: "Nature", emoji: "🌲" },
+  { id: "fitness", label: "Health & Fitness", emoji: "🏋️" },
+  { id: "cars", label: "Automotive", emoji: "🚗" },
+];
+
+export default function OnboardingPage() {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const toggleInterest = (id: string) => {
+    setSelected(prev => 
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const item: import("framer-motion").Variants = {
+    hidden: { opacity: 0, scale: 0.8, y: 20 },
+    show: { opacity: 1, scale: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 20 } }
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col items-center justify-center p-8 relative">
+      <div className="absolute top-4 right-4 z-50">
+        <ThemeToggle />
+      </div>
+
+      <div className="max-w-4xl w-full z-10 flex flex-col items-center">
+        <motion.div 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center space-y-4 mb-12"
+        >
+          <h1 className="text-5xl font-extrabold tracking-tight">What are you into?</h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Pick 3 or more topics to personalize your feed. We'll curate the best content just for you.
+          </p>
+        </motion.div>
+
+        <motion.div 
+          variants={container}
+          initial="hidden"
+          animate="show"
+          className="flex flex-wrap justify-center gap-4 max-w-3xl"
+        >
+          {INTERESTS.map((interest) => {
+            const isSelected = selected.includes(interest.id);
+            return (
+              <motion.button
+                key={interest.id}
+                variants={item}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => toggleInterest(interest.id)}
+                className={`flex items-center gap-3 px-6 py-4 rounded-full text-lg font-medium transition-all shadow-sm
+                  ${isSelected 
+                    ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30 ring-2 ring-primary ring-offset-2 ring-offset-background" 
+                    : "glass hover:bg-white/50 dark:hover:bg-black/50"
+                  }
+                `}
+              >
+                <span className="text-2xl">{interest.emoji}</span>
+                {interest.label}
+              </motion.button>
+            );
+          })}
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0 }}
+          animate={{ opacity: selected.length > 0 ? 1 : 0 }}
+          transition={{ duration: 0.3 }}
+          className="mt-16"
+        >
+          <button 
+            disabled={selected.length < 3}
+            onClick={() => window.location.href = "/feed"}
+            className={`px-12 py-4 rounded-full font-bold text-lg shadow-xl transition-all ${
+              selected.length >= 3 
+                ? "bg-primary text-primary-foreground hover:scale-105 active:scale-95" 
+                : "bg-muted text-muted-foreground cursor-not-allowed opacity-50"
+            }`}
+          >
+            {selected.length < 3 ? `Pick ${3 - selected.length} more` : "Continue to Feed →"}
+          </button>
+        </motion.div>
+      </div>
+    </div>
+  );
+}