Perplexity Home Page Clone

lets us understand the features of an perlexity web site homepage

Key Features Observed

Sidebar Navigation
- On the left, there’s a vertical sidebar with clear icon-based navigation for Home, Discover, Spaces, and Account sections, a common UI pattern in SaaS dashboards. The sidebar helps users quickly access the main sections of the app.
- There is a prominent ‘+’ button for quick actions, such as creating or adding new content.
Central Interactive Search/Input
- The center of the page features a large, inviting input box for typing queries or mentioning Spaces, acting as the app’s core interaction point.
- There are icons within the input box for different search/filter modalities — standard search, exclusion, and ideas, showing an advanced query capability.
- Additional buttons for language selection, attachments, voice input, and other advanced search features are present below the input, enhancing accessibility and versatility.
Branding and Pro Badge
- The logo “perplexity pro” is centrally placed and visually prominent, reinforcing brand identity and subscription status.
User Account and Status
- Bottom left contains the account section with a “pro” badge, indicating an upgraded or premium account is in use.
- The notification bell icon allows users to access alerts quickly.
UI/UX Details
- Ample whitespace, consistent iconography, and minimal color distraction create a focus on functionality.
- Gentle use of color for the “pro” badge, search buttons, and floating edit button provides visual cues without overwhelming the user.
- There is a floating button (edit icon) at the upper right, likely for feedback or quick note-taking, which shows modern floating action button design.
- “Activate Windows” watermark at the bottom right indicates the OS state but isn’t connected to the web app.

Technical Perspective

Responsiveness: The layout and spacing suggest a responsive design suited for both wide screens and smaller devices.
Component-based Architecture: The interface appears modular, likely using modern frameworks (such as React/Vue) for reusability and maintainability.
Accessibility: Controls are spaced and labeled with icons, likely making the app easier to use for all users.
Performance Oriented: Minimalist design without heavy graphics suggests prioritization of speed and user performance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Perplexity Home Page</title>
<style>
  /* Reset margins and paddings */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #222;
  }

  header {
    padding: 20px;
    text-align: center;
    background-color: #0b3d91;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
  }

  main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
  }

  .search-container {
    width: 100%;
    max-width: 600px;
  }

  .search-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.2rem;
    border: 2px solid #0b3d91;
    border-radius: 50px;
    outline: none;
    transition: border-color 0.3s ease;
  }

  .search-input:focus {
    border-color: #1e90ff;
  }

  .search-button {
    margin-top: 15px;
    width: 100%;
    background-color: #0b3d91;
    border: none;
    color: white;
    padding: 15px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .search-button:hover {
    background-color: #1e90ff;
  }

  footer {
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
    background-color: #ddd;
    color: #444;
  }

  /* Responsive */
  @media (max-width: 600px){
    header {
      font-size: 1.5rem;
    }
    .search-input, .search-button {
      font-size: 1rem;
      padding: 12px 15px;
    }
  }
</style>
</head>
<body>

<header>
  Perplexity AI
</header>

<main>
  <div class="search-container">
    <input
      type="text"
      class="search-input"
      id="searchInput"
      placeholder="Ask anything..."
      aria-label="Search"
    />
    <button class="search-button" id="searchButton">Search</button>
  </div>
</main>

<footer>
  © 2025 Perplexity AI. All rights reserved.
</footer>

<script>
  const input = document.getElementById('searchInput');
  const button = document.getElementById('searchButton');

  button.addEventListener('click', () => {
    const query = input.value.trim();
    if (query) {
      alert('You searched for: ' + query);
      // Here you can add actual search handling logic or redirection
      input.value = '';
    } else {
      alert('Please enter a query to search.');
    }
  });

  input.addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
      button.click();
    }
  });
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Perplexity Home Page</title>
<style>
  /* Reset margins and paddings */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #222;
  }

  header {
    padding: 20px;
    text-align: center;
    background-color: #0b3d91;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
  }

  main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
  }

  .search-container {
    width: 100%;
    max-width: 600px;
  }

  .search-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.2rem;
    border: 2px solid #0b3d91;
    border-radius: 50px;
    outline: none;
    transition: border-color 0.3s ease;
  }

  .search-input:focus {
    border-color: #1e90ff;
  }

  .search-button {
    margin-top: 15px;
    width: 100%;
    background-color: #0b3d91;
    border: none;
    color: white;
    padding: 15px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .search-button:hover {
    background-color: #1e90ff;
  }

  footer {
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
    background-color: #ddd;
    color: #444;
  }

  /* Responsive */
  @media (max-width: 600px){
    header {
      font-size: 1.5rem;
    }
    .search-input, .search-button {
      font-size: 1rem;
      padding: 12px 15px;
    }
  }
</style>
</head>
<body>

<header>
  Perplexity AI
</header>

<main>
  <div class="search-container">
    <input
      type="text"
      class="search-input"
      id="searchInput"
      placeholder="Ask anything..."
      aria-label="Search"
    />
    <button class="search-button" id="searchButton">Search</button>
  </div>
</main>

<footer>
  © 2025 Perplexity AI. All rights reserved.
</footer>

<script>
  const input = document.getElementById('searchInput');
  const button = document.getElementById('searchButton');

  button.addEventListener('click', () => {
    const query = input.value.trim();
    if (query) {
      alert('You searched for: ' + query);
      // Here you can add actual search handling logic or redirection
      input.value = '';
    } else {
      alert('Please enter a query to search.');
    }
  });

  input.addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
      button.click();
    }
  });
</script>

</body>
</html>