Untitled
unknown
plain_text
a month ago
12 kB
2
Indexable
import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Separator } from "@/components/ui/separator"; import { Facebook, Instagram, Twitter } from "lucide-react"; import React from "react"; export default function ElementLight(): JSX.Element { // Navigation menu items const navItems = [ { name: "Membership", isActive: true }, { name: "Directories", isActive: false }, { name: "Events", isActive: false }, { name: "Shop", isActive: false }, { name: "Admin Resources", isActive: false }, ]; // Membership card data const membershipCards = [ { title: "Apply for Individual membership", description: "Become a member and join now! See a list of member types, with descriptions of each one. Decide which one is for you, and start your online membership application.", imageSrc: "", altText: "Individual membership illustration", }, { title: "Apply as Company", description: "Make your company a member by applying now! See a list of member types, with descriptions of each one. Decide which one is for your company, and start your online membership application.", imageSrc: "", altText: "Company membership illustration", }, { title: "Join with Member Package", description: "Become a member now and get the whole package of membership benefits! See a list of membership options, with descriptions of each one....", imageSrc: "", altText: "Member package illustration", }, ]; // Footer links const footerLinks = [ { name: "Membership", isActive: true }, { name: "Directories", isActive: false }, { name: "Events", isActive: false }, { name: "Shops", isActive: false }, { name: "Admin Resources", isActive: false }, ]; return ( <div className="relative bg-[#f7f7f8]"> {/* Header/Navigation */} <header className="sticky top-0 z-10 w-full bg-white border-b border-[#b24fc51a]"> <div className="container flex items-center justify-between h-20 max-w-6xl px-4"> <div className="flex items-center"> <div className="mr-8"> <img src="" alt="MX Logo" className="w-[50px] h-[31px]" /> </div> <nav className="flex items-center space-x-4"> {navItems.map((item, index) => item.isActive ? ( <div key={index} className="px-3.5 py-2 bg-[#f1f1f4] rounded-lg" > <span className="font-medium text-sm text-[#272731]"> {item.name} </span> </div> ) : ( <span key={index} className="px-3 py-2 font-medium text-sm text-[#272731]" > {item.name} </span> ), )} </nav> </div> <Button className="bg-[#cc4eca] hover:bg-[#b43db6] text-white"> Login </Button> </div> </header> {/* Hero Section */} <section className="w-full bg-white"> <div className="container flex flex-col md:flex-row items-center max-w-6xl px-4 py-20"> <div className="w-full md:w-1/2 pr-0 md:pr-8"> <div className="max-w-md"> <h1 className="text-6xl font-semibold text-[#04004e] leading-[72px] mb-10"> Membership <br /> Packages </h1> <p className="text-base text-[#45454f] leading-6"> Unlock exclusive benefits with our premium <br /> membership packages tailored to suit every need. <br /> Whether you're looking for advanced features, early <br /> access, or personalized support, our memberships <br /> offer incredible value at competitive prices. </p> </div> </div> <div className="w-full md:w-1/2 mt-10 md:mt-0"> <div className="relative"> {/* Hero illustration - replaced with placeholder */} <div className="relative w-full h-[489px]"> <div className="absolute w-[300px] h-[266px] bottom-0 left-2"> <img className="w-[266px] h-[266px]" alt="Vector" src="" /> <img className="absolute w-[140px] h-[30px] top-[17px] right-0" alt="Group" src="" /> <img className="absolute w-[94px] h-[29px] bottom-[26px] right-0" alt="Group" src="" /> </div> <div className="absolute w-full h-[223px] top-0 right-0"> <img className="absolute w-[223px] h-[223px] top-0 right-0" alt="Mask group" src="" /> <img className="absolute w-[172px] h-[172px] top-[43px] left-[79px]" alt="Mask group" src="" /> <img className="absolute w-[118px] h-[29px] top-40 left-0" alt="Group" src="" /> <img className="absolute w-[106px] h-[29px] bottom-[9px] right-[5px]" alt="Group" src="" /> <img className="absolute w-[95px] h-[29px] top-[26px] left-[225px]" alt="Group" src="" /> <img className="absolute w-[34px] h-[34px] top-[9px] left-[45px]" alt="Vector" src="" /> </div> <img className="absolute w-36 h-36 bottom-[86px] right-[51px]" alt="Vector" src="" /> </div> </div> </div> </div> </section> {/* Membership Cards Section */} <section className="container max-w-6xl px-4 py-20"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> {membershipCards.map((card, index) => ( <Card key={index} className="rounded-[20px] overflow-hidden h-[550px] bg-white" > <CardContent className="p-5"> <h2 className="text-[26px] font-semibold text-[#04004e] leading-7 mb-4"> {card.title} </h2> <p className="text-[13px] text-[#04004ecc] leading-5 mb-6"> {card.description} </p> <div className="w-full h-[282px] mb-6"> <img src={card.imageSrc} alt={card.altText} className="w-full h-full object-cover" /> </div> </CardContent> <CardFooter className="p-5 pt-0 flex justify-between"> <Button className="bg-[#cc4eca] hover:bg-[#b43db6] text-white font-bold text-sm rounded-lg shadow-md"> Get Started </Button> <Button variant="link" className="text-[#cc4eca] font-bold text-sm" > Learn More </Button> </CardFooter> </Card> ))} </div> </section> {/* Newsletter Section */} <section className="w-full bg-gray-100 py-10"> <div className="container max-w-6xl px-4"> <div className="flex flex-col md:flex-row justify-between items-start mb-10"> <div className="mb-8 md:mb-0"> <h3 className="text-xl font-semibold text-[#04004e] mb-2"> Join our newsletter for regular updates </h3> <p className="text-[15.5px] leading-[18.6px]"> Register now to get latest updates on <br /> promotions & coupons.Don't worry, <br /> we not spam! </p> </div> <div className="w-full md:w-auto"> <div className="flex flex-col sm:flex-row gap-2"> <div className="relative"> <Input className="w-full md:w-[250px] h-[50px] rounded-[10px] pl-4 shadow-[inset_0px_0px_0px_1px_#04004e1a]" placeholder="name@email.com" /> </div> <Button className="h-10 bg-[#cc4eca] hover:bg-[#b43db6] text-white rounded-[5px]"> Subscribe </Button> </div> </div> </div> <Separator className="border-[#04004e1a]" /> <div className="py-10 grid grid-cols-1 md:grid-cols-2 gap-8"> <div> <div className="mb-12"> <img src="" alt="MX Logo" className="w-16 h-[39px] mb-4" /> <p className="text-[15.5px] leading-[18.6px]"> The full suite of MX web parts <br /> already deployed and configured <br /> within their own DNN website. </p> </div> <div className="flex space-x-3"> <a href="#" className="w-[30px] h-[30px] flex items-center justify-center rounded-full border border-[#080a47]" > <Facebook className="w-3 h-3" /> </a> <a href="#" className="w-[30px] h-[30px] flex items-center justify-center rounded-full border border-[#080a47]" > <Twitter className="w-3 h-3" /> </a> <a href="#" className="w-[30px] h-[30px] flex items-center justify-center rounded-full border border-[#080a47]" > <Instagram className="w-3 h-3" /> </a> </div> </div> <div className="flex justify-end"> <div> <h4 className="text-lg font-semibold text-[#080a47] mb-6"> Get to Know Us </h4> <ul className="space-y-5"> {footerLinks.map((link, index) => ( <li key={index}> <a href="#" className={`text-lg ${link.isActive ? "font-semibold text-[#cc4eca]" : "font-normal text-[#04004e]"}`} > {link.name} </a> </li> ))} </ul> </div> </div> </div> <Separator className="border-[#04004e1a] mb-6" /> <div className="text-base text-[#080a47]"> Copyright 2024 ©MX assosciates. All rights reserevd. </div> </div> </section> {/* Back to top button - fixed position */} <div className="fixed bottom-5 right-5 z-10"> <Button variant="outline" size="icon" className="w-[142px] h-9 bg-white rounded-[10px] shadow-md" > <span className="flex items-center"> <span className="w-[11px] h-4 mr-2"></span> <span className="w-[92px] h-[11px]"></span> </span> </Button> </div> </div> ); }
Editor is loading...
Leave a Comment