Vercelの生成AIサービス「v0」で簡単なWebページデザインを始めてみる

            
            この画像を参考に、以下の要件を満たす、シンプルな小規模事業者向けのECサイトの商品一覧のためのランディングページのデザインを作成してください：

ページを構成するレイアウト:
ヘッダーと、そのヘッダーのメニューに、HOME/SHOP/Contact Us/Loginページのナビゲーション
バーナー画像を表示するエリア
商品検索のテキストインプット
2行x3列の商品カードをグリッド表示するエリア
商品カードには、商品画像・タイトル・説明文・商品紹介ページへのリンクボタンを含む

デザインの指針:
ECサイトの客層としては、個人で電子工作や日曜プログラミングを趣味とする30代〜50代のエンジニアなどをバックボーンにもつ人物をターゲットにする
ページ全体はシンプルに、落ち着きのあるマリンブルー系の静けさを感じるものに統一
ボタン部分にはホバー時にボーターを強調すうｒアニメーションをつける

出力コードの構成:
シンプルなHTMLフォーマットで出力
スタイル部分はSass(scss)ファイル、もしくはcssファイルでもよい
スクリプト部のロジックは不要、もしくはプレインなJavascript
        

            
            プロジェクトにSvelteのコードも追加してください
        

            
            <script lang="ts">
  let products = [
    { id: 1, title: "Electronic Kit 1", description: "Perfect for DIY electronics projects. Includes all necessary components and detailed instructions." },
    { id: 2, title: "Electronic Kit 2", description: "Advanced kit for experienced hobbyists. Create complex circuits and devices." },
    { id: 3, title: "Electronic Kit 3", description: "Beginner-friendly kit with easy-to-follow projects and educational content." },
    { id: 4, title: "Electronic Kit 4", description: "Specialized kit for IoT projects. Build your own smart home devices." },
    { id: 5, title: "Electronic Kit 5", description: "Robotics-focused kit with motors, sensors, and programmable components." },
    { id: 6, title: "Electronic Kit 6", description: "Audio electronics kit for building amplifiers, speakers, and audio effects." },
  ];
</script>

<main>
  <header>
    <nav>
      <ul>
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">SHOP</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#" class="login">Login</a></li>
      </ul>
    </nav>
  </header>

  <section class="banner">
    <img src="/placeholder.svg" alt="Tech DIY Shop Banner">
  </section>

  <section class="search">
    <input type="text" placeholder="Search products...">
    <button type="submit">Search</button>
  </section>

  <section class="products">
    <div class="product-grid">
      {#each products as product (product.id)}
        <div class="product-card">
          <img src="/placeholder.svg" alt={product.title}>
          <h3>{product.title}</h3>
          <p>{product.description}</p>
          <a href="#" class="btn">View Details</a>
        </div>
      {/each}
    </div>
  </section>
</main>

<style lang="scss">
  /* Variables */
  $primary-color: #1e3a8a;
  $secondary-color: #3b82f6;
  $background-color: #f0f9ff;
  $text-color: #1e293b;
  $card-background: #ffffff;

  /* Global Styles */
  :global(body) {
    font-family: Arial, sans-serif;
    background-color: $background-color;
    color: $text-color;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }

  /* Header Styles */
  header {
    background-color: $primary-color;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  nav ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  nav ul li {
    margin: 0 1rem;
  }

  nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;

    &:hover, &.active {
      color: $secondary-color;
    }
  }

  .login {
    margin-left: auto;
  }

  /* Banner Styles */
  .banner {
    width: 100%;
    height: 300px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* Search Styles */
  .search {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;

    input {
      flex-grow: 1;
      padding: 0.5rem;
      font-size: 1rem;
      border: 1px solid $primary-color;
      border-right: none;
      border-radius: 4px 0 0 4px;
    }

    button {
      padding: 0.5rem 1rem;
      background-color: $primary-color;
      color: white;
      border: 1px solid $primary-color;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: darken($primary-color, 10%);
      }
    }
  }

  /* Product Grid Styles */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
  }

  .product-card {
    background-color: $card-background;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    h3 {
      font-size: 1.2rem;
      margin: 1rem;
    }

    p {
      font-size: 0.9rem;
      margin: 0 1rem 1rem;
      color: lighten($text-color, 20%);
    }

    .btn {
      display: block;
      background-color: $secondary-color;
      color: white;
      text-align: center;
      padding: 0.5rem;
      text-decoration: none;
      margin: 1rem;
      border-radius: 4px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: darken($secondary-color, 10%);
      }
    }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    nav ul {
      flex-direction: column;
      align-items: center;
    }

    nav ul li {
      margin: 0.5rem 0;
    }

    .login {
      margin-left: 0;
    }

    .product-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
  }
</style>
        

            
            プロジェクトにplain HTMLも追加してください
        

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech DIY Shop</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" class="active">HOME</a></li>
                <li><a href="#">SHOP</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#" class="login">Login</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="banner">
            <img src="/placeholder.svg" alt="Tech DIY Shop Banner">
        </section>

        <section class="search">
            <input type="text" placeholder="Search products...">
            <button type="submit">Search</button>
        </section>

        <section class="products">
            <div class="product-grid">
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 1">
                    <h3>Electronic Kit 1</h3>
                    <p>Perfect for DIY electronics projects. Includes all necessary components and detailed instructions.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 2">
                    <h3>Electronic Kit 2</h3>
                    <p>Advanced kit for experienced hobbyists. Create complex circuits and devices.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 3">
                    <h3>Electronic Kit 3</h3>
                    <p>Beginner-friendly kit with easy-to-follow projects and educational content.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 4">
                    <h3>Electronic Kit 4</h3>
                    <p>Specialized kit for IoT projects. Build your own smart home devices.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 5">
                    <h3>Electronic Kit 5</h3>
                    <p>Robotics-focused kit with motors, sensors, and programmable components.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
                <div class="product-card">
                    <img src="/placeholder.svg" alt="Electronic Kit 6">
                    <h3>Electronic Kit 6</h3>
                    <p>Audio electronics kit for building amplifiers, speakers, and audio effects.</p>
                    <a href="#" class="btn">View Details</a>
                </div>
            </div>
        </section>
    </main>
</body>
</html>
        

            
            /* Variables */
:root {
  --primary-color: #1e3a8a;
  --secondary-color: #3b82f6;
  --background-color: #f0f9ff;
  --text-color: #1e293b;
  --card-background: #ffffff;
}

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Header Styles */
header {
  background-color: var(--primary-color);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
  color: var(--secondary-color);
}

.login {
  margin-left: auto;
}

/* Banner Styles */
.banner {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Search Styles */
.search {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
}

.search input {
  flex-grow: 1;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--primary-color);
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.search button {
  padding: 0.5rem 1rem;
  background-color: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search button:hover {
  background-color: #152c69;
}

/* Product Grid Styles */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.product-card {
  background-color: var(--card-background);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-card h3 {
  font-size: 1.2rem;
  margin: 1rem;
}

.product-card p {
  font-size: 0.9rem;
  margin: 0 1rem 1rem;
  color: #4b5563;
}

.product-card .btn {
  display: block;
  background-color: var(--secondary-color);
  color: white;
  text-align: center;
  padding: 0.5rem;
  text-decoration: none;
  margin: 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.product-card .btn:hover {
  background-color: #2563eb;
}

/* Responsive Design */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }

  nav ul li {
    margin: 0.5rem 0;
  }

  .login {
    margin-left: 0;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}