Th3 Gr330PIII!!!

Back again

Build a Site (REACT code)

 import React, { useState, useEffect } from 'react';

// Main App component for the Home Warranty Website

function App() {

  // State to manage the visibility of a simple modal/message box

  const [showMessage, setShowMessage] = useState(false);

  const [messageContent, setMessageContent] = useState('');

  // Function to display a custom message box instead of alert()

  const displayMessageBox = (message) => {

    setMessageContent(message);

    setShowMessage(true);

  };

  // Effect to hide the message box after a few seconds

  useEffect(() => {

    let timer;

    if (showMessage) {

      timer = setTimeout(() => {

        setShowMessage(false);

        setMessageContent('');

      }, 3000); // Message disappears after 3 seconds

    }

    return () => clearTimeout(timer);

  }, [showMessage]);

  return (

    <div className="min-h-screen bg-gray-100 font-sans text-gray-800">

      {/* Tailwind CSS CDN is loaded in the HTML file, so no import needed here */}

      {/* Custom Message Box */}

      {showMessage && (

        <div className="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50 p-4">

          <div className="bg-white rounded-lg shadow-xl p-6 max-w-sm w-full text-center">

            <p className="text-lg font-semibold mb-4">{messageContent}</p>

            <button

              onClick={() => setShowMessage(false)}

              className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200"

            >

              Close

            </button>

          </div>

        </div>

      )}

      {/* Header Section */}

      <header className="bg-gradient-to-r from-blue-700 to-blue-900 text-white shadow-lg py-6 px-4 sm:px-6 lg:px-8 rounded-b-xl">

        <div className="container mx-auto flex flex-col sm:flex-row justify-between items-center">

          <h1 className="text-4xl font-extrabold tracking-tight mb-4 sm:mb-0">

            Choice Home Warranty

          </h1>

          <nav className="text-lg font-medium">

            <ul className="flex flex-wrap justify-center gap-x-6 gap-y-2">

              <li><a href="#hero" className="hover:text-blue-200 transition-colors duration-200">Home</a></li>

              <li><a href="#benefits" className="hover:text-blue-200 transition-colors duration-200">Benefits</a></li>

              <li><a href="#services" className="hover:text-blue-200 transition-colors duration-200">Services</a></li>

              <li><a href="#about" className="hover:text-blue-200 transition-colors duration-200">About Me</a></li>

              <li><a href="#contact" className="hover:text-blue-200 transition-colors duration-200">Contact</a></li>

            </ul>

          </nav>

        </div>

      </header>

      {/* Hero Section */}

      <section id="hero" className="relative bg-blue-600 text-white py-20 px-4 sm:px-6 lg:px-8 text-center overflow-hidden rounded-xl m-4 shadow-lg">

        <div className="absolute inset-0 bg-pattern opacity-10"></div> {/* Background pattern */}

        <div className="container mx-auto relative z-10">

          <h2 className="text-5xl font-extrabold leading-tight mb-6 animate-fade-in-down">

            Protect Your Investment, Gain Peace of Mind

          </h2>

          <p className="text-xl mb-8 max-w-3xl mx-auto animate-fade-in-up">

            Comprehensive home warranty solutions for landlords and homeowners.

            Ensure your property is covered, 24/7.

          </p>

          <a

            href="#contact"

            className="inline-block bg-white text-blue-700 font-bold py-3 px-8 rounded-full text-lg shadow-lg hover:bg-gray-100 hover:scale-105 transition-all duration-300 transform"

          >

            Get Your Free Quote Today!

          </a>

        </div>

      </section>

      {/* Benefits Section */}

      <section id="benefits" className="py-16 px-4 sm:px-6 lg:px-8 bg-white rounded-xl m-4 shadow-lg">

        <div className="container mx-auto text-center">

          <h3 className="text-4xl font-bold mb-12 text-blue-800">Why Choose a Home Warranty?</h3>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">

            {/* Benefit Card 1 */}

            <div className="bg-blue-50 p-8 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 border border-blue-200">

              <div className="text-blue-600 mb-4">

                <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>

                </svg>

              </div>

              <h4 className="text-2xl font-semibold mb-4 text-blue-700">24/7 Support</h4>

              <p className="text-gray-700">

                Emergencies don't wait. Our 24/7 claim line ensures help is always just a phone call away, day or night.

              </p>

            </div>

            {/* Benefit Card 2 */}

            <div className="bg-blue-50 p-8 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 border border-blue-200">

              <div className="text-blue-600 mb-4">

                <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.007 12.007 0 002.944 12c0 2.893 1.144 5.723 3.166 7.745A11.955 11.955 0 0112 21.056c2.893 0 5.723-1.144 7.745-3.166A12.007 12.007 0 0021.056 12c0-2.893-1.144-5.723-3.166-7.745z"></path>

                </svg>

              </div>

              <h4 className="text-2xl font-semibold mb-4 text-blue-700">Trusted Professionals</h4>

              <p className="text-gray-700">

                We dispatch licensed and vetted technicians, ensuring quality repairs and peace of mind for you and your tenants.

              </p>

            </div>

            {/* Benefit Card 3 */}

            <div className="bg-blue-50 p-8 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 border border-blue-200">

              <div className="text-blue-600 mb-4">

                <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 12h-4m-7 4v2m-6 0h12a2 2 0 002-2v-2a2 2 0 00-2-2H9a2 2 0 00-2 2v2a2 2 0 002 2zm8-12V5c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2m-4 0h16"></path>

                </svg>

              </div>

              <h4 className="text-2xl font-semibold mb-4 text-blue-700">Cost-Effective Solutions</h4>

              <p className="text-gray-700">

                Pay a small service fee per visit, saving you hundreds or thousands on unexpected repair costs.

              </p>

            </div>

          </div>

        </div>

      </section>

      {/* Services Section */}

      <section id="services" className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 rounded-xl m-4 shadow-lg">

        <div className="container mx-auto text-center">

          <h3 className="text-4xl font-bold mb-12 text-blue-800">What Our Home Warranty Covers</h3>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            {/* Service Item 1 */}

            <div className="bg-white p-6 rounded-xl shadow-md border border-gray-200">

              <h4 className="text-2xl font-semibold mb-3 text-blue-700">Appliances</h4>

              <ul className="list-disc list-inside text-left text-gray-700 space-y-2">

                <li>Refrigerator</li>

                <li>Oven/Range/Cooktop</li>

                <li>Dishwasher</li>

                <li>Built-in Microwave</li>

                <li>Washing Machine</li>

                <li>Clothes Dryer</li>

                <li>Garbage Disposal</li>

              </ul>

            </div>

            {/* Service Item 2 */}

            <div className="bg-white p-6 rounded-xl shadow-md border border-gray-200">

              <h4 className="text-2xl font-semibold mb-3 text-blue-700">Major Systems</h4>

              <ul className="list-disc list-inside text-left text-gray-700 space-y-2">

                <li>Heating System</li>

                <li>Air Conditioning System</li>

                <li>Electrical System</li>

                <li>Plumbing System</li>

                <li>Water Heater</li>

                <li>Ductwork</li>

              </ul>

            </div>

            {/* Service Item 3 */}

            <div className="bg-white p-6 rounded-xl shadow-md border border-gray-200">

              <h4 className="text-2xl font-semibold mb-3 text-blue-700">Optional Coverage</h4>

              <ul className="list-disc list-inside text-left text-gray-700 space-y-2">

                <li>Pool/Spa</li>

                <li>Well Pump</li>

                <li>Sump Pump</li>

                <li>Septic System</li>

                <li>Central Vacuum</li>

                <li>Second Refrigerator</li>

              </ul>

            </div>

          </div>

          <p className="mt-8 text-lg text-gray-600">

            *Coverage details may vary by plan. Contact us for a full breakdown of what's included.

          </p>

        </div>

      </section>

      {/* About Me/Testimonial Section */}

      <section id="about" className="py-16 px-4 sm:px-6 lg:px-8 bg-blue-700 text-white rounded-xl m-4 shadow-lg">

        <div className="container mx-auto text-center max-w-4xl">

          <h3 className="text-4xl font-bold mb-8">My Landlord Journey & Your Peace of Mind</h3>

          <p className="text-xl leading-relaxed mb-6">

            "After more than 35 years as a landlord, one of the most impactful decisions I’ve made was to remove myself from the day-to-day real estate triage and hand that responsibility over to professionals. This shift has given me something truly priceless: **peace of mind.**"

          </p>

          <p className="text-xl leading-relaxed mb-6">

            "The turning point came when I purchased a home warranty from Choice Home Warranty. It wasn’t just about coverage—it was about having a reliable system in place to handle the most common and often most frustrating issues landlords face. With their **24/7 claim line**, the responsibility of dispatching a licensed expert is off my plate and onto theirs. Most issues are resolved on the first visit, and the cost? Just a **$75 service fee**—a fraction of what it would cost to independently source and schedule a technician."

          </p>

          <p className="text-xl leading-relaxed font-semibold">

            "For any absentee landlord, this kind of support isn’t just helpful—it’s essential."

          </p>

          <p className="mt-8 text-lg">

            - A Satisfied Landlord & Home Warranty Advocate

          </p>

        </div>

      </section>

      {/* Contact Section */}

      <section id="contact" className="py-16 px-4 sm:px-6 lg:px-8 bg-white rounded-xl m-4 shadow-lg">

        <div className="container mx-auto text-center">

          <h3 className="text-4xl font-bold mb-8 text-blue-800">Ready for Peace of Mind?</h3>

          <p className="text-xl mb-8 max-w-2xl mx-auto">

            Let's discuss how a home warranty can simplify your property management and protect your investment.

            I'd be happy to share my experience and help you explore your options.

          </p>

          <div className="flex flex-col items-center justify-center space-y-6">

            <a

              href="tel:+17272682369"

              className="inline-flex items-center bg-green-600 text-white font-bold py-4 px-10 rounded-full text-2xl shadow-lg hover:bg-green-700 hover:scale-105 transition-all duration-300 transform"

            >

              <svg className="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>

              </svg>

              Call Me Today: (727) 268-2369

            </a>

            <button

              onClick={() => {

                // Example of using the custom message box

                displayMessageBox('Thank you for your interest! Please call the number above.');

              }}

              className="mt-4 text-blue-600 hover:underline text-lg"

            >

              Click here if you prefer to be contacted (Coming Soon!)

            </button>

          </div>

        </div>

      </section>

      {/* Footer */}

      <footer className="bg-gray-800 text-white py-6 px-4 sm:px-6 lg:px-8 text-center rounded-t-xl mt-4">

        <div className="container mx-auto">

          <p className="text-sm">

            &copy; {new Date().getFullYear()} Choice Home Warranty. All rights reserved.

          </p>

          <p className="text-sm mt-2">

            Disclaimer: I am an independent agent promoting Choice Home Warranty services.

          </p>

        </div>

      </footer>

      {/* Custom CSS for animations and background pattern */}

      <style>{`

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        body {

          font-family: 'Inter', sans-serif;

        }

        .bg-pattern {

          background-image: radial-gradient(#ffffff33 1px, transparent 1px);

          background-size: 20px 20px;

        }

        @keyframes fadeInDown {

          from {

            opacity: 0;

            transform: translateY(-20px);

          }

          to {

            opacity: 1;

            transform: translateY(0);

          }

        }

        @keyframes fadeInUp {

          from {

            opacity: 0;

            transform: translateY(20px);

          }

          to {

            opacity: 1;

            transform: translateY(0);

          }

        }

        .animate-fade-in-down {

          animation: fadeInDown 1s ease-out forwards;

        }

        .animate-fade-in-up {

          animation: fadeInUp 1s ease-out forwards;

        }

      `}</style>

    </div>

  );

}

export default App;

Awww