blixify-ui-web-mcp 0.1.1

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

@@ -0,0 +1,605 @@
+import { storiesOf } from "@storybook/react";
+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 { Container } from "../../structure/container";
+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");
+
+const stories = storiesOf("Template", module);
+
+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 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: "",
+  },
+  {
+    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: "",
+  },
+  {
+    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: "",
+  },
+];
+
+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.",
+  },
+  {
+    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.",
+  },
+  {
+    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.",
+  },
+];
+
+const HOW_IT_WORKS_STEPS = [
+  {
+    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>
+    ),
+  },
+  {
+    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>
+    ),
+  },
+  {
+    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>
+    ),
+  },
+];
+
+const FAQ_LIST = [
+  {
+    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.",
+  },
+  {
+    question: "What is the payback period?",
+    answer:
+      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+  },
+  {
+    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.",
+  },
+  {
+    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.",
+  },
+];
+
+const PRODUCT_CARDS: GridClass[] = [
+  {
+    id: "product-a",
+    title: "Solar PV System",
+    description: "Generate your own clean electricity",
+  },
+  {
+    id: "product-b",
+    title: "Solar + Battery Storage",
+    description: "Generate and store energy for round-the-clock savings",
+  },
+];
+
+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>
+      </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
+        </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>
+  ),
+};
+
+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>
+    );
+  });
+
+  return (
+    <div className="bg-white">
+      <Header
+        defaultNav="/"
+        page="Headphones"
+        logo={Logo}
+        navigation={[
+          { name: "Home", href: "#" },
+          { name: "Products", href: "#" },
+          { name: "Calculator", href: "#" },
+          { name: "About Us", href: "#" },
+        ]}
+        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>
+            ))}
+          </div>
+          <Button text="GET STARTED" type="normal" onClick={() => {}} />
+        </div>
+      </div>
+
+      <div id="use-case-section">
+        <Modal
+          open={videoModal}
+          renderContent={() => (
+            <iframe
+              width="100%"
+              height="500"
+              src={videoUrl}
+              title="Video"
+              allowFullScreen
+            />
+          )}
+          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>
+        </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"
+                />
+              </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>
+      </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
+            </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>
+          </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"
+          />
+        </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"
+          />
+          <Button
+            text="GET A FREE QUOTE"
+            type="light"
+            size="small"
+            onClick={() => {}}
+            className="mt-8 w-full sm:w-fit"
+          />
+        </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={() => {}}
+        />
+      </Container>
+
+      <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>
+        }
+      />
+    </div>
+  );
+});