Untitled

import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

function MainPage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white p-6 space-y-16 font-sans">
      {/* Title Banner */}
      <section className="text-center">
        <img src="/branding-banner.png" alt="Nathan Perez Logo" className="mx-auto mb-4 rounded-xl shadow-lg w-full max-w-5xl" />
        <h1 className="text-5xl font-extrabold tracking-tight">Nathan Perez Escobar: Changing the Game</h1>
        <p className="mt-3 text-xl text-gray-300">Branding the Future of Sports & Entertainment Media</p>
      </section>

      {/* About Me Section */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-gray-900 p-6 rounded-xl shadow-xl">
        <img src="/IMG_3747.jpeg" alt="Nathan Perez Escobar" className="rounded-2xl shadow-xl border-4 border-pink-500" />
        <div>
          <h2 className="text-3xl font-bold mb-4">About Me</h2>
          <p className="text-lg">Hey, I’m <strong>Nathan Perez Escobar</strong>. I’m 17 years old, born in Toronto, Canada, and proud of my Colombian roots. I’m passionate about the intersection of sports, entertainment, and digital storytelling. Whether it’s through creative marketing, broadcasting, or journalism, my goal is to reshape how we experience sports culture.</p>
          <p className="mt-4 text-lg">Words that define my brand: <span className="text-pink-400 font-semibold">Driven, Honest, Visionary, Connected</span>. I see myself aligned with brands like <span className="text-pink-400 font-semibold">ESPN, Bleacher Report, Nike, and Netflix</span> — companies that push the envelope, tell real stories, and connect with people on a human level.</p>
        </div>
      </section>

      {/* Discussion Board Posts */}
      <section className="bg-gray-800 p-8 rounded-xl">
        <h2 className="text-3xl font-bold text-pink-400 mb-6">Featured Discussion Posts</h2>
        <div className="space-y-10">
          <div>
            <h3 className="text-2xl font-semibold text-white">Entertainment Influence Debate</h3>
            <p className="italic text-gray-400">Topic: Exploring how film and television shape public behavior, trends, and values.</p>
            <Link to="/post1" className="text-pink-400 underline">Read Full Post</Link>
          </div>
          <div>
            <h3 className="text-2xl font-semibold text-white">The Queen of Basketball: An Unsung Hero</h3>
            <p className="italic text-gray-400">Topic: Uncovering Lucy Harris’s overlooked impact on sports history and the intersection of race and gender.</p>
            <Link to="/post2" className="text-pink-400 underline">Read Full Post</Link>
          </div>
          <div>
            <h3 className="text-2xl font-semibold text-white">Male vs. Female Professional Sports Pay Gap</h3>
            <p className="italic text-gray-400">Topic: Examining the salary disparities in sports and how we can work toward equality.</p>
            <Link to="/post3" className="text-pink-400 underline">Read Full Post</Link>
          </div>
        </div>
      </section>

      {/* Responses Section */}
      <section className="bg-gray-900 p-8 rounded-xl">
        <h2 className="text-3xl font-bold text-pink-400 mb-6">Peer Engagement</h2>
        <div className="space-y-6">
          <div>
            <h4 className="font-semibold text-xl text-white">Reply to Mya Santos – Pay Gap</h4>
            <Link to="/reply1" className="text-pink-400 underline">Read Full Reply</Link>
          </div>
          <div>
            <h4 className="font-semibold text-xl text-white">Reply to Carissa Kong – Entertainment Influence</h4>
            <Link to="/reply2" className="text-pink-400 underline">Read Full Reply</Link>
          </div>
          <div>
            <h4 className="font-semibold text-xl text-white">Reply to Elia Reitano – Turning Trauma into Entertainment</h4>
            <Link to="/reply3" className="text-pink-400 underline">Read Full Reply</Link>
          </div>
        </div>
      </section>

      {/* Reflective Section */}
      <section className="bg-gray-800 p-8 rounded-xl">
        <h2 className="text-3xl font-bold text-pink-400 mb-4">Reflective Portfolio</h2>
        <p className="text-lg text-gray-300">This course helped me realize that sports marketing isn’t just about ads — it’s about impact. I’ve learned how storytelling can drive change, uplift underrepresented voices, and shift how people see sports and entertainment. I want to be part of that. My goal is to use digital platforms and content to inspire, connect, and create meaning in a world that’s constantly evolving.</p>
      </section>

      {/* Visual Poster */}
      <section className="text-center bg-gray-900 p-8 rounded-xl">
        <h2 className="text-2xl font-semibold text-white mb-4">Visual Spotlight</h2>
        <img src="/Lusia 'Lucy' Harris Basketball Pioneer.png" alt="Lucy Harris Tribute" className="mx-auto rounded-xl shadow-xl border-2 border-pink-500 max-w-2xl" />
        <p className="mt-4 text-sm text-gray-400">Tribute graphic for Lucy Harris — an unsung pioneer in women's basketball history.</p>
      </section>

      {/* Footer Branding */}
      <footer className="text-center pt-12 pb-6">
        <p className="text-pink-400 text-lg font-semibold">Real stories. Real people. Real impact.</p>
        <p className="text-sm text-gray-500 mt-2">© 2025 Nathan Perez Escobar</p>
      </footer>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/post1" element={<div className='p-6 text-white'>[Full content for Entertainment Influence Debate]</div>} />
        <Route path="/post2" element={<div className='p-6 text-white'>[Full content for The Queen of Basketball]</div>} />
        <Route path="/post3" element={<div className='p-6 text-white'>[Full content for Pay Gap in Sports]</div>} />
        <Route path="/reply1" element={<div className='p-6 text-white'>[Full reply to Mya Santos]</div>} />
        <Route path="/reply2" element={<div className='p-6 text-white'>[Full reply to Carissa Kong]</div>} />
        <Route path="/reply3" element={<div className='p-6 text-white'>[Full reply to Elia Reitano]</div>} />
      </Routes>
    </Router>
  );
}