diff --git a/src/assets/svgs/CheckIcon.tsx b/src/assets/svgs/CheckIcon.tsx new file mode 100644 index 0000000..09e59a7 --- /dev/null +++ b/src/assets/svgs/CheckIcon.tsx @@ -0,0 +1,9 @@ +const CheckIcon = (props: {fill?: string}) => { + return ( + + + + ) +} + +export default CheckIcon; \ No newline at end of file diff --git a/src/assets/svgs/XIcon.tsx b/src/assets/svgs/XIcon.tsx new file mode 100644 index 0000000..a3af153 --- /dev/null +++ b/src/assets/svgs/XIcon.tsx @@ -0,0 +1,9 @@ +const XIcon = (props: { fill?: string }) => { + return ( + + + + ) +} + +export default XIcon; \ No newline at end of file diff --git a/src/screens/landing/LandingScreen.tsx b/src/screens/landing/LandingScreen.tsx index 7b93e63..48850ee 100644 --- 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 () => { - + {/* */} + diff --git a/src/screens/landing/sections/Cta.tsx b/src/screens/landing/sections/Cta.tsx index bd168fc..2602915 100644 --- 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 ( -
+
diff --git a/src/screens/landing/sections/Ticket.tsx b/src/screens/landing/sections/Ticket.tsx new file mode 100644 index 0000000..486ee34 --- /dev/null +++ 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: ( + + ), + 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) => ( +
  • + {feature.included ? ( + + ) : ( + + )} + {feature.name} +
    • +); + +const PricingButton = ({ + buttonText, + highlighted, + rightIcon, +}: PricingButtonProps) => ( + + + +); + +const MobilePricingCard = ({ item }: IMobilePricingCardProps) => ( +
    +
    +

    {item.title}

    +

    {item.price}

    +
    +
    +
    +
      + {item.features.map((feature, index) => ( + + ))} +
    +
    +
    + +
    +
    +); + +const DesktopPricingTable = ({ pricingData }: IDesktopPricingTableProps) => ( + + + + {pricingData.map((item, index) => ( + + ))} + + + + + {pricingData.map((item, colIndex) => ( + + ))} + + + {pricingData.map((item, index) => ( + + ))} + + +
    0 ? "border-l border-[#BABABA]" : "" + )} + > +

    {item.title}

    +
    {item.price}
    +
    0 ? "border-l border-[#BABABA]" : "", + item.highlighted ? "border-collapse" : "" + )} + > + {item.features.map((feature, idx) => ( + + ))} +
    0 ? "border-l border-[#BABABA]" : "" + )} + > + +
    +); + +const Ticket = () => { + return ( +
    +
    +
    +
    + Dapatkan Akses Eksklusif dengan Harga Terbaik! +
    +

    + 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! +

    +
    + + {/* Mobile view */} +
    + {pricingData.map((item, index) => ( + + ))} +
    + + {/* Desktop view */} +
    + +
    +
    +
    + ); +}; + +export default Ticket;