Merge pull request #16 from jatimdevday/feat-ticket

Feat ticket
jatimdevday · Sep 26, 2024 · 5b0a6d0 · 5b0a6d0
2 parents 6067b70 + d9faf3d
commit 5b0a6d0
Show file tree

Hide file tree

Showing 5 changed files with 280 additions and 2 deletions.
diff --git a/src/assets/svgs/CheckIcon.tsx b/src/assets/svgs/CheckIcon.tsx
@@ -0,0 +1,9 @@
+const CheckIcon = (props: {fill?: string}) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 10C0.25 4.615 4.615 0.25 10 0.25C15.385 0.25 19.75 4.615 19.75 10C19.75 15.385 15.385 19.75 10 19.75C4.615 19.75 0.25 15.385 0.25 10ZM13.61 8.186C13.67 8.10605 13.7134 8.01492 13.7377 7.91795C13.762 7.82098 13.7666 7.72014 13.7514 7.62135C13.7361 7.52257 13.7012 7.42782 13.6489 7.3427C13.5965 7.25757 13.5276 7.18378 13.4463 7.12565C13.3649 7.06753 13.2728 7.02624 13.1753 7.00423C13.0778 6.98221 12.9769 6.97991 12.8785 6.99746C12.7801 7.01501 12.6862 7.05205 12.6023 7.10641C12.5184 7.16077 12.4462 7.23135 12.39 7.314L9.154 11.844L7.53 10.22C7.38783 10.0875 7.19978 10.0154 7.00548 10.0188C6.81118 10.0223 6.62579 10.101 6.48838 10.2384C6.35097 10.3758 6.27225 10.5612 6.26882 10.7555C6.2654 10.9498 6.33752 11.1378 6.47 11.28L8.72 13.53C8.79699 13.6069 8.8898 13.6662 8.99199 13.7036C9.09418 13.7411 9.20329 13.7559 9.31176 13.7469C9.42023 13.738 9.52546 13.7055 9.62013 13.6519C9.7148 13.5982 9.79665 13.5245 9.86 13.436L13.61 8.186Z" fill={props.fill || "#833CFA"} />
+    </svg>
+  )
+}
+
+export default CheckIcon;
diff --git a/src/assets/svgs/XIcon.tsx b/src/assets/svgs/XIcon.tsx
@@ -0,0 +1,9 @@
+const XIcon = (props: { fill?: string }) => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.25C4.615 0.25 0.25 4.615 0.25 10C0.25 15.385 4.615 19.75 10 19.75C15.385 19.75 19.75 15.385 19.75 10C19.75 4.615 15.385 0.25 10 0.25ZM8.28 7.22C8.21134 7.14631 8.12854 7.08721 8.03654 7.04622C7.94454 7.00523 7.84522 6.98318 7.74452 6.98141C7.64382 6.97963 7.54379 6.99816 7.4504 7.03588C7.35701 7.0736 7.27218 7.12974 7.20096 7.20096C7.12974 7.27218 7.0736 7.35701 7.03588 7.4504C6.99816 7.54379 6.97963 7.64382 6.98141 7.74452C6.98318 7.84522 7.00523 7.94454 7.04622 8.03654C7.08721 8.12854 7.14631 8.21134 7.22 8.28L8.94 10L7.22 11.72C7.14631 11.7887 7.08721 11.8715 7.04622 11.9635C7.00523 12.0555 6.98318 12.1548 6.98141 12.2555C6.97963 12.3562 6.99816 12.4562 7.03588 12.5496C7.0736 12.643 7.12974 12.7278 7.20096 12.799C7.27218 12.8703 7.35701 12.9264 7.4504 12.9641C7.54379 13.0018 7.64382 13.0204 7.74452 13.0186C7.84522 13.0168 7.94454 12.9948 8.03654 12.9538C8.12854 12.9128 8.21134 12.8537 8.28 12.78L10 11.06L11.72 12.78C11.7887 12.8537 11.8715 12.9128 11.9635 12.9538C12.0555 12.9948 12.1548 13.0168 12.2555 13.0186C12.3562 13.0204 12.4562 13.0018 12.5496 12.9641C12.643 12.9264 12.7278 12.8703 12.799 12.799C12.8703 12.7278 12.9264 12.643 12.9641 12.5496C13.0018 12.4562 13.0204 12.3562 13.0186 12.2555C13.0168 12.1548 12.9948 12.0555 12.9538 11.9635C12.9128 11.8715 12.8537 11.7887 12.78 11.72L11.06 10L12.78 8.28C12.8537 8.21134 12.9128 8.12854 12.9538 8.03654C12.9948 7.94454 13.0168 7.84522 13.0186 7.74452C13.0204 7.64382 13.0018 7.54379 12.9641 7.4504C12.9264 7.35701 12.8703 7.27218 12.799 7.20096C12.7278 7.12974 12.643 7.0736 12.5496 7.03588C12.4562 6.99816 12.3562 6.97963 12.2555 6.98141C12.1548 6.98318 12.0555 7.00523 11.9635 7.04622C11.8715 7.08721 11.7887 7.14631 11.72 7.22L10 8.94L8.28 7.22Z" fill={props.fill || "#F37269"} />
+    </svg>
+  )
+}
+
+export default XIcon;
diff --git a/src/screens/landing/LandingScreen.tsx b/src/screens/landing/LandingScreen.tsx
@@ -10,6 +10,7 @@ import Gallery from "./sections/Gallery";
 import Speaker from "./sections/Speaker";
 import Parallel from "./sections/Parallel";
 import Flashback from "./sections/Flashback";
