Replicate google.com home page

This basic example creates a layout similar to the Google homepage with a logo, a search input, and two buttons using react. You can expand on this by adding functionality, routing, or further styling to make it more like the actual Google homepage.

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

function App() {
  return (
    <div className="App">
      <div className="google-logo">
        <img
          src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_92x30dp.png"
          alt="Google Logo"
        />
      </div>
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          placeholder="Search Google or type a URL"
        />
        <div className="buttons">
          <button className="btn">Google Search</button>
          <button className="btn">I'm Feeling Lucky</button>
        </div>
      </div>
    </div>
  );
}

export default App;

.App {
  text-align: center;
  padding: 50px;
  background-color: #fff;
}

.google-logo img {
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-input {
  width: 400px;
  height: 40px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #dcdcdc;
  border-radius: 24px;
  outline: none;
}

.buttons {
  margin-top: 20px;
}

.btn {
  margin: 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 14px;
}

.btn:hover {
  background-color: #e8e8e8;
}