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