+import Ticket from "./sections/Ticket";
 import { getContent } from "@/lib/firebase";
 import { Content } from "@/lib/schema";
 
@@ -21,12 +22,13 @@ const LandingScreen = async () => {
       <Hero content={content} />
       <Sponsor />
       <About content={content} />
-      <Flashback />
+      {/* <Flashback /> */}
       <Speaker />
       <Parallel />
       <Schedule content={content} />
       <Benefit content={content} />
       <Gallery />
+      <Ticket />
       <Cta content={content} />
       <Community />
     </>

diff --git a/src/screens/landing/sections/Cta.tsx b/src/screens/landing/sections/Cta.tsx
@@ -6,7 +6,7 @@ import React from "react";
 
 const Cta = ({ content }: { content?: Content }) => {
   return (
-    <div className="py-16 md:py-24">
+    <div className="bg-secondary py-16 md:py-24">
       <div className="container mx-auto flex flex-col md:flex-row items-center justify-between">
         <div className="w-[100%] md:w-[63%] text-center md:text-left mb-6 md:mb-0">
           <div className="flex items-center gap-3 justify-center md:justify-start">

diff --git a/src/screens/landing/sections/Ticket.tsx b/src/screens/landing/sections/Ticket.tsx
@@ -0,0 +1,258 @@
+import React from "react";
+import Link from "next/link";
+import CheckIcon from "@/assets/svgs/CheckIcon";
+import XIcon from "@/assets/svgs/XIcon";
+import ArrowLongRight from "@/assets/svgs/ArrowLongRight";
+import { classNames } from "@/lib/utils";
+
+interface IFeature {
+  name: string;
+  included: boolean;
+}
+
+interface IPricingItem {
+  title: string;
+  price: string;
+  features: IFeature[];
+  buttonText: string;
+  highlighted: boolean;
+  rightIcon?: React.ReactNode;
+}
+
+interface IFeatureItemProps {
+  feature: IFeature;
+  highlighted: boolean;
+}
+
+interface PricingButtonProps {
+  buttonText: string;
+  highlighted: boolean;
+  rightIcon?: React.ReactNode;
+}
+
+interface IMobilePricingCardProps {
+  item: IPricingItem;
+}
+
+interface IDesktopPricingTableProps {
+  pricingData: IPricingItem[];
+}
+
+const pricingData = [
+  {
+    title: "Mahasiswa",
+    price: "Rp30.000",
+    features: [
+      { name: "Akses semua sesi", included: true },
+      { name: "Sertifikat kehadiran", included: true },
+      { name: "Makan siang", included: true },
+      { name: "Networking session", included: false },
+      { name: "Workshop eksklusif", included: false },
+    ],
+    buttonText: "Beli Tiket",
+    highlighted: false,
+  },
+  {
+    title: "Umum",
+    price: "Rp50.000",
+    features: [
+      { name: "Akses semua sesi", included: true },
+      { name: "Sertifikat kehadiran", included: true },
+      { name: "Makan siang", included: true },
+      { name: "Networking session", included: true },
+      { name: "Workshop eksklusif", included: false },
+    ],
+    buttonText: "Beli Tiket",
+    highlighted: false,
+  },
+  {
+    title: "VIP",
+    price: "Rp100.000",
+    features: [
+      { name: "Akses semua sesi", included: true },
+      { name: "Sertifikat kehadiran", included: true },
+      { name: "Makan siang", included: true },
+      { name: "Networking session", included: true },
+      { name: "Workshop eksklusif", included: true },
+      { name: "Merchandise eksklusif", included: true },
+    ],
+    buttonText: "Beli Tiket",
+    rightIcon: (
+      <ArrowLongRight className="size-6 group-hover:translate-x-1 transition transform duration-150" />
+    ),
+    highlighted: true,
+  },
+  {
+    title: "Startup",
+    price: "Rp40.000",
+    features: [
+      { name: "Akses semua sesi", included: true },
+      { name: "Sertifikat kehadiran", included: true },
+      { name: "Makan siang", included: true },
+      { name: "Networking session", included: true },
+      { name: "Booth pameran", included: true },
+      { name: "Workshop eksklusif", included: false },
+    ],
+    buttonText: "Beli Tiket",
+    highlighted: false,
+  },
+];
+
+const FeatureItem = ({ feature, highlighted }: IFeatureItemProps) => (
+  <li className="flex items-center gap-2">
+    {feature.included ? (
+      <CheckIcon fill={highlighted ? "#caf93a" : "#833CFA"} />
+    ) : (
+      <XIcon />
+    )}
+    <span>{feature.name}</span>
+  </li>
+);
+
+const PricingButton = ({
+  buttonText,
+  highlighted,
+  rightIcon,
+}: PricingButtonProps) => (
+  <Link href="#" target="_blank">
+    <button
+      className={classNames(
+        "w-full group flex justify-center items-center gap-1.5 text-xl font-jost text-[#0B0E2B] border font-medium rounded-2xl py-4",
+        highlighted
+          ? "bg-primary border-transparent"
+          : "border-[#BABABA] hover:bg-white transform transition duration-150"
+      )}
+    >
+      {buttonText} {rightIcon}
+    </button>
+  </Link>
+);
+
+const MobilePricingCard = ({ item }: IMobilePricingCardProps) => (
+  <div
+    className={`rounded-2xl space-y-7 py-7 overflow-hidden border-[#BABABA] border ${
+      item.highlighted ? "bg-secondary text-white" : "bg-[#F4F5FF]"
+    }`}
+  >
+    <div className="px-7">
+      <p>{item.title}</p>
+      <p className="mt-2.5 text-3xl font-bold">{item.price}</p>
+    </div>
+    <hr className="border-[#BABABA] my-7 border-t-[0.5px]" />
+    <div className="px-7">
+      <ul className="space-y-4">
+        {item.features.map((feature, index) => (
+          <FeatureItem
+            key={index}
+            feature={feature}
+            highlighted={item.highlighted}
+          />
+        ))}
+      </ul>
+    </div>
+    <div className="px-7">
+      <PricingButton
+        buttonText={item.buttonText}
+        highlighted={item.highlighted}
+        rightIcon={item.rightIcon}
+      />
+    </div>
+  </div>
+);
+
+const DesktopPricingTable = ({ pricingData }: IDesktopPricingTableProps) => (
+  <table className="w-full">
+    <thead>
+      <tr className="border-b-[0.5px] border-b-[#BABABA]">
+        {pricingData.map((item, index) => (
+          <th
+            key={index}
+            className={classNames(
+              "p-7 text-left",
+              item.highlighted ? "bg-secondary text-white" : "bg-[#F4F5FF]",
+              index > 0 ? "border-l border-[#BABABA]" : ""
+            )}
+          >
+            <p className="text-base font-normal">{item.title}</p>
+            <div className="mt-2 text-3xl font-semibold">{item.price}</div>
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        {pricingData.map((item, colIndex) => (
+          <td
+            key={colIndex}
+            className={classNames(
+              "p-7 space-y-4 align-top",
+              item.highlighted ? "bg-secondary text-white" : "bg-[#F4F5FF]",
+              colIndex > 0 ? "border-l border-[#BABABA]" : "",
+              item.highlighted ? "border-collapse" : ""
+            )}
+          >
+            {item.features.map((feature, idx) => (
+              <FeatureItem
+                key={idx}
+                feature={feature}
+                highlighted={item.highlighted}
+              />
+            ))}
+          </td>
+        ))}
+      </tr>
+      <tr>
+        {pricingData.map((item, index) => (
+          <td
+            key={index}
+            className={classNames(
+              "px-7 pb-7",
+              item.highlighted ? "bg-secondary" : "bg-[#F4F5FF]",
+              index > 0 ? "border-l border-[#BABABA]" : ""
+            )}
+          >
+            <PricingButton
+              buttonText={item.buttonText}
+              highlighted={item.highlighted}
+              rightIcon={item.rightIcon}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </table>
+);
+
+const Ticket = () => {
+  return (
+    <div className="py-12 md:py-24">
+      <div className="container mx-auto">
+        <div className="flex flex-col lg:flex-row justify-around gap-4 md:gap-12 mb-12">
+          <div className="font-semibold text-2xl md:text-3xl md:min-w-[380px] leading-normal">
+            Dapatkan Akses Eksklusif dengan Harga Terbaik!
+          </div>
+          <p className="text-[#5A5A5A] leading-relaxed">
+            Nikmati akses penuh ke acara IT paling seru di Jawa Timur dengan
+            harga spesial! Dari sesi inspiratif hingga networking bareng
+            komunitas, semuanya bisa kamu dapatkan. Buruan daftar dan jadilah
+            bagian dari gerakan besar ini!
+          </p>
+        </div>
+
+        {/* Mobile view */}
+        <div className="lg:hidden space-y-6">
+          {pricingData.map((item, index) => (
+            <MobilePricingCard key={index} item={item} />
+          ))}
+        </div>
+
+        {/* Desktop view */}
+        <div className="hidden lg:block overflow-hidden rounded-2xl border-[#BABABA] border">
+          <DesktopPricingTable pricingData={pricingData} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Ticket;