[Init]: Initial commit, Landing Page partially done. 01.04. 5 A.M.

src/components/OfferSection.tsx

@@ -0,0 +1,96 @@
+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>
+    );
+}