Let me help you find it. The options depend on your current view:
To Download:
- Look at the preview panel on the right side of the screen
- In the top-right corner of that panel, you should see a "..." (three dots) menu or a download icon
- Click it and select "Download ZIP"
If you still can't see it:
- Try clicking "Publish" button in the top right - this will deploy your site to Vercel and give you the option to create a GitHub repository, which you can then clone locally
Alternative - Copy Files Manually: If the download option isn't available, I can show you the key files to copy. Would you like me to display the code for each file so you can copy and paste them into VS Code?
Just let me know:
- Should I show you all the code to copy manually?
- Or can you see the "Publish" button to deploy and get a GitHub repo?
49d ago
Here are all the files you need to copy. Create these files in your VS Code project:
1. app/layout.tsx
import type { Metadata, Viewport } from 'next'
import { Montserrat, Playfair_Display } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'
const montserrat = Montserrat({
subsets: ["latin"],
variable: '--font-montserrat',
});
const playfair = Playfair_Display({
subsets: ["latin"],
variable: '--font-playfair',
});
export const metadata: Metadata = {
title: 'AJ Enterprise | Elite Football Academy & Management',
description: 'Elite Academy & Professional Football Management. Turn raw passion into professional careers with AJ Enterprise.',
}
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en" className={`${montserrat.variable} ${playfair.variable} bg-background`}>
<body className="font-sans antialiased">
{children}
</body>
</html>
)
}2. app/globals.css
@import 'tailwindcss';
@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
:root {
/* Deep Obsidian & Charcoal Base with Metallic Gold Accents */
--background: oklch(0.08 0 0);
--foreground: oklch(0.95 0 0);
--card: oklch(0.12 0.005 250);
--card-foreground: oklch(0.95 0 0);
--popover: oklch(0.1 0 0);
--popover-foreground: oklch(0.95 0 0);
/* Metallic Gold Primary - #D4AF37 */
--primary: oklch(0.76 0.12 85);
--primary-foreground: oklch(0.08 0 0);
--secondary: oklch(0.18 0 0);
--secondary-foreground: oklch(0.9 0 0);
--muted: oklch(0.2 0 0);
--muted-foreground: oklch(0.65 0 0);
--accent: oklch(0.76 0.12 85);
--accent-foreground: oklch(0.08 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.95 0 0);
--border: oklch(0.25 0.01 85);
--input: oklch(0.18 0 0);
--ring: oklch(0.76 0.12 85);
--chart-1: oklch(0.76 0.12 85);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.125rem;
--sidebar: oklch(0.1 0 0);
--sidebar-foreground: oklch(0.95 0 0);
--sidebar-primary: oklch(0.76 0.12 85);
--sidebar-primary-foreground: oklch(0.08 0 0);
--sidebar-accent: oklch(0.18 0 0);
--sidebar-accent-foreground: oklch(0.95 0 0);
--sidebar-border: oklch(0.25 0.01 85);
--sidebar-ring: oklch(0.76 0.12 85);
/* Custom Gold Variables */
--gold: #D4AF37;
--gold-light: #E5C85C;
--gold-dark: #B8942D;
--obsidian: #0a0a0a;
--charcoal: #1a1a1a;
--charcoal-light: #2a2a2a;
}
.dark {
--background: oklch(0.08 0 0);
--foreground: oklch(0.95 0 0);
--card: oklch(0.12 0.005 250);
--card-foreground: oklch(0.95 0 0);
--popover: oklch(0.1 0 0);
--popover-foreground: oklch(0.95 0 0);
--primary: oklch(0.76 0.12 85);
--primary-foreground: oklch(0.08 0 0);
--secondary: oklch(0.18 0 0);
--secondary-foreground: oklch(0.9 0 0);
--muted: oklch(0.2 0 0);
--muted-foreground: oklch(0.65 0 0);
--accent: oklch(0.76 0.12 85);
--accent-foreground: oklch(0.08 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.25 0.01 85);
--input: oklch(0.18 0 0);
--ring: oklch(0.76 0.12 85);
--chart-1: oklch(0.76 0.12 85);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.1 0 0);
--sidebar-foreground: oklch(0.95 0 0);
--sidebar-primary: oklch(0.76 0.12 85);
--sidebar-primary-foreground: oklch(0.08 0 0);
--sidebar-accent: oklch(0.18 0 0);
--sidebar-accent-foreground: oklch(0.95 0 0);
--sidebar-border: oklch(0.25 0.01 85);
--sidebar-ring: oklch(0.76 0.12 85);
}
@theme inline {
--font-sans: var(--font-montserrat), 'Montserrat', sans-serif;
--font-serif: var(--font-playfair), 'Playfair Display', serif;
--font-mono: 'Geist Mono', 'Geist Mono Fallback';
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}3. app/page.tsx
import { Navbar } from "@/components/navbar"
import { Hero } from "@/components/hero"
import { About } from "@/components/about"
import { Pricing } from "@/components/pricing"
import { Consultation } from "@/components/consultation"
import { Footer } from "@/components/footer"
export default function Home() {
return (
<main className="min-h-screen bg-background">
<Navbar />
<Hero />
<About />
<Pricing />
<Consultation />
<Footer />
</main>
)
}4. components/navbar.tsx
"use client"
import { useState, useEffect } from "react"
import Link from "next/link"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"
export function Navbar() {
const [isScrolled, setIsScrolled] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50)
}
window.addEventListener("scroll", handleScroll)
return () => window.removeEventListener("scroll", handleScroll)
}, [])
const navLinks = [
{ href: "#about", label: "About" },
{ href: "#pricing", label: "Pricing" },
{ href: "#consultation", label: "Consultation" },
{ href: "#contact", label: "Contact" },
]
return (
<nav
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
isScrolled
? "bg-[#0a0a0a]/90 backdrop-blur-xl border-b border-[#D4AF37]/20"
: "bg-transparent"
}`}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-20">
{/* Logo */}
<Link href="/" className="flex items-center gap-3">
<div className="w-10 h-10 border-2 border-[#D4AF37] flex items-center justify-center">
<span className="font-serif text-[#D4AF37] font-bold text-lg">AJ</span>
</div>
<span className="font-serif text-xl tracking-wider text-foreground hidden sm:block">
ENTERPRISE
</span>
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-8">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-sm font-sans tracking-widest uppercase text-muted-foreground hover:text-[#D4AF37] transition-colors duration-300"
>
{link.label}
</Link>
))}
<Button
asChild
className="bg-[#D4AF37] hover:bg-[#B8942D] text-[#0a0a0a] font-sans font-semibold tracking-wider uppercase text-sm px-6 h-11 min-h-11"
>
<Link href="#consultation">Join the Elite</Link>
</Button>
</div>
{/* Mobile Menu Button */}
<button
className="md:hidden p-2 text-foreground min-h-11 min-w-11 flex items-center justify-center"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Mobile Menu */}
{isMobileMenuOpen && (
<div className="md:hidden bg-[#0a0a0a]/95 backdrop-blur-xl border-t border-[#D4AF37]/20 absolute left-0 right-0 top-20">
<div className="flex flex-col py-6 px-4 gap-4">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-sm font-sans tracking-widest uppercase text-muted-foreground hover:text-[#D4AF37] transition-colors py-3 min-h-11 flex items-center"
onClick={() => setIsMobileMenuOpen(false)}
>
{link.label}
</Link>
))}
<Button
asChild
className="bg-[#D4AF37] hover:bg-[#B8942D] text-[#0a0a0a] font-sans font-semibold tracking-wider uppercase text-sm h-12 mt-2"
>
<Link href="#consultation" onClick={() => setIsMobileMenuOpen(false)}>
Join the Elite
</Link>
</Button>
</div>
</div>
)}
</div>
</nav>
)
}5. components/hero.tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { ChevronDown } from "lucide-react"
export function Hero() {
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
{/* Background Image Overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-[#0a0a0a]/70 via-[#0a0a0a]/50 to-[#0a0a0a] z-10" />
{/* Background Pattern */}
<div className="absolute inset-0 opacity-20">
<div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,#D4AF37_25%,#D4AF37_26%,transparent_26%,transparent_75%,#D4AF37_75%,#D4AF37_76%,transparent_76%)] bg-[length:60px_60px] opacity-5" />
</div>
{/* Hero Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('/hero-bg.jpg')`,
}}
/>
{/* Content */}
<div className="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-4 py-2 border border-[#D4AF37]/40 bg-[#0a0a0a]/60 backdrop-blur-sm mb-8">
<div className="w-2 h-2 bg-[#D4AF37] animate-pulse" />
<span className="text-xs font-sans tracking-[0.3em] uppercase text-[#D4AF37]">
Elite Football Academy
</span>
</div>
{/* Main Headline */}
<h1 className="font-serif text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight mb-6 text-balance">
<span className="text-[#D4AF37]">AJ Enterprise:</span>
<br />
The Future of Football
</h1>
{/* Subtext */}
<p className="font-sans text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed text-pretty">
Elite Academy & Professional Management by Ahmed.
Where raw talent meets world-class opportunity.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Button
asChild
size="lg"
className="bg-[#D4AF37] hover:bg-[#B8942D] text-[#0a0a0a] font-sans font-semibold tracking-wider uppercase h-14 px-10 text-sm min-h-11"
>
<Link href="#consultation">Begin Your Journey</Link>
</Button>
<Button
asChild
variant="outline"
size="lg"
className="border-[#D4AF37]/50 text-[#D4AF37] hover:bg-[#D4AF37]/10 hover:text-[#D4AF37] font-sans tracking-wider uppercase h-14 px-10 text-sm bg-transparent min-h-11"
>
<Link href="#pricing">View Packages</Link>
</Button>
</div>
{/* Stats Row */}
<div className="grid grid-cols-3 gap-4 sm:gap-8 mt-16 pt-16 border-t border-[#D4AF37]/20 max-w-xl mx-auto">
{[
{ value: "500+", label: "Athletes Trained" },
{ value: "50+", label: "Pro Signings" },
{ value: "10+", label: "Years Experience" },
].map((stat) => (
<div key={stat.label} className="text-center">
<div className="font-serif text-2xl sm:text-3xl font-bold text-[#D4AF37]">
{stat.value}
</div>
<div className="text-xs sm:text-sm text-muted-foreground tracking-wider uppercase mt-1">
{stat.label}
</div>
</div>
))}
</div>
</div>
{/* Scroll Indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 animate-bounce">
<ChevronDown className="w-6 h-6 text-[#D4AF37]" />
</div>
</section>
)
}6. components/about.tsx
import { Award, Target, Users } from "lucide-react"
export function About() {
return (
<section id="about" className="py-24 sm:py-32 bg-[#0a0a0a] relative overflow-hidden">
{/* Background Accent */}
<div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-[#D4AF37]/5 to-transparent" />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
{/* Section Header */}
<div className="text-center mb-16">
<span className="text-xs font-sans tracking-[0.3em] uppercase text-[#D4AF37] block mb-4">
The Journey
</span>
<h2 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold text-foreground text-balance">
Building Champions,
<br />
<span className="text-[#D4AF37]">One Dream at a Time</span>
</h2>
</div>
{/* Two Column Layout */}
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
{/* Left - Image */}
<div className="relative">
<div className="aspect-[4/5] bg-[#1a1a1a] relative overflow-hidden">
{/* Decorative Frame */}
<div className="absolute inset-4 border border-[#D4AF37]/30" />
{/* Image Placeholder */}
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: `url('/ahmed-portrait.jpg')`,
}}
/>
{/* Overlay */}
<div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent" />
{/* Name Badge */}
<div className="absolute bottom-8 left-8 right-8">
<div className="bg-[#0a0a0a]/80 backdrop-blur-sm border border-[#D4AF37]/30 p-4">
<span className="font-serif text-xl text-foreground">Ahmed</span>
<span className="block text-sm text-[#D4AF37] tracking-wider uppercase mt-1">
Founder & Director
</span>
</div>
</div>
</div>
{/* Decorative Element */}
<div className="absolute -bottom-6 -right-6 w-32 h-32 border border-[#D4AF37]/20 hidden lg:block" />
</div>
{/* Right - Content */}
<div className="lg:pl-8">
<div className="space-y-6 text-muted-foreground leading-relaxed">
<p className="text-lg sm:text-xl text-foreground font-sans">
Founded by Ahmed, a lifelong devotee of the beautiful game.
</p>
<p>
Rising from a community where the path to the pros was a struggle, Ahmed built
AJ Enterprise to bridge the gap and turn raw passion into professional careers.
</p>
<p>
What started as a dream to help local talent has grown into a comprehensive
football academy and management enterprise, dedicated to nurturing the next
generation of football stars.
</p>
<p>
At AJ Enterprise, we do not just train players — we craft careers, build character,
and create pathways to professional success that were once thought impossible.
</p>
</div>
{/* Features */}
<div className="grid sm:grid-cols-3 gap-6 mt-12 pt-12 border-t border-[#D4AF37]/20">
{[
{
icon: Target,
title: "Vision",
description: "Identifying and nurturing raw talent",
},
{
icon: Award,
title: "Excellence",
description: "World-class training standards",
},
{
icon: Users,
title: "Community",
description: "Building football families",
},
].map((feature) => (
<div key={feature.title} className="text-center sm:text-left">
<feature.icon className="w-8 h-8 text-[#D4AF37] mx-auto sm:mx-0 mb-3" />
<h3 className="font-sans font-semibold text-foreground mb-1">
{feature.title}
</h3>
<p className="text-sm text-muted-foreground">
{feature.description}
</p>
</div>
))}
</div>
</div>
</div>
</div>
</section>
)
}7. components/pricing.tsx
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Check, Crown, Star, Zap } from "lucide-react"
const pricingTiers = [
{
name: "Soft Pack",
price: "40,000",
icon: Zap,
description: "Perfect for beginners ready to start their elite journey",
features: [
"Basic elite training sessions",
"Comprehensive fitness assessment",
"Community access & networking",
"Weekly group training",
"Performance tracking basics",
],
popular: false,
},
{
name: "Elite Pack",
price: "60,000",
icon: Star,
description: "For serious players committed to rapid improvement",
features: [
"Advanced training drills",
"Custom training kits included",
"In-depth tactical analysis",
"Bi-weekly 1-on-1 sessions",
"Video performance review",
"Priority session booking",
],
popular: true,
},
{
name: "Pro Pack",
price: "100,000",
icon: Crown,
description: "The complete professional pathway experience",
features: [
"Full professional pathway program",
"Dedicated 1-on-1 management",
"Professional trial scouting",
"24/7 priority support",
"Career planning & guidance",
"Agent networking access",
"Exclusive pro events access",
],
popular: false,
},
]
export function Pricing() {
return (
<section id="pricing" className="py-24 sm:py-32 bg-[#0f0f0f] relative">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-transparent via-[#D4AF37]/20 to-transparent" />
<div className="absolute top-0 right-1/4 w-px h-full bg-gradient-to-b from-transparent via-[#D4AF37]/20 to-transparent" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
{/* Section Header */}
<div className="text-center mb-16">
<span className="text-xs font-sans tracking-[0.3em] uppercase text-[#D4AF37] block mb-4">
Performance Packs
</span>
<h2 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4 text-balance">
Choose Your <span className="text-[#D4AF37]">Path to Glory</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-pretty">
Investment in your football career. Each pack is designed to elevate your game
to the next level with professional-grade training and support.
</p>
</div>
{/* Pricing Cards */}
<div className="grid md:grid-cols-3 gap-6 lg:gap-8">
{pricingTiers.map((tier) => (
<div
key={tier.name}
className={`relative group ${tier.popular ? "md:-mt-4 md:mb-4" : ""}`}
>
{/* Popular Badge */}
{tier.popular && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10">
<span className="bg-[#D4AF37] text-[#0a0a0a] text-xs font-sans font-bold tracking-wider uppercase px-4 py-1">
Most Popular
</span>
</div>
)}
{/* Card */}
<div
className={`h-full p-8 transition-all duration-500 ${
tier.popular
? "bg-[#1a1a1a]/80 backdrop-blur-xl border-2 border-[#D4AF37]"
: "bg-[#1a1a1a]/50 backdrop-blur-xl border border-[#D4AF37]/20 hover:border-[#D4AF37]/40"
}`}
>
{/* Icon */}
<div
className={`w-14 h-14 flex items-center justify-center mb-6 ${
tier.popular
? "bg-[#D4AF37] text-[#0a0a0a]"
: "border border-[#D4AF37]/40 text-[#D4AF37]"
}`}
>
<tier.icon className="w-7 h-7" />
</div>
{/* Name & Price */}
<h3 className="font-serif text-2xl font-bold text-foreground mb-2">
{tier.name}
</h3>
<div className="flex items-baseline gap-1 mb-4">
<span className="text-sm text-muted-foreground">₦</span>
<span className="font-serif text-4xl font-bold text-[#D4AF37]">
{tier.price}
</span>
</div>
<p className="text-sm text-muted-foreground mb-8 leading-relaxed">
{tier.description}
</p>
{/* Features */}
<ul className="space-y-3 mb-8">
{tier.features.map((feature) => (
<li key={feature} className="flex items-start gap-3">
<Check className="w-5 h-5 text-[#D4AF37] shrink-0 mt-0.5" />
<span className="text-sm text-muted-foreground">{feature}</span>
</li>
))}
</ul>
{/* CTA */}
<Button
asChild
className={`w-full h-12 font-sans font-semibold tracking-wider uppercase text-sm min-h-11 ${
tier.popular
? "bg-[#D4AF37] hover:bg-[#B8942D] text-[#0a0a0a]"
: "bg-transparent border border-[#D4AF37]/50 text-[#D4AF37] hover:bg-[#D4AF37]/10"
}`}
>
<Link href="#consultation">Get Started</Link>
</Button>
</div>
</div>
))}
</div>
{/* Bottom Note */}
<p className="text-center text-sm text-muted-foreground mt-12">
All prices are in Nigerian Naira (₦). Custom packages available upon request.
</p>
</div>
</section>
)
}8. components/consultation.tsx
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Send, CheckCircle } from "lucide-react"
export function Consultation() {
const [isSubmitted, setIsSubmitted] = useState(false)
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
setIsLoading(true)
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1500))
setIsLoading(false)
setIsSubmitted(true)
}
return (
<section id="consultation" className="py-24 sm:py-32 bg-[#0a0a0a] relative overflow-hidden">
{/* Background Accents */}
<div className="absolute top-0 left-0 w-1/2 h-full bg-gradient-to-r from-[#D4AF37]/5 to-transparent" />
<div className="absolute bottom-0 right-0 w-96 h-96 border border-[#D4AF37]/10 rotate-45 translate-x-1/2 translate-y-1/2" />
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative">
{/* Section Header */}
<div className="text-center mb-12">
<span className="text-xs font-sans tracking-[0.3em] uppercase text-[#D4AF37] block mb-4">
Request a Session
</span>
<h2 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-4 text-balance">
Begin Your <span className="text-[#D4AF37]">Elite Journey</span>
</h2>
<p className="text-muted-foreground max-w-xl mx-auto text-pretty">
Take the first step towards your professional football career.
Submit your application and our team will reach out within 48 hours.
</p>
</div>
{/* Form Card */}
<div className="bg-[#1a1a1a]/50 backdrop-blur-xl border border-[#D4AF37]/20 p-8 sm:p-12">
{isSubmitted ? (
<div className="text-center py-8">
<CheckCircle className="w-16 h-16 text-[#D4AF37] mx-auto mb-6" />
<h3 className="font-serif text-2xl font-bold text-foreground mb-3">
Application Received
</h3>
<p className="text-muted-foreground">
Thank you for your interest in AJ Enterprise. Our team will contact you soon.
</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
{/* Name Field */}
<div>
<label
htmlFor="name"
className="block text-sm font-sans tracking-wider uppercase text-muted-foreground mb-2"
>
Full Name
</label>
<input
type="text"
id="name"
name="name"
required
placeholder="Enter your full name"
className="w-full h-14 min-h-11 px-4 bg-[#0a0a0a] border border-[#D4AF37]/30 text-foreground placeholder:text-muted-foreground/50 focus:border-[#D4AF37] focus:outline-none focus:ring-1 focus:ring-[#D4AF37] transition-colors text-base"
/>
</div>
{/* Position Field */}
<div>
<label
htmlFor="position"
className="block text-sm font-sans tracking-wider uppercase text-muted-foreground mb-2"
>
Playing Position
</label>
<select
id="position"
name="position"
required
className="w-full h-14 min-h-11 px-4 bg-[#0a0a0a] border border-[#D4AF37]/30 text-foreground focus:border-[#D4AF37] focus:outline-none focus:ring-1 focus:ring-[#D4AF37] transition-colors appearance-none cursor-pointer text-base"
defaultValue=""
>
<option value="" disabled className="text-muted-foreground">
Select your position
</option>
<option value="goalkeeper">Goalkeeper</option>
<option value="defender">Defender</option>
<option value="midfielder">Midfielder</option>
<option value="forward">Forward</option>
<option value="versatile">Versatile Player</option>
</select>
</div>
{/* Career Goals Field */}
<div>
<label
htmlFor="goals"
className="block text-sm font-sans tracking-wider uppercase text-muted-foreground mb-2"
>
Career Goals
</label>
<textarea
id="goals"
name="goals"
required
rows={4}
placeholder="Tell us about your football aspirations..."
className="w-full min-h-[120px] px-4 py-4 bg-[#0a0a0a] border border-[#D4AF37]/30 text-foreground placeholder:text-muted-foreground/50 focus:border-[#D4AF37] focus:outline-none focus:ring-1 focus:ring-[#D4AF37] transition-colors resize-none text-base"
/>
</div>
{/* Submit Button */}
<Button
type="submit"
disabled={isLoading}
className="w-full h-14 min-h-11 bg-[#D4AF37] hover:bg-[#B8942D] text-[#0a0a0a] font-sans font-semibold tracking-wider uppercase text-sm disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? (
<span className="flex items-center gap-2">
<div className="w-5 h-5 border-2 border-[#0a0a0a]/30 border-t-[#0a0a0a] rounded-full animate-spin" />
Submitting...
</span>
) : (
<span className="flex items-center gap-2">
Submit Application
<Send className="w-4 h-4" />
</span>
)}
</Button>
</form>
)}
</div>
</div>
</section>
)
}9. components/footer.tsx
import Link from "next/link"
import { Instagram, Linkedin, Mail, Phone } from "lucide-react"
export function Footer() {
return (
<footer id="contact" className="bg-[#0f0f0f] border-t border-[#D4AF37]/20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="grid md:grid-cols-3 gap-12 md:gap-8">
{/* Brand */}
<div>
<Link href="/" className="flex items-center gap-3 mb-6">
<div className="w-12 h-12 border-2 border-[#D4AF37] flex items-center justify-center">
<span className="font-serif text-[#D4AF37] font-bold text-xl">AJ</span>
</div>
<div>
<span className="font-serif text-xl tracking-wider text-foreground block">
ENTERPRISE
</span>
<span className="text-xs text-muted-foreground tracking-widest uppercase">
Elite Football Academy
</span>
</div>
</Link>
<p className="text-sm text-muted-foreground leading-relaxed max-w-xs">
Building the future of football, one champion at a time.
Professional management and elite training for aspiring athletes.
</p>
</div>
{/* Quick Links */}
<div>
<h4 className="font-sans font-semibold text-foreground tracking-wider uppercase text-sm mb-6">
Quick Links
</h4>
<ul className="space-y-3">
{[
{ href: "#about", label: "About Us" },
{ href: "#pricing", label: "Performance Packs" },
{ href: "#consultation", label: "Request Session" },
].map((link) => (
<li key={link.href}>
<Link
href={link.href}
className="text-sm text-muted-foreground hover:text-[#D4AF37] transition-colors min-h-11 flex items-center"
>
{link.label}
</Link>
</li>
))}
</ul>
</div>
{/* Contact */}
<div>
<h4 className="font-sans font-semibold text-foreground tracking-wider uppercase text-sm mb-6">
Get in Touch
</h4>
<ul className="space-y-4">
<li>
<a
href="mailto:badanga2ahmed@gmail.com"
className="flex items-center gap-3 text-sm text-muted-foreground hover:text-[#D4AF37] transition-colors group min-h-11"
>
<Mail className="w-5 h-5 text-[#D4AF37] group-hover:scale-110 transition-transform" />
badanga2ahmed@gmail.com
</a>
</li>
<li>
<a
href="tel:07044415485"
className="flex items-center gap-3 text-sm text-muted-foreground hover:text-[#D4AF37] transition-colors group min-h-11"
>
<Phone className="w-5 h-5 text-[#D4AF37] group-hover:scale-110 transition-transform" />
07044415485
</a>
</li>
</ul>
{/* Social Links */}
<div className="flex gap-4 mt-8">
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="w-11 h-11 min-h-11 min-w-11 border border-[#D4AF37]/30 flex items-center justify-center text-muted-foreground hover:text-[#D4AF37] hover:border-[#D4AF37] transition-colors"
aria-label="Follow on Instagram"
>
<Instagram className="w-5 h-5" />
</a>
<a
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
className="w-11 h-11 min-h-11 min-w-11 border border-[#D4AF37]/30 flex items-center justify-center text-muted-foreground hover:text-[#D4AF37] hover:border-[#D4AF37] transition-colors"
aria-label="Connect on LinkedIn"
>
<Linkedin className="w-5 h-5" />
</a>
</div>
</div>
</div>
{/* Bottom Bar */}
<div className="mt-16 pt-8 border-t border-[#D4AF37]/10 flex flex-col sm:flex-row items-center justify-between gap-4">
<p className="text-xs text-muted-foreground">
© {new Date().getFullYear()} AJ Enterprise. All rights reserved.
</p>
<p className="text-xs text-muted-foreground">
Crafted with excellence for future champions
</p>
</div>
</div>
</footer>
)
}10. package.json
{
"name": "aj-enterprise",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint ."
},
"dependencies": {
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.564.0",
"next": "14.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
"@types/node": "^22",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8.5",
"tailwindcss": "^4.2.0",
"tw-animate-css": "1.3.3",
"typescript": "5.7.3"
}
}Setup Instructions
- Create a new Next.js project:
npx create-next-app@latest aj-enterprise Create the folder structure:
app/(layout.tsx, page.tsx, globals.css)components/(all component files)components/ui/(you'll need shadcn Button component)public/(add your hero-bg.jpg and ahmed-portrait.jpg images)
- Install shadcn/ui:
npx shadcn@latest initthennpx shadcn@latest add button - Run
pnpm installthenpnpm dev
You'll also need to add your own images to the /public folder for the hero background and Ahmed's portrait.
49d ago
