Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
import React, { useState, useEffect } from 'react';
import {
Shield,
ArrowRight,
CheckCircle2,
AlertTriangle,
Eye,
Crosshair,
Award,
Calendar,
Users,
Clock,
Menu,
X
} from 'lucide-react';
export default function App() {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [formStatus, setFormStatus] = useState('idle'); // idle, submitting, success
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleFormSubmit = (e) => {
e.preventDefault();
setFormStatus('submitting');
setTimeout(() => {
setFormStatus('success');
}, 1200);
};
const scrollToSection = (id) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsMobileMenuOpen(false);
};
return (
<div className="font-sans text-charcoal bg-cream min-h-screen selection:bg-blush selection:text-charcoal">
<style dangerouslySetInnerHTML={{__html: `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
:root {
--color-blush: #E8B7A9;
--color-blush-light: #F4DCD5;
--color-cream: #FAF8F5;
--color-beige: #F0EBE1;
--color-charcoal: #2D2D2D;
--color-plum: #4A3B42;
}
.font-serif { font-family: 'Playfair Display', serif; }
.font-sans { font-family: 'Inter', sans-serif; }
.bg-blush { background-color: var(--color-blush); }
.bg-blush-light { background-color: var(--color-blush-light); }
.bg-cream { background-color: var(--color-cream); }
.bg-beige { background-color: var(--color-beige); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-plum { background-color: var(--color-plum); }
.text-blush { color: var(--color-blush); }
.text-charcoal { color: var(--color-charcoal); }
.text-plum { color: var(--color-plum); }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
`}} />
{/* Navigation */}
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'bg-white/95 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
<div className="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between">
<div className="flex items-center gap-2 cursor-pointer" onClick={() => scrollToSection('hero')}>
<Shield className="w-8 h-8 text-plum" />
<span className="font-serif font-bold text-xl tracking-wide text-charcoal">
MODERN THREAT
<span className="block text-[0.6rem] uppercase tracking-widest text-plum/70 -mt-1 font-sans font-semibold">Consulting LLC</span>
</span>
</div>
<div className="hidden md:flex items-center gap-8">
<button onClick={() => scrollToSection('mission')} className="text-sm font-medium hover:text-plum transition-colors">Our Mission</button>
<button onClick={() => scrollToSection('approach')} className="text-sm font-medium hover:text-plum transition-colors">The Approach</button>
<button
onClick={() => scrollToSection('booking')}
className="bg-plum text-white px-6 py-2.5 rounded-full text-sm font-medium hover:bg-charcoal transition-all shadow-lg shadow-plum/20"
>
Book Free Training
</button>
</div>
<button className="md:hidden text-charcoal" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
{isMobileMenuOpen ? <X /> : <Menu />}
</button>
</div>
{isMobileMenuOpen && (
<div className="absolute top-full left-0 w-full bg-white shadow-lg py-6 px-6 flex flex-col gap-4 md:hidden">
<button onClick={() => scrollToSection('mission')} className="text-left text-lg font-medium">Our Mission</button>
<button onClick={() => scrollToSection('approach')} className="text-left text-lg font-medium">The Approach</button>
<button onClick={() => scrollToSection('booking')} className="bg-plum text-white px-6 py-3 rounded-xl text-center font-medium mt-2">Book Free Training</button>
</div>
)}
</header>
<main>
{/* HERO */}
<section id="hero" className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-[600px] h-[600px] bg-blush-light rounded-full blur-3xl opacity-50 pointer-events-none" />
<div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="animate-fade-in-up">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-blush/30 shadow-sm mb-8">
<span className="w-2 h-2 rounded-full bg-plum animate-pulse"></span>
<span className="text-sm font-medium text-plum tracking-wide uppercase">April Campaign</span>
</div>
<h1 className="font-serif text-5xl lg:text-6xl/tight font-bold text-charcoal mb-6">
Real Estate Agent Safety Starts With <span className="text-plum italic">Confidence</span>
</h1>
<p className="text-xl text-gray-700 font-light mb-10 leading-relaxed">
Feel prepared, in control, and protected—every showing, every open house, every client interaction.
</p>
<div className="flex flex-col sm:flex-row gap-4 mb-12">
<button onClick={() => scrollToSection('booking')} className="group bg-plum text-white px-8 py-4 rounded-full text-base font-medium flex items-center justify-center gap-2 hover:bg-charcoal transition-all shadow-lg hover:-translate-y-1">
Book Free Training
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</button>
<button onClick={() => scrollToSection('approach')} className="bg-white text-charcoal border border-gray-200 px-8 py-4 rounded-full text-base font-medium flex items-center justify-center hover:border-plum transition-all">
See What You'll Learn
</button>
</div>
</div>
<div className="relative animate-fade-in-up">
<div className="aspect-[4/5] rounded-[2.5rem] overflow-hidden shadow-2xl">
<img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&q=80&w=1200" alt="Confident female agent" className="object-cover w-full h-full" />
</div>
</div>
</div>
</div>
</section>
{/* EMOTIONAL CONNECTION */}
<section id="mission" className="py-32 bg-plum relative overflow-hidden">
<div className="max-w-4xl mx-auto px-6 lg:px-8 text-center relative z-10">
<Shield className="w-12 h-12 text-blush mx-auto mb-8 opacity-80" />
<h2 className="font-serif text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-10 leading-tight">
You Should Never Have to Choose Between <span className="text-blush italic">Success</span> and <span className="text-blush italic">Safety</span>
</h2>
<div className="space-y-6 text-xl md:text-2xl text-white max-w-3xl mx-auto leading-relaxed">
<p>Meeting new clients alone. Walking into vacant homes. Hosting open houses with strangers.</p>
<p>These moments are part of your career—but feeling vulnerable doesn't have to be.</p>
<div className="w-24 h-px bg-blush/30 mx-auto my-10"></div>
<p className="font-serif text-2xl md:text-3xl text-white font-medium">
Our mission is simple:<br/>
<span className="text-blush">Help you feel confident, aware, and prepared—without changing who you are as a professional.</span>
</p>
</div>
</div>
</section>
{/* PILLARS */}
<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="font-serif text-3xl md:text-4xl font-bold text-charcoal">Core Training Pillars</h2>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
icon: Eye,
title: "Situational Awareness",
desc: "Identify risks early and stay one step ahead in any environment. Learn to read spaces and people effortlessly."
},
{
icon: Crosshair,
title: "Real-World Threat Response",
desc: "Know exactly what to do in high-stress, unpredictable situations. Gain clarity when seconds matter."
},
{
icon: Shield,
title: "Practical Self-Defense",
desc: "Simple techniques that are based on instinctive movements that are quick and easy to learn. Designed for any fitness or experience level."
}
].map((feature, index) => (
<div key={index} className="bg-cream border border-gray-100 p-10 rounded-[2rem] hover:-translate-y-2 transition-all duration-300">
<div className="w-16 h-16 bg-blush-light rounded-2xl flex items-center justify-center mb-8">
<feature.icon className="w-8 h-8 text-plum" />
</div>
<h3 className="font-serif text-2xl font-bold text-charcoal mb-4">{feature.title}</h3>
<p className="text-gray-600 leading-relaxed">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* APPROACH */}
<section id="approach" className="py-24 bg-beige">
<div className="max-w-7xl mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="relative aspect-square rounded-full overflow-hidden border-8 border-white shadow-xl">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&q=80&w=800" alt="Professional setting" className="object-cover w-full h-full" />
</div>
<div>
<h2 className="font-serif text-4xl font-bold text-charcoal mb-8">A Smarter, Real-World Approach</h2>
<div className="space-y-6">
{[
"Situational awareness that actually works in real scenarios",
"How to recognize red flags before something escalates",
"Real-world response strategies",
"How to stay professional while staying in control"
].map((point, i) => (
<div key={i} className="flex items-start gap-4">
<CheckCircle2 className="w-6 h-6 text-plum mt-1" />
<p className="text-lg text-gray-700">{point}</p>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* BOOKING */}
<section id="booking" className="py-24 bg-cream">
<div className="max-w-4xl mx-auto px-6 lg:px-8">
<div className="bg-white rounded-[2rem] shadow-xl p-8 md:p-12">
<div className="text-center mb-10">
<h2 className="font-serif text-3xl md:text-4xl font-bold text-charcoal mb-4">Schedule Your Training</h2>
<p className="text-gray-500 italic">Free Safety & Self-Defense Training — April Only</p>
</div>
{formStatus === 'success' ? (
<div className="text-center py-16 animate-fade-in-up">
<CheckCircle2 className="w-20 h-20 text-plum mx-auto mb-6" />
<h3 className="font-serif text-3xl font-bold mb-4 text-charcoal">Request Received!</h3>
<p className="text-gray-600 text-lg mb-8">We'll follow up within 24 hours to confirm your session.</p>
<button onClick={() => setFormStatus('idle')} className="text-plum font-medium underline">Submit another request</button>
</div>
) : (
<form onSubmit={handleFormSubmit} className="grid gap-6">
<div className="grid md:grid-cols-2 gap-6">
<input required type="text" className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none" placeholder="Name" />
<input required type="email" className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none" placeholder="Email" />
</div>
<div className="grid md:grid-cols-2 gap-6">
<input required type="tel" className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none" placeholder="Phone" />
<input required type="text" className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none" placeholder="Office Name" />
</div>
<div className="grid md:grid-cols-2 gap-6">
<select required className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none">
<option value="">Agents...</option>
<option value="1-10">1-10</option>
<option value="11-30">11-30</option>
<option value="31+">31+</option>
</select>
<input type="date" className="bg-cream border border-gray-200 rounded-xl px-4 py-3 outline-none" />
</div>
<button type="submit" disabled={formStatus === 'submitting'} className="bg-plum text-white py-4 rounded-xl text-lg font-bold shadow-lg hover:bg-charcoal transition-all">
{formStatus === 'submitting' ? "Sending..." : "Secure My Spot"}
</button>
</form>
)}
</div>
</div>
</section>
</main>
<footer className="bg-charcoal py-12 text-white/70">
<div className="max-w-7xl mx-auto px-6 lg:px-8 text-center flex flex-col items-center gap-6">
<div className="flex items-center gap-2">
<Shield className="w-8 h-8 text-blush" />
<span className="font-serif font-bold text-white tracking-wide">MODERN THREAT</span>
</div>
<p className="font-medium text-white">Take Control. Stay Safe.</p>
<p className="text-sm">modernthreatconsultingllc@gmail.com</p>
<p className="text-xs">© {new Date().getFullYear()} Modern Threat Consulting LLC.</p>
</div>
</footer>
</div>
);
}