Changeset 42da64d for frontend/src/pages/LandingPage/components

Timestamp:

05/13/26 00:35:13 (8 weeks ago)

Author:

Andrej <asumanovski@…>

Branches:

master

Children:

447c39f

Parents:

a8381b1

Message:

Fixed auth issue

Location:

frontend/src/pages/LandingPage/components

Files:

• Benefits.jsx (modified) (1 diff)
• Faq.defaults.js (added)
• Faq.jsx (modified) (5 diffs)
• Features.jsx (modified) (1 diff)
• Footer.jsx (modified) (1 diff)
• Hero.jsx (modified) (3 diffs)
• HowItWorks.defaults.js (added)
• HowItWorks.defaults.jsx (added)
• HowItWorks.jsx (modified) (4 diffs)
• NavbarLanding.jsx (modified) (4 diffs)
• Who.defaults.jsx (added)
• Who.jsx (modified) (3 diffs)

frontend/src/pages/LandingPage/components/Benefits.jsx

@@ -43 +43 @@
   return (
     <section id="benefits" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <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">
+          <h2 className="font-bold mb-6 text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Designed for serious progress
           </h2>

frontend/src/pages/LandingPage/components/Faq.jsx

@@ -6 +6 @@
   AccordionTrigger,
 } from "@relume_io/relume-ui";
+
+import { FaqDefaults } from "./Faq.defaults";
 
 export const Faq = (props) => {
@@ -16 +18 @@
     button,
   } = {
-    ...Faq1Defaults,
+    ...FaqDefaults,
     ...props,
   };
@@ -24 +26 @@
       className="px-[5%] py-16 md:py-24 lg:py-28 flex items-center justify-center"
     >
-      <div className="container max-w-lg">
+      <div className="mx-auto w-full max-w-2xl">
         <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">
+          <h2 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
             {heading}
           </h2>
-          <p className="md:text-md">{description}</p>
+          <p className="text-sm sm:text-base md:text-lg opacity-80">
+            {description}
+          </p>
         </div>
         <Accordion type="multiple">
@@ -47 +51 @@
             {footerHeading}
           </h4>
-          <p className="md:text-md">{footerDescription}</p>
+          <p className="text-sm sm:text-base md:text-lg opacity-80">
+            {footerDescription}
+          </p>
           <div className="mt-6 md:mt-8">
             <Button {...button}>{button.title}</Button>
@@ -56 +62 @@
   );
 };
-
-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",
-  },
-};

frontend/src/pages/LandingPage/components/Features.jsx

@@ -46 +46 @@
       className="px-[5%] py-16 md:py-24 lg:py-28 bg-base-200"
     >
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <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">
+          <h2 className="font-bold mb-6 text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Everything in one dashboard
           </h2>

frontend/src/pages/LandingPage/components/Footer.jsx

@@ -4 +4 @@
 const Footer = () => {
   return (
-    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-10">
+    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-8 sm:p-10">
       <aside>
         <img src={logo} alt="Trekr" className="h-10 w-auto" />

frontend/src/pages/LandingPage/components/Hero.jsx

@@ -19 +19 @@
   return (
     <div
-      className="hero min-h-screen"
+      className="hero min-h-[calc(100vh-4rem)] bg-cover bg-center"
       style={{
         backgroundImage:
@@ -26 +26 @@
     >
       <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">
+      <div className="hero-content text-neutral-content text-center px-4 py-16 sm:py-24">
+        <div className="w-full max-w-2xl">
+          <h1 className="mb-5 font-bold text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight">
             Trekr — track progress, every day
           </h1>
-          <p className="mb-5">
+          <p className="mb-6 text-sm sm:text-base md:text-lg opacity-90">
             One self-improvement hub: workouts, weight & nutrition, finances &
             budgeting, investing, and daily discipline tasks. Set goals, log
@@ -37 +37 @@
           </p>
           <Link
-            className="btn btn-primary !text-white"
+            className="btn btn-primary !text-white btn-sm sm:btn-md md:btn-lg"
             to={isAuthed ? "/dashboard" : "/register"}
           >

frontend/src/pages/LandingPage/components/HowItWorks.jsx

@@ -1 +1 @@
 import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
+import { HowItWorksDefaults } from "./HowItWorks.defaults.jsx";
 
 export const HowItWorks = (props) => {
@@ -9 +9 @@
   return (
     <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <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>
+          <div className="text-center md:text-left">
             <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">
+            <h1 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
               {heading}
             </h1>
-            <p className="md:text-md">{description}</p>
+            <p className="text-sm sm:text-base md:text-lg opacity-80">
+              {description}
+            </p>
             <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
               {buttons.map((button, index) => (
@@ -28 +30 @@
             <img
               src={image.src}
-              className="w-full object-cover"
+              className="w-full rounded-2xl object-cover"
               alt={image.alt}
             />
@@ -38 +40 @@
 };
 
-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",
-  },
-};
+

frontend/src/pages/LandingPage/components/NavbarLanding.jsx

@@ -27 +27 @@
 
   return (
-    <div className="navbar bg-primary text-primary-content shadow-sm">
-      <div className="navbar-start">
+    <div className="navbar bg-primary text-primary-content shadow-sm px-4 sm:px-6">
+      <div className="navbar-start flex-1 min-w-0">
         <Link
           className="btn btn-ghost text-primary-content"
@@ -37 +37 @@
         </Link>
       </div>
-      <div className="navbar-end">
+      <div className="navbar-end flex-none">
         {isAuthed ? (
-          <div className="flex items-center gap-2 mr-6">
+          <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
             <Link
-              className="btn btn-outline border-primary-content text-primary-content"
+              className="btn btn-sm sm:btn-md btn-outline border-primary-content text-primary-content"
               to="/dashboard"
             >
@@ -47 +47 @@
             </Link>
             <button
-              className="btn btn-outline border-primary-content text-primary-content"
+              className="btn btn-sm sm:btn-md btn-outline border-primary-content text-primary-content"
               onClick={onLogout}
             >
@@ -55 +55 @@
         ) : (
           <Link
-            className="btn btn-tertiary text-blue-200! px-8 mr-6"
+            className="btn btn-sm sm:btn-md btn-tertiary text-blue-200! px-6 sm:px-8"
             to="/login"
           >

frontend/src/pages/LandingPage/components/Who.jsx

@@ -1 +1 @@
 import { Button } from "@relume_io/relume-ui";
-import { RxChevronRight } from "react-icons/rx";
+import { WhoDefaults } from "./Who.defaults.jsx";
 
 export const Who = (props) => {
@@ -9 +9 @@
   return (
     <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
-      <div className="container">
+      <div className="mx-auto w-full max-w-6xl">
         <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"
+              className="w-full rounded-2xl object-cover"
               alt={image.alt}
             />
           </div>
-          <div className="order-1 lg:order-2">
+          <div className="order-1 lg:order-2 text-center md:text-left">
             <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">
+            <h2 className="rb-5 mb-5 font-bold text-4xl sm:text-5xl md:mb-6 md:text-6xl lg:text-7xl leading-tight">
               {heading}
             </h2>
-            <p className="md:text-md">{description}</p>
+            <p className="text-sm sm:text-base md:text-lg opacity-80">
+              {description}
+            </p>
             <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
               {buttons.map((button, index) => (
@@ -38 +40 @@
 };
 
-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",
-  },
-};