<div className="flex flex-col min-h-screen">
  <header className="bg-gray-800">
    <div className="container mx-auto py-6 px-4">
      <nav className="flex items-center justify-between">
        <div className="flex items-center">
          <h1 className="text-white text-2xl font-roboto font-bold">Fake App</h1>
        </div>
        <div className="flex items-center">
          <a href="#" className="text-gray-300 hover:text-white px-3 py-2 rounded-md font-roboto">Home</a>
          <a href="#" className="text-gray-300 hover:text-white px-3 py-2 rounded-md font-roboto">About</a>
          <a href="#" className="text-gray-300 hover:text-white px-3 py-2 rounded-md font-roboto">Contact</a>
        </div>
      </nav>
    </div>
  </header>
  <main className="flex-grow">
    <section className="py-16 bg-[#f9fafb]">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center">
          <h2 className="text-4xl font-roboto font-bold text-gray-800 mb-4">Welcome to Fake App</h2>
          <p className="text-lg font-roboto text-gray-600 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#" className="bg-blue-600 hover:bg-blue-700 text-white font-roboto py-3 px-6 rounded-md shadow-lg">Sign Up</a>
        </div>
      </div>
    </section>
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-3 gap-8">
          <div className="flex flex-col items-center">
            <div className="rounded-full bg-blue-600 text-white p-4">
              <i className="fas fa-database text-4xl"></i>
            </div>
            <h3 className="text-xl font-roboto font-bold text-gray-800 mt-4">Data Management</h3>
            <p className="text-lg font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <div className="flex flex-col items-center">
            <div className="rounded-full bg-blue-600 text-white p-4">
              <i className="fas fa-chart-line text-4xl"></i>
            </div>
            <h3 className="text-xl font-roboto font-bold text-gray-800 mt-4">Analytics</h3>
            <p className="text-lg font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
          <div className="flex flex-col items-center">
            <div className="rounded-full bg-blue-600 text-white p-4">
              <i className="fas fa-users text-4xl"></i>
            </div>
            <h3 className="text-xl font-roboto font-bold text-gray-800 mt-4">User Management</h3>
            <p className="text-lg font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
    </section>
    <section className="py-16 bg-[#f9fafb]">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center">
          <h2 className="text-4xl font-roboto font-bold text-gray-800 mb-4">Why Choose Fake App?</h2>
          <p className="text-lg font-roboto text-gray-600 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div className="grid grid-cols-3 gap-8">
            <div className="flex flex-col items-center">
              <div className="rounded-full bg-blue-600 text-white p-4">
                <i className="fas fa-check-circle text-4xl"></i>
              </div>
              <h4 className="text-lg font-roboto font-bold text-gray-800 mt-4">Easy to Use</h4>
              <p className="text-base font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div className="flex flex-col items-center">
              <div className="rounded-full bg-blue-600 text-white p-4">
                <i className="fas fa-puzzle-piece text-4xl"></i>
              </div>
              <h4 className="text-lg font-roboto font-bold text-gray-800 mt-4">Flexible Integration</h4>
              <p className="text-base font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div className="flex flex-col items-center">
              <div className="rounded-full bg-blue-600 text-white p-4">
                <i className="fas fa-shield-alt text-4xl"></i>
              </div>
              <h4 className="text-lg font-roboto font-bold text-gray-800 mt-4">Secure</h4>
              <p className="text-base font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center">
          <h2 className="text-4xl font-roboto font-bold text-gray-800">Contact Us</h2>
          <p className="text-lg font-roboto text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <form className="mt-8 w-full max-w-md">
            <div className="flex flex-wrap -mx-4">
              <div className="w-full px-4">
                <label htmlFor="name" className="block text-sm font-roboto font-bold text-gray-800">Name</label>
                <input type="text" id="name" name="name" className="mt-1 p-3 w-full border rounded-md" />
              </div>
              <div className="w-full px-4">
                <label htmlFor="email" className="block text-sm font-roboto font-bold text-gray-800">Email</label>
                <input type="email" id="email" name="email" className="mt-1 p-3 w-full border rounded-md" />
              </div>
              <div className="w-full px-4">
                <label htmlFor="message" className="block text-sm font-roboto font-bold text-gray-800">Message</label>
                <textarea id="message" name="message" rows="4" className="mt-1 p-3 w-full border rounded-md"></textarea>
              </div>
            </div>
            <div className="mt-4">
              <button type="submit" className="bg-blue-600 hover:bg-blue-700 text-white font-roboto py-3 px-6 rounded-md shadow-lg">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </section>
  </main>
</div>

Generate automagically

Product

Build an app

Resources

Newsletter

Blog

Company

Careers

Contact Us

© 2023 Create, Inc.