Bob AI: fix build errors (attempt 1)

Merge version_1 into main

src/App.tsx

@@ -3,6 +3,7 @@ import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCa
 import FooterSimpleReveal from '@/components/sections/footer/FooterSimpleReveal';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricsMinimalCards from '@/components/sections/metrics/MetricsMinimalCards';
+import CommunityMetrics from '@/components/sections/metrics/CommunityMetrics';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import PricingLayeredCards from '@/components/sections/pricing/PricingLayeredCards';
 import TestimonialAvatarCard from '@/components/sections/testimonial/TestimonialAvatarCard';
@@ -64,6 +65,10 @@ export default function App() {
         />
       </div>
 
+      <div id="community" data-section="community">
+        <CommunityMetrics />
+      </div>
+
       <div id="testimonials" data-section="testimonials">
         <TestimonialAvatarCard
           tag="Our Community"

src/components/sections/metrics/CommunityMetrics.tsx

@@ -0,0 +1,40 @@
+import { motion } from "motion/react";
+
+export default function CommunityMetrics() {
+  const metrics = [
+    {
+      value: "280K+",
+      label: "active users",
+    },
+    {
+      value: "4.9/5",
+      label: "App Store rating",
+    },
+    {
+      value: "92%",
+      label: "report better sleep in 30 days",
+    },
+  ];
+
+  return (
+    <motion.section
+      aria-label="Community metrics section"
+      className="py-10"
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "-15%" }}
+      transition={{ duration: 0.6, ease: "easeOut" }}
+    >
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col md:flex-row justify-around items-center gap-8 md:gap-4 text-center p-10 rounded card">
+          {metrics.map((metric) => (
+            <div key={metric.label} className="flex flex-col items-center">
+              <p className="text-5xl font-bold text-[var(--foreground)]">{metric.value}</p>
+              <p className="text-lg text-[var(--accent)] mt-2 max-w-[200px]">{metric.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </motion.section>
+  );
+}