codescoop-layout/index3.html at main · codescoop/codescoop-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CodeScoop.dev — Learn by Doing</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 font-sans">

  <!-- Header -->
  <header class="bg-white shadow-md sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-indigo-600">CodeScoop<span class="text-gray-700">.dev</span></h1>
      <nav class="space-x-6">
        <a href="#about" class="text-gray-700 hover:text-indigo-600">About</a>
        <a href="#features" class="text-gray-700 hover:text-indigo-600">Features</a>
        <a href="#resources" class="text-gray-700 hover:text-indigo-600">Resources</a>
      </nav>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="bg-indigo-600 text-white py-20">
    <div class="max-w-4xl mx-auto text-center px-4">
      <h2 class="text-4xl font-bold mb-4">Crack Interviews & Build Projects That Matter</h2>
      <p class="text-lg mb-6">CodeScoop.dev helps you prepare smarter with curated questions, real-world projects, and an online JS compiler.</p>
      <a href="#features" class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-full hover:bg-gray-100 transition">Explore Features</a>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto text-center px-4">
      <h3 class="text-3xl font-semibold mb-4">What is CodeScoop?</h3>
      <p class="text-gray-600 text-lg">CodeScoop.dev is a learning platform that combines interview prep with hands-on projects and live coding to help you grow as a developer.</p>
    </div>
  </section>

  <!-- Feature Section -->
  <section id="features" class="py-16">
    <div class="max-w-6xl mx-auto px-4">
      <h3 class="text-3xl font-bold text-center mb-10">Our Core Features</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <!-- Feature 1 -->
        <div class="bg-white shadow-lg rounded-2xl p-6 hover:shadow-xl transition">
          <h4 class="text-xl font-semibold mb-2">Interview Prep</h4>
          <p class="text-gray-600">Practice curated questions in DSA, React, System Design and more — categorized by difficulty.</p>
        </div>
        <!-- Feature 2 -->
        <div class="bg-white shadow-lg rounded-2xl p-6 hover:shadow-xl transition">
          <h4 class="text-xl font-semibold mb-2">Learn by Doing</h4>
          <p class="text-gray-600">Access real-world project resources and build hands-on apps to learn faster.</p>
        </div>
        <!-- Feature 3 -->
        <div class="bg-white shadow-lg rounded-2xl p-6 hover:shadow-xl transition">
          <h4 class="text-xl font-semibold mb-2">Online JS Compiler</h4>
          <p class="text-gray-600">Write, run, and debug JavaScript code directly in your browser — no setup needed.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Resources Section -->
  <section id="resources" class="bg-gray-50 py-16">
    <div class="max-w-6xl mx-auto px-4">
      <h3 class="text-3xl font-bold text-center mb-10">Popular Projects</h3>
      <div class="grid md:grid-cols-3 gap-6">
        <!-- Resource Card -->
        <div class="bg-white shadow rounded-lg p-5">
          <h5 class="font-semibold text-lg mb-2">React Todo App</h5>
          <p class="text-sm text-gray-600 mb-2">Learn state, props and hooks in a practical way.</p>
          <span class="text-indigo-600 text-sm font-medium">4.5k downloads</span>
        </div>
        <div class="bg-white shadow rounded-lg p-5">
          <h5 class="font-semibold text-lg mb-2">System Design YouTube Clone</h5>
          <p class="text-sm text-gray-600 mb-2">Understand scalability, CDN, load balancing and more.</p>
          <span class="text-indigo-600 text-sm font-medium">3.2k downloads</span>
        </div>
        <div class="bg-white shadow rounded-lg p-5">
          <h5 class="font-semibold text-lg mb-2">Auth with Node.js + JWT</h5>
          <p class="text-sm text-gray-600 mb-2">Secure backend authentication project to learn API basics.</p>
          <span class="text-indigo-600 text-sm font-medium">2.8k downloads</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-indigo-600 text-white py-6">
    <div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
      <p class="text-sm">&copy; 2025 CodeScoop.dev. All rights reserved.</p>
      <div class="space-x-4 mt-2 md:mt-0">
        <a href="#" class="text-white hover:underline">Privacy</a>
        <a href="#" class="text-white hover:underline">Terms</a>
        <a href="mailto:hello@codescoop.dev" class="text-white hover:underline">Contact</a>
      </div>
    </div>
  </footer>

</body>
</html>