Bold Modern Design: Breaking Typography Rules for Visual Impact

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="header bg-electric-blue text-fluorescent-pink">
        <h1 className="headline text-9xl font-extrabold">BOLD & MODERN</h1>
      </header>
      <section className="about bg-bright-yellow text-dark">
        <h2 className="text-6xl font-bold">ABOUT US</h2>
        <p className="text-xl">We break the rules to create impact.</p>
      </section>
      <section className="services bg-dark text-fluorescent-pink">
        <h2 className="text-6xl font-bold">SERVICES</h2>
        <div className="grid grid-cols-3 gap-4">
          <div className="service bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Design</h3>
            <p className="text-lg">Innovative and bold designs.</p>
          </div>
          <div className="service bg-bright-yellow p-6">
            <h3 className="text-4xl font-bold">Strategy</h3>
            <p className="text-lg">Forward-thinking strategies.</p>
          </div>
          <div className="service bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Consulting</h3>
            <p className="text-lg">Expert consulting services.</p>
          </div>
        </div>
      </section>
      <section className="portfolio bg-fluorescent-pink text-dark">
        <h2 className="text-6xl font-bold">PORTFOLIO</h2>
        <div className="grid grid-cols-2 gap-4">
          <div className="portfolio-item bg-bright-yellow p-6">
            <h3 className="text-4xl font-bold">Project 1</h3>
            <p className="text-lg">A bold new approach.</p>
          </div>
          <div className="portfolio-item bg-electric-blue p-6">
            <h3 className="text-4xl font-bold">Project 2</h3>
            <p className="text-lg">Breaking the mold.</p>
          </div>
        </div>
      </section>
      <section className="testimonials bg-dark text-fluorescent-pink">
        <h2 className="text-6xl font-bold">TESTIMONIALS</h2>
        <div className="grid grid-cols-3 gap-4">
          <div className="testimonial bg-electric-blue p-6">
            <p className="text-lg">"Amazing work!"</p>
          </div>
          <div className="testimonial bg-bright-yellow p-6">
            <p className="text-lg">"Beyond expectations."</p>
          </div>
          <div className="testimonial bg-electric-blue p-6">
            <p className="text-lg">"Highly recommend."</p>
          </div>
        </div>
      </section>
      <section className="contact bg-fluorescent-pink text-dark">
        <h2 className="text-6xl font-bold">CONTACT</h2>
        <form className="grid grid-cols-1 gap-4">
          <input type="text" placeholder="Name" className="p-2" />
          <input type="email" placeholder="Email" className="p-2" />
          <textarea placeholder="Message" className="p-2" />
          <button type="submit" className="bg-electric-blue text-dark p-2">Send</button>
        </form>
      </section>
      <footer className="footer bg-dark text-fluorescent-pink">
        <p className="text-lg">© 2025 Bold & Modern. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;