codescoop-layout/index4.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!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 antialiased">

  <!-- Header -->
  <header class="bg-white border-b border-gray-200 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-extrabold text-blue-600 tracking-tight">CodeScoop<span class="text-gray-800">.dev</span></h1>
      <nav class="hidden md:flex space-x-6 font-medium text-gray-700">
        <a href="#about" class="hover:text-blue-600">About</a>
        <a href="#features" class="hover:text-blue-600">Features</a>
        <a href="#resources" class="hover:text-blue-600">Resources</a>
      </nav>
    </div>
  </header>

<!-- Hero Section -->
<!-- Hero Section -->
<section class="bg-white py-20">
  <div class="max-w-7xl mx-auto px-6 lg:px-8 flex flex-col-reverse lg:flex-row items-center gap-12">

    <!-- Left: Text Content -->
    <div class="lg:w-1/2 text-center lg:text-left">
      <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 leading-tight mb-6">
        Practice Coding, Build Projects,<br class="hidden lg:block"> Land the Job.
      </h1>
      <p class="text-lg text-gray-600 mb-8">
        CodeScoop.dev provides curated interview questions, hands-on projects, and a powerful online JavaScript compiler — all in one place.
      </p>
      <div class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
        <a href="#features" class="bg-blue-600 text-white px-6 py-3 rounded-full font-semibold shadow hover:bg-blue-700 transition">
          Explore Features
        </a>
        <a href="#resources" class="text-blue-600 border border-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-blue-50 transition">
          Browse Projects
        </a>
      </div>
    </div>

    <!-- Right: Image / Illustration -->
    <div class="lg:w-1/2 flex justify-center">
      <img
        src="https://cdn3d.iconscout.com/3d/premium/thumb/coding-on-laptop-5625232-4695103.png"
        alt="Developer Working Illustration"
        class="w-full max-w-md lg:max-w-lg drop-shadow-xl"
      />
    </div>

  </div>
</section>


  <!-- About Section -->
  <!-- About Section -->
<section id="about" class="py-20 bg-gray-50">
  <div class="max-w-4xl mx-auto px-6 text-center">
    <h2 class="text-3xl font-bold text-gray-800 mb-4">A Scoop on Freeware & Open Source Resources...</h2>
    <p class="text-lg text-gray-600 leading-relaxed mb-6">
      <strong>CodeScoop.dev</strong> is an initiative to encourage the exchange of open educational resources (OER), allowing free access, reuse, reassignment, adaptation, and redistribution by others.
      All the resources listed here are a volunteer effort and you are free to copy, distribute, and/or modify them under the terms of the
      <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" class="text-blue-600 font-medium underline hover:text-blue-800">
        GNU General Public License (GPLv3)
      </a>
      as published by the Free Software Foundation.
    </p>
    <p class="text-gray-600 text-base">
      For development sources, documentation, and other information, view the
      <a href="#" class="text-blue-600 font-medium underline hover:text-blue-800">public source</a>.
    </p>
  </div>
</section>


  <!-- Feature Section -->
  <section id="features" class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4">
      <h3 class="text-3xl font-bold text-center text-gray-800 mb-12">Explore the Features</h3>
      <div class="grid md:grid-cols-3 gap-8">
        <!-- Feature Card -->
        <div class="bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6">
          <h4 class="text-xl font-semibold text-blue-600 mb-2">Interview Prep</h4>
          <p class="text-gray-600">Solve categorized questions across DSA, React, and System Design — tailored for your next tech interview.</p>
        </div>
        <div class="bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6">
          <h4 class="text-xl font-semibold text-blue-600 mb-2">Learn by Doing</h4>
          <p class="text-gray-600">Build real-world projects with guided resources, code snippets, and learning-by-building approach.</p>
        </div>
        <div class="bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6">
          <h4 class="text-xl font-semibold text-blue-600 mb-2">Online JS Compiler</h4>
          <p class="text-gray-600">Run JavaScript code instantly in-browser — perfect for quick experiments, tutorials, or interviews.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Resources Section -->
  <!-- <section id="resources" class="py-20 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4">
      <h3 class="text-3xl font-bold text-center text-gray-800 mb-10">Most Downloaded Projects</h3>
      <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white border border-gray-100 shadow-sm rounded-xl p-5 hover:shadow-md transition">
          <h5 class="text-lg font-semibold text-gray-800 mb-1">React Todo App</h5>
          <p class="text-gray-600 text-sm mb-2">Master React basics — state, props, events, and hooks.</p>
          <span class="text-blue-600 text-sm font-medium">4.5k downloads</span>
        </div>
        <div class="bg-white border border-gray-100 shadow-sm rounded-xl p-5 hover:shadow-md transition">
          <h5 class="text-lg font-semibold text-gray-800 mb-1">YouTube Clone (System Design)</h5>
          <p class="text-gray-600 text-sm mb-2">Learn high-level design concepts like scalability & CDN.</p>
          <span class="text-blue-600 text-sm font-medium">3.2k downloads</span>
        </div>
        <div class="bg-white border border-gray-100 shadow-sm rounded-xl p-5 hover:shadow-md transition">
          <h5 class="text-lg font-semibold text-gray-800 mb-1">JWT Auth API (Node.js)</h5>
          <p class="text-gray-600 text-sm mb-2">Secure backend authentication with JWT and Express.</p>
          <span class="text-blue-600 text-sm font-medium">2.8k downloads</span>
        </div>
      </div>
    </div>
  </section> -->


  <!-- Learning Resources Section -->
<section id="resources" class="bg-white py-20">
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-gray-800 text-center mb-12">
      Learning Resources
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

      <!-- Web Development Card -->
      <div class="bg-gray-50 p-6 rounded-2xl shadow hover:shadow-lg transition">
        <div class="mb-4">
          <!-- Replace with an icon or image -->
          <div class="w-12 h-12 bg-blue-100 text-blue-600 flex items-center justify-center rounded-full text-xl font-bold">W</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Web Development</h3>
        <p class="text-gray-600 text-sm">
          Build web applications using HTML, CSS, JavaScript, React and more.
        </p>
      </div>

      <!-- Mobile Development Card -->
      <div class="bg-gray-50 p-6 rounded-2xl shadow hover:shadow-lg transition">
        <div class="mb-4">
          <div class="w-12 h-12 bg-blue-100 text-blue-600 flex items-center justify-center rounded-full text-xl font-bold">M</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Mobile Development</h3>
        <p class="text-gray-600 text-sm">
          Build mobile applications using Android, Flutter, React Native and more.
        </p>
      </div>

      <!-- Game Development Card -->
      <div class="bg-gray-50 p-6 rounded-2xl shadow hover:shadow-lg transition">
        <div class="mb-4">
          <div class="w-12 h-12 bg-blue-100 text-blue-600 flex items-center justify-center rounded-full text-xl font-bold">G</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Game Development</h3>
        <p class="text-gray-600 text-sm">
          Build awesome video games. C#, PyGame, OpenGL, Unity and more.
        </p>
      </div>

      <!-- Machine Learning Card -->
      <div class="bg-gray-50 p-6 rounded-2xl shadow hover:shadow-lg transition">
        <div class="mb-4">
          <div class="w-12 h-12 bg-blue-100 text-blue-600 flex items-center justify-center rounded-full text-xl font-bold">ML</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Machine Learning</h3>
        <p class="text-gray-600 text-sm">
          Learn how a machine learns. Python, NumPy, Pandas, SciKit, Tensorflow and more.
        </p>
      </div>

    </div>
  </div>
</section>


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

</body>
</html>