Index: frontend/src/pages/LandingPage/components/Benefits.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Benefits.jsx	(revision 5c20c64185ecffb14d2efb75c8120977f8a6bcec)
+++ frontend/src/pages/LandingPage/components/Benefits.jsx	(revision 5c20c64185ecffb14d2efb75c8120977f8a6bcec)
@@ -0,0 +1,83 @@
+import React from "react";
+
+export const Benefits = () => {
+  const benefits = [
+    {
+      number: "1",
+      title: "Unified tracking",
+      description:
+        "Stop jumping between 5+ different apps. Everything you need is in one place.",
+    },
+    {
+      number: "2",
+      title: "Real-time insights",
+      description:
+        "See your progress at a glance with clear dashboards and intuitive charts.",
+    },
+    {
+      number: "3",
+      title: "Goal-focused",
+      description:
+        "Set targets, log consistently, and watch trends emerge over time.",
+    },
+    {
+      number: "4",
+      title: "Built for habit stacking",
+      description:
+        "Track related areas and discover how fitness, finances, and discipline connect.",
+    },
+    {
+      number: "5",
+      title: "Data security",
+      description:
+        "Your personal metrics are encrypted and private. Only you control access.",
+    },
+    {
+      number: "6",
+      title: "Mobile-friendly",
+      description:
+        "Fully responsive design works seamlessly on phone, tablet, and desktop.",
+    },
+  ];
+
+  return (
+    <section id="benefits" className="px-[5%] py-16 md:py-24 lg:py-28">
+      <div className="container">
+        <div className="text-center mb-16 md:mb-20">
+          <p className="font-semibold text-sm md:text-base mb-3 md:mb-4">
+            Why Trekr
+          </p>
+          <h2 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">
+            Designed for serious progress
+          </h2>
+          <p className="max-w-2xl mx-auto text-base md:text-lg opacity-80">
+            We built Trekr for people who don't settle for half measures. If
+            consistency matters to you, Trekr makes it easier to stay on track.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
+          {benefits.map((benefit, index) => (
+            <div key={index} className="flex gap-4 md:gap-6">
+              <div className="flex-shrink-0">
+                <div className="flex items-center justify-center h-12 w-12 md:h-16 md:w-16 rounded-full bg-primary text-white font-bold text-lg md:text-xl">
+                  {benefit.number}
+                </div>
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg md:text-xl font-bold mb-2">
+                  {benefit.title}
+                </h3>
+                <p className="opacity-80 text-sm md:text-base">
+                  {benefit.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Benefits;
Index: frontend/src/pages/LandingPage/components/Features.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Features.jsx	(revision 5c20c64185ecffb14d2efb75c8120977f8a6bcec)
+++ frontend/src/pages/LandingPage/components/Features.jsx	(revision 5c20c64185ecffb14d2efb75c8120977f8a6bcec)
@@ -0,0 +1,83 @@
+import React from "react";
+
+export const Features = () => {
+  const features = [
+    {
+      icon: "🏋️",
+      title: "Fitness tracking",
+      description:
+        "Log workouts, stay consistent, and see your training trend over time.",
+    },
+    {
+      icon: "⚖️",
+      title: "Weight & nutrition",
+      description:
+        "Track daily weigh-ins and calories so you always know what’s working.",
+    },
+    {
+      icon: "💰",
+      title: "Budgeting",
+      description:
+        "Record income and expenses to stay on top of your money without spreadsheets.",
+    },
+    {
+      icon: "📈",
+      title: "Investments",
+      description:
+        "Monitor assets and returns to keep a clear view of your portfolio.",
+    },
+    {
+      icon: "✅",
+      title: "Daily discipline",
+      description:
+        "Turn intentions into habits with simple daily tasks and check-ins.",
+    },
+    {
+      icon: "📊",
+      title: "Insights",
+      description:
+        "See patterns across categories so you can make better decisions faster.",
+    },
+  ];
+
+  return (
+    <section
+      id="features"
+      className="px-[5%] py-16 md:py-24 lg:py-28 bg-base-200"
+    >
+      <div className="container">
+        <div className="text-center mb-16 md:mb-20">
+          <p className="font-semibold text-sm md:text-base mb-3 md:mb-4">
+            What you can track
+          </p>
+          <h2 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6">
+            Everything in one dashboard
+          </h2>
+          <p className="max-w-2xl mx-auto text-base md:text-lg opacity-80">
+            Trekr brings your health, habits, and money together, so you don’t
+            lose momentum switching tools.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="card bg-base-100 border border-base-300 hover:shadow-md transition-shadow"
+            >
+              <div className="card-body p-6 md:p-8">
+                <div className="text-4xl md:text-5xl mb-4">{feature.icon}</div>
+                <h3 className="text-xl md:text-2xl font-bold mb-3">
+                  {feature.title}
+                </h3>
+                <p className="opacity-80">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;