Untitled

 avatar
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 &amp; 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