97 lines
4.9 KiB
TypeScript
97 lines
4.9 KiB
TypeScript
import React from 'react';
|
|
import { Check } from 'lucide-react';
|
|
|
|
const offersData = [
|
|
{
|
|
id: "core",
|
|
title: "Core Transformation",
|
|
description: "Complete digital overhaul for established brands seeking dominance.",
|
|
price: "€5,000+",
|
|
features: ["SEO & Keywords", "Copywriting", "Conversion Opt.", "Lead Gen", "Custom CMS", "Analytics"],
|
|
buttonText: "Get Started",
|
|
isPopular: true,
|
|
cardClasses: "min-h-[500px] md:min-h-0 md:h-full border-white/10 relative group hover:border-[var(--color-accent)]/50",
|
|
buttonClasses: "bg-white text-black hover:bg-[var(--color-accent)]",
|
|
},
|
|
{
|
|
id: "essential",
|
|
title: "Essential Presence",
|
|
description: "For emerging businesses needing a professional foothold.",
|
|
price: "€2,500+",
|
|
features: ["SEO & Keywords", "Copywriting", "Conversion Opt."],
|
|
buttonText: "Select Plan",
|
|
isPopular: false,
|
|
cardClasses: "min-h-[450px] md:min-h-0 md:h-[85%] border-white/5 hover:bg-white/5",
|
|
buttonClasses: "border border-white/20 text-white hover:bg-white/10",
|
|
},
|
|
{
|
|
id: "basic",
|
|
title: "Basic Website",
|
|
description: "For small businesses needing a professional online presence.",
|
|
price: "€600+",
|
|
features: ["Web Design", "Custom CMS", "Analytics"],
|
|
buttonText: "Claim Now",
|
|
isPopular: false,
|
|
cardClasses: "min-h-[400px] md:min-h-0 md:h-[75%] border-white/5 bg-[var(--color-accent)]/5",
|
|
buttonClasses: "border border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-black",
|
|
},
|
|
{
|
|
id: "free",
|
|
title: "Free Audit",
|
|
description: "Detailed analysis of your current digital standing.",
|
|
price: "Free",
|
|
features: ["SEO Report", "UX Review"],
|
|
buttonText: "Claim Now",
|
|
isPopular: false,
|
|
cardClasses: "min-h-[400px] md:min-h-0 md:h-[75%] border-white/5 bg-[var(--color-accent)]/5",
|
|
buttonClasses: "border border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-black",
|
|
}
|
|
];
|
|
|
|
export default function OfferSection() {
|
|
return (
|
|
<section className="relative min-h-screen bg-neutral-950 text-white py-20 overflow-hidden flex flex-col justify-center">
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 pointer-events-none"></div>
|
|
|
|
<div className="container mx-auto px-4 mb-8 md:mb-12 relative z-10">
|
|
<h2 className="text-4xl md:text-6xl font-bold text-center">Our <span className="text-[var(--color-accent)]">Offers</span></h2>
|
|
</div>
|
|
|
|
<div className="w-full max-w-7xl mx-auto px-4 xl:px-0 relative z-10">
|
|
|
|
<div className="flex flex-col md:flex-row gap-8 md:gap-10 w-full md:h-[60vh] md:items-center justify-center">
|
|
|
|
{offersData.map((offer) => (
|
|
<div key={offer.id} className={`offer-card w-full md:flex-1 p-8 glass rounded-3xl border flex flex-col justify-between transition-colors ${offer.cardClasses}`}>
|
|
{offer.isPopular && (
|
|
<div className="absolute -top-4 -right-2 md:-right-4 bg-[var(--color-accent)] text-black font-bold px-4 py-1 rounded-full text-sm transform rotate-6 shadow-lg shadow-[var(--color-accent)]/20">
|
|
MOST POPULAR
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h3 className="text-2xl md:text-3xl font-bold mb-4">{offer.title}</h3>
|
|
<p className="text-neutral-400 mb-6 text-sm md:text-base">{offer.description}</p>
|
|
<ul className="space-y-3">
|
|
{offer.features.map((feature, index) => (
|
|
<li key={index} className="flex items-center gap-2 text-sm md:text-base">
|
|
<Check className="text-[var(--color-accent)] shrink-0" size={18} />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="mt-8">
|
|
<div className="text-2xl md:text-3xl font-bold mb-2">{offer.price}</div>
|
|
<button className={`w-full py-4 font-bold rounded-xl transition-colors cursor-pointer ${offer.buttonClasses}`}>
|
|
{offer.buttonText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|