blixify-ui-web-mcp 0.1.3 → 0.1.19

package/lib/components/template/userHomePage/userHomePage.stories.tsx

@@ -1,605 +1,465 @@
-import { storiesOf } from "@storybook/react";
+import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
+import {
+  ArrowDownTrayIcon,
+  ArrowPathIcon,
+  ArrowTrendingUpIcon,
+  BellIcon,
+  CheckCircleIcon,
+  FireIcon,
+  PlusIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
+import {
+  ChartBarIcon,
+  HomeIcon,
+  ListBulletIcon,
+  UserIcon,
+} from "@heroicons/react/24/solid";
 import React, { useState } from "react";
 import { Button } from "../../action/button";
-import { ActionSection } from "../../design/actionSection";
-import { FAQContent } from "../../design/faq";
-import { FooterSection } from "../../design/footerSection";
-import { GoogleReview } from "../../design/googleReview";
-import { IconList } from "../../design/iconList";
-import { Grid, GridClass } from "../../display/grid";
-import { Modal } from "../../display/modal";
-import { Select } from "../../input/select";
-import { TextInput } from "../../input/textInput";
+import { ButtonGroup } from "../../action/buttonGroup";
+import { AreaChart } from "../../chart/areaChart";
+import { Card } from "../../chart/card";
+import { Collapse } from "../../advanced/collapse";
 import { Container } from "../../structure/container";
+import { FooterSection } from "../../design/footerSection";
+import { BottomTab } from "../../navigation/bottomTab";
 import { Header } from "../../navigation/header";
-import "../../../index.css";
-import { Disclosure, Menu, Popover, Transition } from "@headlessui/react";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Logo = require("../../../assets/logo.png");
+import { NewList, NewListItem } from "../../display/newList";
+import { Progress } from "../../display/progress";
 
-const stories = storiesOf("Template", module);
+const meta = { title: "Template/App Home Page" };
+export default meta;
 
-const QUAL_ITEMS = [
-  {
-    title: "Own a Property",
-    desc: "Perfect, that means our service is a great fit.",
-    icon: (
-      <svg
-        className="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-        />
-      </svg>
-    ),
-  },
-  {
-    title: "Monthly Electricity Bill Over RM 200",
-    desc: "The higher your bill, the more you stand to save with solar.",
-    icon: (
-      <svg
-        className="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M13 10V3L4 14h7v7l9-11h-7z"
-        />
-      </svg>
-    ),
-  },
+
+const Logo = new URL("../../../assets/logo.png", import.meta.url).href;
+
+// ─── Sample data (domain-neutral) ───────────────────────────────────────────
+
+const TODAY = new Date();
+const fmtDate = TODAY.toLocaleDateString(undefined, {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+});
+
+const NAVIGATION = [
+  { name: "Home", href: "#" },
+  { name: "Activity", href: "#" },
+  { name: "Insights", href: "#" },
+  { name: "Settings", href: "#" },
 ];
 
-const USE_CASE_ITEMS = [
-  {
-    id: "user-1",
-    percentage: "90%",
-    imageSrc:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=facearea&facepad=2&w=400&h=300&q=80",
-    name: "Sarah Lim",
-    location: "Petaling Jaya, Selangor",
-    totalSaving: "RM 450/mo",
-    monthlySaving: "RM 45/mo",
-    videoUrl: "",
-  },
+const USER_NAV = [
+  { name: "Your profile", action: () => {} },
+  { name: "Sign out", action: () => {} },
+];
+
+const USER = {
+  name: "Louis Ong",
+  email: "louis@blixify.co",
+  image: Logo,
+};
+
+// INFO: BottomTab uses solid heroicons + href links. Mirrors the desktop
+// Header nav so mobile users get the same surface in thumb-reach.
+const BOTTOM_TABS = [
+  { icon: HomeIcon, title: "Home", href: "#" },
+  { icon: ChartBarIcon, title: "Insights", href: "#" },
+  { icon: ListBulletIcon, title: "Activity", href: "#" },
+  { icon: UserIcon, title: "Profile", href: "#" },
+];
+
+// INFO: FooterSection expects FooterList[] with title + subList. Mirrors
+// the header nav so signed-in users get the same surface in both places.
+const FOOTER_LIST = [
   {
-    id: "user-2",
-    percentage: "50%",
-    imageSrc:
-      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=2&w=400&h=300&q=80",
-    name: "Ahmad Razif",
-    location: "Johor Bahru, Johor",
-    totalSaving: "RM 320/mo",
-    monthlySaving: "RM 160/mo",
-    videoUrl: "",
+    title: "Navigate",
+    subList: NAVIGATION.map((n) => ({ name: n.name, link: n.href })),
   },
   {
-    id: "user-3",
-    percentage: "60%",
-    imageSrc:
-      "https://images.unsplash.com/photo-1550525811-e5869dd03032?auto=format&fit=facearea&facepad=2&w=400&h=300&q=80",
-    name: "Priya Nair",
-    location: "George Town, Penang",
-    totalSaving: "RM 380/mo",
-    monthlySaving: "RM 152/mo",
-    videoUrl: "",
+    title: "Account",
+    subList: [
+      { name: "Profile", link: "#" },
+      { name: "Sign out", link: "#" },
+    ],
   },
 ];
 
-const WHY_ITEMS = [
-  {
-    image:
-      "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?auto=format&fit=crop&w=128&h=128&q=80",
-    title: "Lorem ipsum dolor sit amet.",
-    desc: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.",
-  },
+const QUICK_ACTIONS = [
+  { id: "add", label: "Add entry", icon: PlusIcon },
+  { id: "new", label: "New record", icon: SparklesIcon },
+  { id: "sync", label: "Sync", icon: ArrowPathIcon },
+  { id: "export", label: "Export", icon: ArrowDownTrayIcon },
+];
+
+const KPI_TILES = [
   {
-    image:
-      "https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=128&h=128&q=80",
-    title: "Consectetur adipiscing elit.",
-    desc: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.",
+    title: "Streak",
+    count: 12,
+    unit: "days",
+    description: "Best: 24 days",
+    trend: "On track",
+    icon: FireIcon,
   },
   {
-    image:
-      "https://images.unsplash.com/photo-1505840717430-882ce147ef2d?auto=format&fit=crop&w=128&h=128&q=80",
-    title: "Ut enim ad minim veniam.",
-    desc: "Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute.",
+    title: "This Week",
+    count: 547,
+    unit: "pts",
+    description: "Mon — Sun",
+    trend: "+18% MoM",
+    icon: SparklesIcon,
   },
 ];
 
-const HOW_IT_WORKS_STEPS = [
+// INFO: 7-day trend for the area chart — 1 series, last 7 days
+const TREND_CATEGORIES = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const TREND_SERIES = [
+  { name: "Score", data: [62, 71, 65, 78, 74, 82, 82] },
+];
+
+// INFO: progress bars are visualisations (chart-adjacent), so they keep
+// distinct fill colours — but the palette is intentionally cohesive
+// (primary -> teal -> indigo) rather than the previous primary/emerald/amber
+// rainbow.
+const PROGRESS_BARS = [
   {
-    title: "Step 1: Get a Free Quote",
-    description:
-      "Fill in your details and we'll prepare a custom proposal for you.",
-    icon: (
-      <svg
-        className="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-        />
-      </svg>
-    ),
+    id: "p1",
+    label: "Goal A",
+    current: 6,
+    target: 8,
+    unit: "hrs",
+    fill: "bg-gradient-to-r from-primary-500 to-primary-400",
   },
   {
-    title: "Step 2: Professional Installation",
-    description: "Our certified team handles your request quickly and cleanly.",
-    icon: (
-      <svg
-        className="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-        />
-      </svg>
-    ),
+    id: "p2",
+    label: "Goal B",
+    current: 1850,
+    target: 2200,
+    unit: "kcal",
+    fill: "bg-gradient-to-r from-teal-500 to-teal-400",
   },
   {
-    title: "Step 3: Start Saving",
-    description: "Track your progress and savings directly in the app.",
-    icon: (
-      <svg
-        className="w-6 h-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-        />
-      </svg>
-    ),
+    id: "p3",
+    label: "Goal C",
+    current: 7200,
+    target: 10000,
+    unit: "steps",
+    fill: "bg-gradient-to-r from-indigo-500 to-indigo-400",
   },
 ];
 
-const FAQ_LIST = [
+// INFO: recent activity uses emoji as the avatar — replaces the previous
+// icon-with-coloured-background pattern. Emoji adds personality without the
+// visual noise of multiple coloured circles competing for attention.
+const RECENT_ITEMS: NewListItem[] = [
   {
-    question: "How does the system work?",
-    answer:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    id: "r1",
+    title: "Activity logged",
+    description: "Recorded 45 mins · 320 kcal",
+    icon: <span className="text-2xl">🏃</span>,
+    date: new Date(TODAY.getTime() - 1000 * 60 * 45),
   },
   {
-    question: "What is the payback period?",
-    answer:
-      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    id: "r2",
+    title: "Reminder dismissed",
+    description: "Daily check-in completed",
+    icon: <span className="text-2xl">🔔</span>,
+    date: new Date(TODAY.getTime() - 1000 * 60 * 60 * 2),
   },
   {
-    question: "How much do I need to invest?",
-    answer:
-      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    id: "r3",
+    title: "Entry created",
+    description: "Manual entry · 240 kcal",
+    icon: <span className="text-2xl">📝</span>,
+    date: new Date(TODAY.getTime() - 1000 * 60 * 60 * 4),
   },
   {
-    question: "By how much will my costs be reduced?",
-    answer:
-      "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    id: "r4",
+    title: "Sync completed",
+    description: "12 new items synced",
+    icon: <span className="text-2xl">🔄</span>,
+    date: new Date(TODAY.getTime() - 1000 * 60 * 60 * 6),
   },
 ];
 
-const PRODUCT_CARDS: GridClass[] = [
+const REMINDER_ITEMS: NewListItem[] = [
   {
-    id: "product-a",
-    title: "Solar PV System",
-    description: "Generate your own clean electricity",
+    id: "rm1",
+    title: "Weekly review",
+    description: "Schedule pending — Sun 9:00 AM",
+    icon: <span className="text-2xl">⏰</span>,
   },
   {
-    id: "product-b",
-    title: "Solar + Battery Storage",
-    description: "Generate and store energy for round-the-clock savings",
+    id: "rm2",
+    title: "Profile incomplete",
+    description: "Add your preferences to personalise recommendations",
+    icon: <span className="text-2xl">👤</span>,
   },
 ];
 
-const PRODUCT_GRID_ITEMS: { [id: string]: React.ReactElement } = {
-  "product-a": (
-    <div className="flex flex-col rounded-xl overflow-hidden shadow-md bg-white">
-      <img
-        src="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=600&h=300&q=80"
-        alt="Product A"
-        className="h-48 w-full object-cover"
-      />
-      <div className="p-6 flex flex-col gap-y-2">
-        <p className="text-lg font-semibold text-gray-900">Solar PV System</p>
-        <p className="text-sm text-gray-500">Model: Jinko Tiger Neo 580W</p>
-        <p className="text-sm text-gray-500">System Size: 8 kWp · 14 panels</p>
-        <p className="text-2xl font-bold text-primary-600 mt-2">
-          Save RM 280/mo
-        </p>
-        <span className="inline-block mt-1 px-3 py-1 bg-primary-100 text-primary-700 text-xs font-semibold rounded-full w-fit">
-          ~70% savings
-        </span>
+// ─── Inline sub-components ──────────────────────────────────────────────────
+
+// INFO: HeroCard keeps the primary->violet gradient — one decorative moment
+// at the top sets the tone, but everything below it standardises on
+// `primary` so the eye isn't pulled in 5 directions. Headers / heroes are
+// not interactive UI; the rule "interactive = primary only" still holds.
+const HeroCard = ({ name, streak }: { name: string; streak: number }) => (
+  <div className="relative mt-4 overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 via-primary-400 to-violet-500 p-5 text-white shadow-lg md:p-6">
+    <div className="pointer-events-none absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10 blur-2xl" />
+    <div className="pointer-events-none absolute -bottom-12 -left-8 h-32 w-32 rounded-full bg-white/10 blur-2xl" />
+    <div className="relative">
+      <p className="text-xs font-medium uppercase tracking-wide text-white/80">
+        {fmtDate}
+      </p>
+      <h1 className="mt-1 text-2xl font-bold md:text-3xl">
+        Good morning, {name} 👋
+      </h1>
+      <div className="mt-3 inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-1 text-xs font-semibold backdrop-blur">
+        <FireIcon className="h-3.5 w-3.5 text-white" />
+        <span>{streak} day streak — keep it going!</span>
       </div>
     </div>
-  ),
-  "product-b": (
-    <div className="flex flex-col rounded-xl overflow-hidden shadow-md bg-white">
-      <img
-        src="https://images.unsplash.com/photo-1466611653911-95081537e5b7?auto=format&fit=crop&w=600&h=300&q=80"
-        alt="Product B"
-        className="h-48 w-full object-cover"
-      />
-      <div className="p-6 flex flex-col gap-y-2">
-        <p className="text-lg font-semibold text-gray-900">
-          Solar + Battery Storage
-        </p>
-        <p className="text-sm text-gray-500">
-          Model: Jinko Tiger Neo 580W + Growatt 10kWh
-        </p>
-        <p className="text-sm text-gray-500">System Size: 10 kWp · 18 panels</p>
-        <p className="text-2xl font-bold text-primary-600 mt-2">
-          Save RM 380/mo
+  </div>
+);
+
+const ProgressBar = ({
+  label,
+  current,
+  target,
+  unit,
+  fill,
+}: {
+  label: string;
+  current: number;
+  target: number;
+  unit: string;
+  fill: string;
+}) => {
+  const pct = Math.min(100, Math.round((current / target) * 100));
+  const isComplete = pct >= 100;
+  return (
+    <div>
+      <div className="mb-1.5 flex items-baseline justify-between">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium text-gray-800">{label}</p>
+          {isComplete && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-[10px] font-bold uppercase text-primary-700">
+              <CheckCircleIcon className="h-3 w-3" />
+              Done
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-gray-500">
+          <span className="font-semibold text-gray-900">{current}</span>
+          {" / "}
+          {target} {unit}
         </p>
-        <span className="inline-block mt-1 px-3 py-1 bg-primary-100 text-primary-700 text-xs font-semibold rounded-full w-fit">
-          ~90% savings
-        </span>
+      </div>
+      <div className="h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
+        <div
+          className={`h-full rounded-full transition-all ${fill}`}
+          style={{ width: `${pct}%` }}
+        />
       </div>
     </div>
-  ),
+  );
 };
 
-stories.add("User Home Page", () => {
-  const [videoModal, setVideoModal] = useState(false);
-  const [videoUrl, setVideoUrl] = useState("");
-
-  const gridItems: GridClass[] = USE_CASE_ITEMS.map((item) => ({
-    id: item.id,
-    title: item.name,
-    description: item.location,
-    imageUrl: item.imageSrc,
-    extra: item,
-  }));
-
-  const customGridItems: { [id: string]: React.ReactElement } = {};
-  USE_CASE_ITEMS.forEach((item) => {
-    customGridItems[item.id] = (
-      <div className="w-72 h-full flex flex-col rounded-3xl shadow-lg overflow-hidden lg:w-full hover:shadow-xl">
-        <img
-          src={item.imageSrc}
-          alt={item.name}
-          className="h-48 object-cover rounded-t-3xl"
-        />
-        <div className="-mt-6 p-6 bg-primary-900 text-white">
-          <h1 className="text-5xl font-bold">{item.percentage}</h1>
-          <p>reduction in bill</p>
-          <p className="text-primary-300 text-xl font-semibold">
-            From {item.totalSaving} to {item.monthlySaving}
-          </p>
-          <div className="mt-8 flex justify-between items-center">
-            <div className="text-sm text-gray-300">
-              <p>{item.name}</p>
-              <p>{item.location}</p>
-            </div>
-            {item.videoUrl && (
-              <button
-                onClick={() => {
-                  setVideoUrl(item.videoUrl!);
-                  setVideoModal(true);
-                }}
-                className="text-primary-300 hover:text-white"
-              >
-                <svg
-                  className="w-8 h-8"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  });
+const TrendChip = ({ text }: { text: string }) => (
+  <div className="inline-flex items-center gap-1 text-xs font-medium text-primary-600">
+    <ArrowTrendingUpIcon className="h-3.5 w-3.5" />
+    <span>{text}</span>
+  </div>
+);
+
+// ─── Story ─────────────────────────────────────────────────────────────────
+
+export const AppHomePage = () => {
+  const [activeAction, setActiveAction] = useState<string | null>(null);
 
   return (
-    <div className="bg-white">
+    <div className="min-h-screen bg-gray-50">
+      {/* HEADER — sticky top nav with logo, links, avatar */}
       <Header
         defaultNav="/"
-        page="Headphones"
+        page="Home"
         logo={Logo}
-        navigation={[
-          { name: "Home", href: "#" },
-          { name: "Products", href: "#" },
-          { name: "Calculator", href: "#" },
-          { name: "About Us", href: "#" },
-        ]}
+        navigation={NAVIGATION}
+        userNavigation={USER_NAV}
+        user={USER}
         lib={{ Disclosure, Menu, Transition, Popover }}
       />
-      <div
-        className="relative h-screen bg-cover bg-top"
-        style={{
-          backgroundImage:
-            "url(https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=1920&q=80)",
-        }}
-      >
-        <div className="absolute inset-0 bg-black/40 z-0" />
-        <div className="relative z-10 h-full flex flex-col items-center justify-center text-center px-4">
-          <p className="mb-4 text-xl font-medium text-primary-200 sm:text-2xl md:text-3xl">
-            Malaysia's Leading Solar Energy Provider
-          </p>
-          <h1 className="text-3xl font-bold text-white mb-8 max-w-3xl md:text-5xl">
-            Cut Your Electricity Bill by Up to 90%
-          </h1>
-          <div className="mb-6 text-lg text-gray-200 max-w-xl">
-            {[
-              "How much can I save by switching to solar?",
-              "What is the payback period for solar panels?",
-              "How do I get started with solar installation?",
-            ].map((q, i) => (
-              <p key={i} className="mb-1 italic">
-                "{q}"
-              </p>
-            ))}
+
+      <Container bgColor="bg-gray-50" className="pb-28">
+        <HeroCard name="Louis" streak={12} />
+
+        {/* Quick actions — selectable pill group via ButtonGroup */}
+        <ButtonGroup
+          containerClassName="mt-4"
+          variant="pill"
+          selectedId={activeAction}
+          onClick={(id) => setActiveAction(id)}
+          selection={QUICK_ACTIONS.map((a) => {
+            const Icon = a.icon;
+            const isActive = activeAction === a.id;
+            return {
+              id: a.id,
+              name: a.label,
+              icon: (
+                <Icon
+                  className={`h-4 w-4 ${
+                    isActive ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            };
+          })}
+        />
+
+        {/* Score + KPI tiles — mobile: Score spans both columns then
+            Streak + This Week share a row. Desktop (md+): all three sit
+            in a single 3-col row so the score tile no longer floats in
+            ~1200px of empty space. */}
+        <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
+          <div className="col-span-2 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm md:col-span-1">
+            <div className="flex items-baseline justify-between">
+              <p className="text-sm font-medium text-gray-500">Today's Score</p>
+              <TrendChip text="+5 vs yesterday" />
+            </div>
+            <div className="mt-1 flex items-baseline gap-1">
+              <p className="text-4xl font-bold text-gray-900">82</p>
+              <p className="text-lg font-medium text-gray-400">/100</p>
+            </div>
+            <div className="mt-3">
+              <Progress percentage={82} />
+            </div>
           </div>
-          <Button text="GET STARTED" type="normal" onClick={() => {}} />
+          {KPI_TILES.map((kpi) => {
+            const Icon = kpi.icon;
+            return (
+              <Card
+                key={kpi.title}
+                size="compact"
+                icon={<Icon className="h-4 w-4 text-primary-600" />}
+                iconBgColor="bg-primary-100"
+                title={kpi.title}
+                count={kpi.count}
+                unit={kpi.unit}
+                description={kpi.description}
+                subContent={<TrendChip text={kpi.trend} />}
+              />
+            );
+          })}
         </div>
-      </div>
 
-      <div id="use-case-section">
-        <Modal
-          open={videoModal}
-          renderContent={() => (
-            <iframe
-              width="100%"
-              height="500"
-              src={videoUrl}
-              title="Video"
-              allowFullScreen
+        {/* TREND CHART — single focal data viz, compact at ~200px */}
+        <div className="mt-3">
+          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
+            <AreaChart
+              title="Last 7 days"
+              categories={TREND_CATEGORIES}
+              stackedAreaSeries={TREND_SERIES}
+              chartSize={200}
+              showToolbar={false}
             />
-          )}
-          onClose={() => setVideoModal(false)}
-          maxWidth="4xl"
-        />
-        <Container className="pb-20 pt-10">
-          <div className="flex flex-col justify-center items-center text-center">
-            <h1 className="text-xl md:text-3xl">If you meet both criteria,</h1>
-            <h1 className="text-3xl font-semibold text-primary-800 md:text-5xl md:mt-2">
-              You are a qualified applicant!
-            </h1>
           </div>
-          <div className="mt-8 flex flex-col gap-y-4 md:flex-row md:gap-x-8">
-            {QUAL_ITEMS.map((item, i) => (
-              <div
-                key={i}
-                className="p-6 flex flex-1 gap-x-4 items-start bg-white rounded-xl shadow-lg hover:shadow-xl md:p-10"
-              >
-                <div className="h-fit flex-shrink-0 text-primary-600">
-                  {item.icon}
-                </div>
-                <div className="flex flex-col gap-y-1">
-                  <p className="text-xl font-medium leading-none lg:text-2xl">
-                    {item.title}
-                  </p>
-                  <p className="text-sm text-gray-500 lg:text-base">
-                    {item.desc}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="mt-14">
-            <Grid
-              data={gridItems}
-              hidePagination
-              loading={false}
-              customGridItems={customGridItems}
-              itemClassName="mb-5 !bg-gray-50 shadow-none w-full"
-              gridColClassName="mb-0 gap-6 grid-cols-1 sm:grid-cols-3 md:gap-8"
-              horizontalScroll
+        </div>
+
+        {/* Today's progress + Reminders — stacked on mobile, side-by-side
+            on desktop (md+) so each section gets ~50% of the row instead
+            of stretching its single goal bar across the full container. */}
+        <div className="mt-4 grid gap-4 md:grid-cols-2">
+          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
+            <Collapse
+              title="Today's progress"
+              summary={`${PROGRESS_BARS.length} goals`}
+              defaultOpen
+              icon={<CheckCircleIcon className="h-5 w-5 text-primary-500" />}
+              contentClassName="space-y-4 px-4 py-4"
+              content={
+                <>
+                  {PROGRESS_BARS.map((p) => (
+                    <ProgressBar key={p.id} {...p} />
+                  ))}
+                </>
+              }
             />
           </div>
-        </Container>
-      </div>
 
-      <Container bgColor="bg-gray-100" className="py-16">
-        <h2 className="text-3xl font-semibold text-primary-800 text-center md:text-5xl">
-          Why Choose Us?
-        </h2>
-        <div className="my-14 gap-y-6 grid sm:grid-cols-2 sm:gap-x-6 md:mt-20 lg:grid-cols-3 lg:gap-x-8">
-          {WHY_ITEMS.map((item, i) => (
-            <div key={i}>
-              <div className="justify-center flex">
-                <img
-                  src={item.image}
-                  alt={item.title}
-                  className="mb-6 w-20 h-20 rounded-full object-cover md:mb-8 md:w-32 md:h-32"
+          {/* Reminders — Modern Mobile pattern from Collapse stories: bold
+              3-stop primary gradient on collapseContainerCss + notCollapse
+              ContainerCss (the container bg). White contentClassName covers
+              the body when expanded, so the gradient only shows on the
+              header bar. White title text + primary-50 summary read cleanly
+              on the gradient. */}
+          <div className="overflow-hidden rounded-2xl shadow-md">
+            <Collapse
+              title="Reminders"
+              summary={`${REMINDER_ITEMS.length} pending`}
+              defaultOpen
+              icon={<BellIcon className="h-5 w-5 text-white" />}
+              collapseContainerCss="bg-gradient-to-br from-primary-500 via-primary-400 to-violet-500 !border-0"
+              notCollapseContainerCss="bg-gradient-to-br from-primary-500 via-primary-400 to-violet-500"
+              titleClassName="text-white text-base font-semibold"
+              summaryClassName="text-primary-50"
+              iconClassName="w-5 h-5 text-white"
+              contentClassName="p-0 bg-white border-t border-primary-100"
+              content={
+                <NewList
+                  list={REMINDER_ITEMS}
+                  className="rounded-none border-0 shadow-none"
                 />
-              </div>
-              <p className="mb-2 text-xl text-primary-800 text-center font-medium md:text-2xl">
-                {item.title}
-              </p>
-              <p className="text-sm text-center md:text-base">{item.desc}</p>
-            </div>
-          ))}
+              }
+            />
+          </div>
         </div>
-      </Container>
 
-      <div id="calculator-section">
-        <Container bgColor="bg-white" className="py-14">
-          <div className="text-center mb-10">
-            <h2 className="text-3xl font-semibold text-primary-800 md:text-5xl">
-              Solar Savings Calculator
+        {/* Recent activity — emoji avatars. Full width on desktop to match
+            the Progress/Reminders row above. */}
+        <div className="mt-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-sm font-bold uppercase tracking-wide text-gray-500">
+              Recent activity
             </h2>
-            <p className="mt-3 text-gray-500 text-base">
-              Estimate your savings based on your property and usage details.
-            </p>
-          </div>
-          <div className="bg-primary-900 rounded-xl px-8 py-5 mb-8">
-            <p className="text-white font-semibold text-lg">
-              Let Us Know Your Details
-            </p>
+            <button
+              type="button"
+              className="text-xs font-semibold text-primary-600 hover:text-primary-700"
+            >
+              View all →
+            </button>
           </div>
-          <p className="text-sm font-semibold text-gray-700 mb-4 uppercase tracking-wide">
-            B. Property Details
-          </p>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <Select
-              label="Roof Type"
-              value="option-a"
-              options={[
-                { key: "option-a", label: "Flat Roof" },
-                { key: "option-b", label: "Pitched Roof" },
-                { key: "option-c", label: "Metal Roof" },
-              ]}
-            />
-            <Select
-              label="Electricity Tariff"
-              value="option-a"
-              options={[
-                { key: "option-a", label: "Residential (TNB)" },
-                { key: "option-b", label: "Commercial (TNB)" },
-                { key: "option-c", label: "Industrial (TNB)" },
-              ]}
-            />
-            <Select
-              label="Grid Connection"
-              value="option-a"
-              options={[
-                { key: "option-a", label: "Single Phase" },
-                { key: "option-b", label: "Three Phase" },
-              ]}
-            />
-            <TextInput
-              label="Monthly Bill (RM)"
-              type="number"
-              value="500"
-              placeholder="e.g. 500"
-            />
-          </div>
-          <div className="mt-12 mb-4 text-center">
-            <h3 className="text-2xl font-semibold text-primary-800 md:text-3xl">
-              Comparison between Solar PV System and Solar + Battery Storage
-            </h3>
-            <p className="mt-2 text-gray-500 text-sm">
-              Based on your inputs, here are the recommended options for you.
-            </p>
-          </div>
-          <Grid
-            data={PRODUCT_CARDS}
-            loading={false}
-            hidePagination
-            customGridItems={PRODUCT_GRID_ITEMS}
-            itemClassName="!bg-gray-50 shadow-none"
-            gridColClassName="gap-6 grid-cols-1 sm:grid-cols-2"
-          />
-        </Container>
-      </div>
-
-      <div className="w-full flex flex-col bg-primary-900 lg:flex-row">
-        <div className="hidden overflow-hidden lg:w-1/2 lg:block">
-          <img
-            src="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=800&q=80"
-            alt="how it works"
-            className="w-full h-full object-cover"
-          />
+          <NewList list={RECENT_ITEMS} />
         </div>
-        <div className="w-full flex flex-col justify-center text-white p-8 md:p-14 lg:w-1/2">
-          <h1 className="text-2xl font-semibold mb-8 sm:text-3xl md:text-4xl">
-            How it works
-          </h1>
-          <IconList
-            iconList={HOW_IT_WORKS_STEPS.map((step) => ({
-              name: step.title,
-              content: step.description,
-              icon: step.icon,
-            }))}
-            className="text-white [&_p]:text-white [&_dd]:text-gray-200"
-          />
+
+        {/* Bottom CTA — Button (type="normal" -> primary-500) */}
+        <div className="mt-6 md:mx-auto md:max-w-xs">
           <Button
-            text="GET A FREE QUOTE"
-            type="light"
-            size="small"
-            onClick={() => {}}
-            className="mt-8 w-full sm:w-fit"
+            type="normal"
+            text="Get more insights"
+            icon={<SparklesIcon className="h-4 w-4" />}
           />
         </div>
-      </div>
-
-      <Container bgColor="bg-gray-50" className="py-14">
-        <h2 className="mb-14 text-3xl font-semibold text-primary-800 text-center md:text-5xl">
-          Frequently Asked Questions (FAQ)
-        </h2>
-        <div className="bg-white rounded-3xl text-primary-900 shadow-xl">
-          <FAQContent faqList={FAQ_LIST} />
-        </div>
       </Container>
 
-      <Container bgColor="bg-white" className="py-10">
-        <h2 className="text-3xl font-semibold text-primary-800 text-center md:text-5xl">
-          See what our customers say about us!
-        </h2>
-        <div className="mt-10">
-          <GoogleReview placeId="" minRatingScore={4} />
-        </div>
-      </Container>
-
-      <Container bgColor="bg-white" className="py-10">
-        <ActionSection
-          title="Interested to save money? Switch today!"
-          buttonText="GET A FREE QUOTE"
-          backgroundImgSrc="https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=1920&q=80"
-          backgroundImgStyle={{ bgPosition: "bottom" }}
-          onClick={() => {}}
+      {/* DESKTOP FOOTER — UI Web FooterSection. Hidden on mobile;
+          BottomTab handles thumb-reach nav there. */}
+      <div className="hidden md:block">
+        <FooterSection
+          caption={`© ${TODAY.getFullYear()} Blixify. All rights reserved.`}
+          footerList={FOOTER_LIST}
         />
-      </Container>
+      </div>
 
-      <FooterSection
-        linkType="external"
-        caption={`© ${new Date().getFullYear()} SolarSave. All rights reserved.`}
-        footerList={[
-          {
-            title: "SolarSave",
-            subList: [
-              { name: "About Us", link: "/about" },
-              { name: "How It Works", link: "/how-it-works" },
-              { name: "Terms & Conditions", link: "/terms" },
-              { name: "Privacy Policy", link: "/privacy" },
-            ],
-          },
-          {
-            title: "My Account",
-            subList: [
-              { name: "Sign In", link: "/signIn" },
-              { name: "FAQ", link: "/faq" },
-            ],
-          },
-        ]}
-        logoCloud={
-          <div>
-            <div className="flex items-center space-x-2 mb-3">
-              <span className="font-semibold text-gray-900">SolarSave</span>
-            </div>
-            <p className="text-sm text-gray-500">
-              Lorem ipsum dolor sit amet consectetur adipiscing elit.
-            </p>
-          </div>
-        }
-      />
+      {/* MOBILE BOTTOM TAB — only on < md. On desktop the footer above
+          handles secondary nav; bottom tab would duplicate the header. */}
+      <div className="md:hidden">
+        <BottomTab
+          tabData={BOTTOM_TABS}
+          selectedTab="Home"
+          bottomTabClassName="fixed bottom-0 left-0 right-0 shadow-lg"
+        />
+      </div>
     </div>
   );
-});
+};