codescoop-layout/index-final-1.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
202
203
204
205
206
207
208
209
210
<!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://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 font-sans antialiased">

  <!-- Header with Mobile Hamburger -->
  <header class="bg-white border-b border-gray-200 sticky top-0 z-50" x-data="{ open: false }">
    <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>
      <!-- Hamburger -->
      <button class="md:hidden focus:outline-none" @click="open = !open">
        <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/>
        </svg>
        <svg x-show="open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    <!-- Mobile Menu -->
    <nav x-show="open" class="md:hidden bg-white border-t border-gray-200">
      <a href="#about" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">About</a>
      <a href="#features" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Features</a>
      <a href="#resources" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Resources</a>
    </nav>
  </header>

  <!-- 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">
      <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>
      <div class="lg:w-1/2 flex justify-center">
        <img src="./hero.jpg" alt="Developer Working Illustration" class="w-full max-w-lg drop-shadow-xl"/>
      </div>
    </div>
  </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">Built by Developers, for the Community</h2>
    <p class="text-lg text-gray-600 leading-relaxed mb-6">
      <strong>CodeScoop.dev</strong> is a platform to support students and professionals with open access to curated resources and interview prep. It's all about learning by doing — through projects, practice, and exploration.
      <br><br>
      We help you bridge the gap between theory and practice with hands-on coding. Dive into real-world challenges and grow with a community that's building, learning, and leveling up together.
    </p>
    <p class="text-lg text-gray-700 leading-relaxed">
      No fluff. Just a space where you can practice, and grow — with the support of a community that’s leveling up together.
    </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">

      <!-- Interview Prep -->
      <a href="/interview" class="block bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6 text-center">
        <div class="mb-4 flex justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v6m0 0l3-3m-3 3l-3-3" />
          </svg>
        </div>
        <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>
        <span class="inline-flex items-center mt-4 text-blue-600 font-medium">Go to Interview Prep →</span>
      </a>

      <!-- Learn by Doing -->
      <a href="/projects" class="block bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6 text-center">
        <div class="mb-4 flex justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 118 0v2m-6 4h4a2 2 0 002-2v-4a6 6 0 10-12 0v4a2 2 0 002 2h4z" />
          </svg>
        </div>
        <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>
        <span class="inline-flex items-center mt-4 text-blue-600 font-medium">Go to Learn Projects →</span>
      </a>

      <!-- Online JS Compiler -->
      <a href="/compiler" class="block bg-gray-50 rounded-2xl shadow-md hover:shadow-lg transition p-6 text-center">
        <div class="mb-4 flex justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17l4 4 4-4m0-10l-4-4-4 4m4-4v18" />
          </svg>
        </div>
        <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>
        <span class="inline-flex items-center mt-4 text-blue-600 font-medium">Go to JS Compiler →</span>
      </a>

    </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-3 gap-8">
      <a href="/resources/web-dev" class="block 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">W</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Web Development</h3>
        <p class="text-gray-600 text-sm mb-4">
          Build web applications using HTML, CSS, JavaScript, React and more.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore Web Dev →</span>
      </a>
      <a href="/resources/mobile-dev" class="block 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 mb-4">
          Build mobile applications using Android, Flutter, React Native and more.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore Mobile Dev →</span>
      </a>
      <a href="/resources/game-dev" class="block 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 mb-4">
          Build awesome video games. C#, PyGame, OpenGL, Unity and more.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore Game Dev →</span>
      </a>
      <a href="/resources/ml" class="block 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 mb-4">
          Learn how a machine learns. Python, NumPy, Pandas, SciKit, Tensorflow and more.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore ML →</span>
      </a>
      <a href="/resources/devops" class="block 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">D</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">DevOps & Tools</h3>
        <p class="text-gray-600 text-sm mb-4">
          Understand CI/CD, Docker, GitHub Actions, and more to improve workflow and productivity.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore DevOps →</span>
      </a>
      <a href="/resources/open-source" class="block 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">OS</div>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Open Source Projects</h3>
        <p class="text-gray-600 text-sm mb-4">
          Explore beginner-friendly open-source repositories to contribute and learn collaboratively.
        </p>
        <span class="inline-flex items-center text-blue-600 font-medium">Explore Open Source →</span>
      </a>
    </div>
  </div>
</section>


  <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>