<div className="flex flex-col min-h-screen">
  <header className="bg-gray-900 text-white py-4 px-8">
    <nav className="container mx-auto flex justify-between items-center">
      <a href="#" className="font-bold text-2xl">
        <i className="fas fa-tools"></i> Home Improvement
      </a>
      <ul className="flex space-x-4 font-roboto">
        <li>
          <a href="#" className="text-gray-300 hover:text-gray-100">
            Services
          </a>
        </li>
        <li>
          <a href="#" className="text-gray-300 hover:text-gray-100">
            Projects
          </a>
        </li>
        <li>
          <a href="#" className="text-gray-300 hover:text-gray-100">
            Gallery
          </a>
        </li>
        <li>
          <a href="#" className="text-gray-300 hover:text-gray-100">
            Testimonials
          </a>
        </li>
        <li>
          <a href="#" className="text-gray-300 hover:text-gray-100">
            Contact
          </a>
        </li>
      </ul>
    </nav>
  </header>

  <main className="container mx-auto py-10">
    <section className="flex flex-col space-y-8">
      <div className="flex flex-col items-center justify-center">
        <h1 className="text-4xl font-roboto font-bold text-gray-900">
          Upgrade Your Home
        </h1>
        <p className="text-lg font-roboto text-gray-700">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          ultricies ligula in nisi dapibus cursus. Donec sodales sem sit amet
          orci faucibus, sed suscipit massa posuere.
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <div className="bg-white rounded-lg p-6 shadow-md">
          <i className="fas fa-hammer text-5xl text-gray-900 mb-4"></i>
          <h2 className="text-2xl font-roboto font-bold text-gray-900 mb-2">
            Expert Services
          </h2>
          <p className="font-roboto text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            ultricies ligula in nisi dapibus cursus.
          </p>
        </div>
        <div className="bg-white rounded-lg p-6 shadow-md">
          <i className="fas fa-paint-roller text-5xl text-gray-900 mb-4"></i>
          <h2 className="text-2xl font-roboto font-bold text-gray-900 mb-2">
            Quality Materials
          </h2>
          <p className="font-roboto text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            ultricies ligula in nisi dapibus cursus.
          </p>
        </div>
        <div className="bg-white rounded-lg p-6 shadow-md">
          <i className="fas fa-toolbox text-5xl text-gray-900 mb-4"></i>
          <h2 className="text-2xl font-roboto font-bold text-gray-900 mb-2">
            Comprehensive Solutions
          </h2>
          <p className="font-roboto text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            ultricies ligula in nisi dapibus cursus.
          </p>
        </div>
      </div>

      <div className="flex flex-col items-center">
        <h2 className="text-3xl font-roboto font-bold text-gray-900">
          Our Projects
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <div className="flex flex-col items-center">
            <img
              src="/project-1.jpg"
              alt="Modern kitchen renovation"
              className="w-full h-48 object-cover rounded-lg mb-4"
            />
            <h3 className="text-xl font-roboto font-bold text-gray-900 mb-2">
              Modern Kitchen Renovation
            </h3>
            <p className="font-roboto text-gray-700">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
          <div className="flex flex-col items-center">
            <img
              src="/project-2.jpg"
              alt="Bathroom remodeling"
              className="w-full h-48 object-cover rounded-lg mb-4"
            />
            <h3 className="text-xl font-roboto font-bold text-gray-900 mb-2">
              Bathroom Remodeling
            </h3>
            <p className="font-roboto text-gray-700">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
          <div className="flex flex-col items-center">
            <img
              src="/project-3.jpg"
              alt="Living room design"
              className="w-full h-48 object-cover rounded-lg mb-4"
            />
            <h3 className="text-xl font-roboto font-bold text-gray-900 mb-2">
              Living Room Design
            </h3>
            <p className="font-roboto text-gray-700">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
        </div>
      </div>
    </section>
  </main>
</div>

Generate automagically

Product

Build an app

Resources

Newsletter

Blog

Company

Careers

Contact Us

© 2023 Create, Inc.