Index: frontend/src/pages/LandingPage.jsx
===================================================================
--- frontend/src/pages/LandingPage.jsx	(revision a98dbb7b453f5efb3247344068788ff433d8dd90)
+++ 	(revision )
@@ -1,16 +1,0 @@
-export default function LandingPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center p-8">
-      <div className="w-full max-w-md rounded-xl border p-6 text-center">
-        <h1 className="text-2xl font-semibold">Landing Page</h1>
-        <p className="mt-2 text-sm opacity-80">
-          Tailwind is wired up — replace this with real content.
-        </p>
-        <div className="mt-6 grid grid-cols-2 gap-3">
-          <div className="h-10 rounded-md bg-black/10" />
-          <div className="h-10 rounded-md bg-black/10" />
-        </div>
-      </div>
-    </div>
-  );
-}
Index: frontend/src/pages/LandingPage/LandingPage.jsx
===================================================================
--- frontend/src/pages/LandingPage/LandingPage.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/LandingPage.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,22 @@
+import React from "react";
+import NavbarLanding from "./components/NavbarLanding";
+import Hero from "./components/Hero";
+import Footer from "./components/Footer";
+import { Faq } from "./components/Faq";
+import { HowItWorks } from "./components/HowItWorks";
+import { Who } from "./components/Who";
+
+const LandingPage = () => {
+  return (
+    <div data-theme="forest" className="min-h-screen w-full overflow-x-hidden">
+      <NavbarLanding />
+      <Hero />
+      <HowItWorks />
+      <Who />
+      <Faq />
+      <Footer />
+    </div>
+  );
+};
+
+export default LandingPage;
Index: frontend/src/pages/LandingPage/components/Faq.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Faq.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/Faq.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,96 @@
+import {
+  Button,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@relume_io/relume-ui";
+
+export const Faq = (props) => {
+  const {
+    heading,
+    description,
+    questions,
+    footerHeading,
+    footerDescription,
+    button,
+  } = {
+    ...Faq1Defaults,
+    ...props,
+  };
+  return (
+    <section
+      id="relume"
+      className="px-[5%] py-16 md:py-24 lg:py-28 flex items-center justify-center"
+    >
+      <div className="container max-w-lg">
+        <div className="rb-12 mb-12 text-center md:mb-18 lg:mb-20">
+          <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+            {heading}
+          </h2>
+          <p className="md:text-md">{description}</p>
+        </div>
+        <Accordion type="multiple">
+          {questions.map((question, index) => (
+            <AccordionItem key={index} value={`item-${index}`}>
+              <AccordionTrigger className="md:py-5 md:text-md">
+                {question.title}
+              </AccordionTrigger>
+              <AccordionContent className="md:pb-6">
+                {question.answer}
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+        <div className="mx-auto mt-12 max-w-md text-center md:mt-18 lg:mt-20">
+          <h4 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:leading-[1.3] lg:text-4xl">
+            {footerHeading}
+          </h4>
+          <p className="md:text-md">{footerDescription}</p>
+          <div className="mt-6 md:mt-8">
+            <Button {...button}>{button.title}</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const Faq1Defaults = {
+  heading: "Frequently asked questions",
+  description:
+    "Quick answers on how Trekr helps you track self-improvement across multiple areas — in one place.",
+  questions: [
+    {
+      title: "What can I track in Trekr?",
+      answer:
+        "Workouts (type and duration), weight & nutrition (goal, calories), finances & budgeting (income and expenses), investing (portfolio and returns), and discipline (daily tasks you can check off).",
+    },
+    {
+      title: "Do I need multiple apps to do all this?",
+      answer:
+        "No — Trekr is designed to unify the most important self-improvement categories so you can get a clear overview without switching between tools.",
+    },
+    {
+      title: "How do goals and progress tracking work?",
+      answer:
+        "You set a goal (for example: target weight or monthly budget), then log daily/weekly data. Trekr helps you see where you are vs. the goal and how you're trending over time.",
+    },
+    {
+      title: "Where is my data stored?",
+      answer:
+        "Your entries are stored in a database and linked to your user profile so you can track progress consistently over time.",
+    },
+    {
+      title: "Is Trekr a mobile app?",
+      answer:
+        "Right now Trekr is a web app. The goal is a fast, simple experience on both mobile and desktop in the browser.",
+    },
+  ],
+  footerHeading: "Still have questions?",
+  footerDescription: "Send us a message and we’ll help you get started.",
+  button: {
+    title: "Contact",
+    variant: "secondary",
+  },
+};
Index: frontend/src/pages/LandingPage/components/Footer.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Footer.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/Footer.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,53 @@
+import React from "react";
+import logo from "../../../assets/logo.png";
+
+const Footer = () => {
+  return (
+    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-10">
+      <aside>
+        <img src={logo} alt="Trekr" className="h-10 w-auto" />
+        <p>Track self-improvement progress — in one place.</p>
+      </aside>
+      <nav>
+        <h6 className="footer-title">Social</h6>
+        <div className="grid grid-flow-col gap-4">
+          <a>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
+            </svg>
+          </a>
+          <a>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
+            </svg>
+          </a>
+          <a>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="fill-current"
+            >
+              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
+            </svg>
+          </a>
+        </div>
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;
Index: frontend/src/pages/LandingPage/components/Hero.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Hero.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/Hero.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,30 @@
+import React from "react";
+
+const Hero = () => {
+  return (
+    <div
+      className="hero min-h-screen"
+      style={{
+        backgroundImage:
+          "url(https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1920&q=80)",
+      }}
+    >
+      <div className="hero-overlay"></div>
+      <div className="hero-content text-neutral-content text-center">
+        <div className="max-w-md">
+          <h1 className="mb-5 text-5xl font-bold">
+            Trekr — track progress, every day
+          </h1>
+          <p className="mb-5">
+            One self-improvement hub: workouts, weight & nutrition, finances &
+            budgeting, investing, and daily discipline tasks. Set goals, log
+            consistently, and see your progress in one place.
+          </p>
+          <button className="btn btn-primary">Get started</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
Index: frontend/src/pages/LandingPage/components/HowItWorks.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/HowItWorks.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/HowItWorks.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,58 @@
+import { Button } from "@relume_io/relume-ui";
+import { RxChevronRight } from "react-icons/rx";
+
+export const HowItWorks = (props) => {
+  const { tagline, heading, description, buttons, image } = {
+    ...HowItWorksDefaults,
+    ...props,
+  };
+  return (
+    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
+      <div className="container">
+        <div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20">
+          <div>
+            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
+            <h1 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+              {heading}
+            </h1>
+            <p className="md:text-md">{description}</p>
+            <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
+              {buttons.map((button, index) => (
+                <Button key={index} {...button}>
+                  {button.title}
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <img
+              src={image.src}
+              className="w-full object-cover"
+              alt={image.alt}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const HowItWorksDefaults = {
+  tagline: "How it works",
+  heading: "Log it. Track it. Improve it.",
+  description:
+    "Log what matters to your goals — workouts, weight/calories, budgets, investments, and daily tasks. Trekr gives you a clear view of trends over time so you can stay consistent and keep moving forward.",
+  buttons: [
+    { title: "Start free", variant: "secondary" },
+    {
+      title: "See a quick overview",
+      variant: "link",
+      size: "link",
+      iconRight: <RxChevronRight />,
+    },
+  ],
+  image: {
+    src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80",
+    alt: "Progress and goals overview on a laptop",
+  },
+};
Index: frontend/src/pages/LandingPage/components/NavbarLanding.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/NavbarLanding.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/NavbarLanding.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,21 @@
+import React from "react";
+import logo from "../../../assets/logo.png";
+
+const NavbarLanding = () => {
+  return (
+    <div className="navbar bg-neutral shadow-sm">
+      <div className="navbar-start">
+        <a className="btn btn-ghost" aria-label="Trekr home">
+          <img src={logo} alt="Trekr" className="h-12 w-auto rounded-2xl" />
+        </a>
+      </div>
+      <div className="navbar-end">
+        <button className="btn bg-black text-green-200 border-black hover:bg-black/90 hover:border-black px-8 mr-6">
+          Start Tracking
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NavbarLanding;
Index: frontend/src/pages/LandingPage/components/Who.jsx
===================================================================
--- frontend/src/pages/LandingPage/components/Who.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
+++ frontend/src/pages/LandingPage/components/Who.jsx	(revision 793ce2c999fddd728a9a4f772ab13cc20b8c9914)
@@ -0,0 +1,58 @@
+import { Button } from "@relume_io/relume-ui";
+import { RxChevronRight } from "react-icons/rx";
+
+export const Who = (props) => {
+  const { tagline, heading, description, buttons, image } = {
+    ...WhoDefaults,
+    ...props,
+  };
+  return (
+    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
+      <div className="container">
+        <div className="grid grid-cols-1 gap-y-12 md:grid-cols-2 md:items-center md:gap-x-12 lg:gap-x-20">
+          <div className="order-2 md:order-1">
+            <img
+              src={image.src}
+              className="w-full object-cover"
+              alt={image.alt}
+            />
+          </div>
+          <div className="order-1 lg:order-2">
+            <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
+            <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
+              {heading}
+            </h2>
+            <p className="md:text-md">{description}</p>
+            <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
+              {buttons.map((button, index) => (
+                <Button key={index} {...button}>
+                  {button.title}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export const WhoDefaults = {
+  tagline: "Who it's for",
+  heading: "Anyone working on themselves",
+  description:
+    "Whether you're training regularly, trying to manage weight and nutrition, organizing your budget, tracking investments, or building discipline — Trekr brings your key habits and metrics together in one place.",
+  buttons: [
+    { title: "Create an account", variant: "secondary" },
+    {
+      title: "Learn more",
+      variant: "link",
+      size: "link",
+      iconRight: <RxChevronRight />,
+    },
+  ],
+  image: {
+    src: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?auto=format&fit=crop&w=1600&q=80",
+    alt: "Planning habits and routine",
+  },
+};