Hugging Face's logo

Spaces:
saeidmp
/
codecraft-academy
Running

App Files Community
saeidmp commited on
Commit
f80bf7d
·
verified ·
1 Parent(s): e774c95

create all pages of my website

Browse files
Files changed (5) hide show
  1. about.html +7 -93
  2. components/footer.js +106 -0
  3. components/navbar.js +61 -0
  4. courses.html +2 -34
  5. index.html +7 -143
about.html CHANGED
@@ -7,8 +7,10 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <link rel="stylesheet" href="style.css">
 
 
10
  <script>
11
- tailwind.config = {
12
  darkMode: 'class',
13
  theme: {
14
  extend: {
@@ -26,40 +28,8 @@
26
  </script>
27
  </head>
28
  <body class="bg-gray-900 text-gray-100">
29
- <!-- Navigation -->
30
- <nav class="fixed w-full nav-glass z-50">
31
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
32
- <div class="flex items-center justify-between h-16">
33
- <div class="flex items-center">
34
- <div class="flex-shrink-0 flex items-center">
35
- <i data-feather="code" class="text-amber-500"></i>
36
- <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
37
- </div>
38
- <div class="hidden md:block">
39
- <div class="ml-10 flex items-baseline space-x-4">
40
- <a href="index.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">خانه | Home</a>
41
- <a href="courses.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">دوره‌ها | Courses</a>
42
- <a href="tutorials.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">آموزش‌ها | Tutorials</a>
43
- <a href="resources.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">منابع | Resources</a>
44
- <a href="community.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">جامعه | Community</a>
45
- </div>
46
- </div>
47
- </div>
48
- <div class="hidden md:block">
49
- <div class="ml-4 flex items-center md:ml-6">
50
- <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
51
- <i data-feather="search"></i>
52
- </button>
53
- <button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
54
- ورود | Sign In
55
- </button>
56
- </div>
57
- </div>
58
- </div>
59
- </div>
60
- </nav>
61
-
62
- <!-- About Section -->
63
  <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
64
  <div class="text-center mb-16">
65
  <h1 class="text-4xl font-extrabold text-white sm:text-5xl mb-4">
@@ -118,64 +88,8 @@
118
  </div>
119
  </div>
120
  </section>
121
-
122
- <!-- Footer -->
123
- <footer class="bg-gray-900 border-t border-gray-800">
124
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
125
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
126
- <div class="col-span-2">
127
- <div class="flex items-center">
128
- <i data-feather="code" class="text-amber-500"></i>
129
- <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
130
- </div>
131
- <p class="mt-4 text-gray-300 text-sm">
132
- Revolutionizing how developers learn. Join our community of passionate learners building the future with code.
133
- </p>
134
- </div>
135
- <div>
136
- <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
137
- Learn
138
- </h3>
139
- <ul class="mt-4 space-y-4">
140
- <li>
141
- <a href="courses.html" class="text-base text-gray-300 hover:text-white">
142
- Courses
143
- </a>
144
- </li>
145
- <li>
146
- <a href="tutorials.html" class="text-base text-gray-300 hover:text-white">
147
- Tutorials
148
- </a>
149
- </li>
150
- </ul>
151
- </div>
152
- <div>
153
- <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
154
- Company
155
- </h3>
156
- <ul class="mt-4 space-y-4">
157
- <li>
158
- <a href="about.html" class="text-base text-gray-300 hover:text-white">
159
- About
160
- </a>
161
- </li>
162
- <li>
163
- <a href="#" class="text-base text-gray-300 hover:text-white">
164
- Careers
165
- </a>
166
- </li>
167
- </ul>
168
- </div>
169
- </div>
170
- <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
171
- <p class="text-gray-400 text-sm">
172
- &copy; 2023 Spadak Code Learn. All rights reserved.
173
- </p>
174
- </div>
175
- </div>
176
- </footer>
177
-
178
- <script>
179
  feather.replace();
180
  </script>
181
  </body>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <link rel="stylesheet" href="style.css">
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
  <script>
13
+ tailwind.config = {
14
  darkMode: 'class',
15
  theme: {
16
  extend: {
 
28
  </script>
29
  </head>
30
  <body class="bg-gray-900 text-gray-100">
31
+ <custom-navbar></custom-navbar>
32
+ <!-- About Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
34
  <div class="text-center mb-16">
35
  <h1 class="text-4xl font-extrabold text-white sm:text-5xl mb-4">
 
88
  </div>
89
  </div>
90
  </section>
91
+ <custom-footer></custom-footer>
92
+ <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
93
  feather.replace();
94
  </script>
95
  </body>
components/footer.js ADDED
@@ -0,0 +1,106 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ border-top: 1px solid rgba(55, 65, 81, 0.5);
8
+ }
9
+ a {
10
+ transition: color 0.2s ease;
11
+ }
12
+ a:hover {
13
+ color: #f97316 !important;
14
+ }
15
+ </style>
16
+ <footer class="bg-gray-900">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
18
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
19
+ <div class="col-span-2">
20
+ <div class="flex items-center">
21
+ <i data-feather="code" class="text-amber-500"></i>
22
+ <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
23
+ </div>
24
+ <p class="mt-4 text-gray-300 text-sm">
25
+ Revolutionizing how developers learn. Join our community of passionate learners building the future with code.
26
+ </p>
27
+ <div class="mt-6 flex space-x-6">
28
+ <a href="#" class="text-gray-400 hover:text-white">
29
+ <i data-feather="twitter" class="w-5 h-5"></i>
30
+ </a>
31
+ <a href="#" class="text-gray-400 hover:text-white">
32
+ <i data-feather="github" class="w-5 h-5"></i>
33
+ </a>
34
+ <a href="#" class="text-gray-400 hover:text-white">
35
+ <i data-feather="youtube" class="w-5 h-5"></i>
36
+ </a>
37
+ <a href="#" class="text-gray-400 hover:text-white">
38
+ <i data-feather="linkedin" class="w-5 h-5"></i>
39
+ </a>
40
+ </div>
41
+ </div>
42
+ <div>
43
+ <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
44
+ Learn
45
+ </h3>
46
+ <ul class="mt-4 space-y-4">
47
+ <li>
48
+ <a href="courses.html" class="text-base text-gray-300">
49
+ Courses
50
+ </a>
51
+ </li>
52
+ <li>
53
+ <a href="tutorials.html" class="text-base text-gray-300">
54
+ Tutorials
55
+ </a>
56
+ </li>
57
+ <li>
58
+ <a href="resources.html" class="text-base text-gray-300">
59
+ Resources
60
+ </a>
61
+ </li>
62
+ </ul>
63
+ </div>
64
+ <div>
65
+ <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
66
+ Company
67
+ </h3>
68
+ <ul class="mt-4 space-y-4">
69
+ <li>
70
+ <a href="about.html" class="text-base text-gray-300">
71
+ About
72
+ </a>
73
+ </li>
74
+ <li>
75
+ <a href="#" class="text-base text-gray-300">
76
+ Careers
77
+ </a>
78
+ </li>
79
+ <li>
80
+ <a href="#" class="text-base text-gray-300">
81
+ Contact
82
+ </a>
83
+ </li>
84
+ </ul>
85
+ </div>
86
+ </div>
87
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
88
+ <p class="text-gray-400 text-sm">
89
+ &copy; 2023 Spadak Code Learn. All rights reserved.
90
+ </p>
91
+ <div class="mt-4 md:mt-0 flex space-x-6">
92
+ <a href="#" class="text-gray-400 hover:text-white text-sm">
93
+ Privacy Policy
94
+ </a>
95
+ <a href="#" class="text-gray-400 hover:text-white text-sm">
96
+ Terms of Service
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </footer>
102
+ `;
103
+ feather.replace();
104
+ }
105
+ }
106
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-glass {
7
+ background: rgba(17, 24, 39, 0.8);
8
+ backdrop-filter: blur(16px);
9
+ border-bottom: 1px solid rgba(249, 115, 22, 0.2);
10
+ }
11
+ a {
12
+ transition: all 0.2s ease;
13
+ }
14
+ a:hover {
15
+ transform: translateY(-1px);
16
+ }
17
+ .active {
18
+ background: rgba(31, 41, 55, 0.8);
19
+ }
20
+ </style>
21
+ <nav class="fixed w-full nav-glass z-50">
22
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23
+ <div class="flex items-center justify-between h-16">
24
+ <div class="flex items-center">
25
+ <div class="flex-shrink-0 flex items-center">
26
+ <i data-feather="code" class="text-amber-500"></i>
27
+ <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
28
+ </div>
29
+ <div class="hidden md:block">
30
+ <div class="ml-10 flex items-baseline space-x-4">
31
+ <a href="index.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">خانه | Home</a>
32
+ <a href="courses.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">دوره‌ها | Courses</a>
33
+ <a href="tutorials.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">آموزش‌ها | Tutorials</a>
34
+ <a href="resources.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">منابع | Resources</a>
35
+ <a href="community.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">جامعه | Community</a>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ <div class="hidden md:block">
40
+ <div class="ml-4 flex items-center md:ml-6">
41
+ <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
42
+ <i data-feather="search"></i>
43
+ </button>
44
+ <button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
45
+ ورود | Sign In
46
+ </button>
47
+ </div>
48
+ </div>
49
+ <div class="-mr-2 flex md:hidden">
50
+ <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+ `;
58
+ feather.replace();
59
+ }
60
+ }
61
+ customElements.define('custom-navbar', CustomNavbar);
courses.html CHANGED
@@ -26,40 +26,8 @@
26
  </script>
27
  </head>
28
  <body class="bg-gray-900 text-gray-100">
29
- <!-- Navigation -->
30
- <nav class="fixed w-full nav-glass z-50">
31
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
32
- <div class="flex items-center justify-between h-16">
33
- <div class="flex items-center">
34
- <div class="flex-shrink-0 flex items-center">
35
- <i data-feather="code" class="text-amber-500"></i>
36
- <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
37
- </div>
38
- <div class="hidden md:block">
39
- <div class="ml-10 flex items-baseline space-x-4">
40
- <a href="index.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">خانه | Home</a>
41
- <a href="courses.html" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">دوره‌ها | Courses</a>
42
- <a href="tutorials.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">آموزش‌ها | Tutorials</a>
43
- <a href="resources.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">منابع | Resources</a>
44
- <a href="community.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">جامعه | Community</a>
45
- </div>
46
- </div>
47
- </div>
48
- <div class="hidden md:block">
49
- <div class="ml-4 flex items-center md:ml-6">
50
- <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
51
- <i data-feather="search"></i>
52
- </button>
53
- <button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
54
- ورود | Sign In
55
- </button>
56
- </div>
57
- </div>
58
- </div>
59
- </div>
60
- </nav>
61
-
62
- <!-- Courses Section -->
63
  <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
64
  <div class="text-center mb-16">
65
  <h1 class="text-4xl font-extrabold text-white sm:text-5xl mb-4">
 
26
  </script>
27
  </head>
28
  <body class="bg-gray-900 text-gray-100">
29
+ <custom-navbar></custom-navbar>
30
+ <!-- Courses Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
32
  <div class="text-center mb-16">
33
  <h1 class="text-4xl font-extrabold text-white sm:text-5xl mb-4">
index.html CHANGED
@@ -7,8 +7,10 @@
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
 
10
  <script>
11
- tailwind.config = {
12
  darkMode: 'class',
13
  theme: {
14
  extend: {
@@ -72,45 +74,8 @@
72
  </style>
73
  </head>
74
  <body class="bg-gray-900 text-gray-100 min-h-screen scroll-snap">
75
- <!-- Navigation -->
76
- <nav class="fixed w-full nav-glass z-50">
77
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
- <div class="flex items-center justify-between h-16">
79
- <div class="flex items-center">
80
- <div class="flex-shrink-0 flex items-center">
81
- <i data-feather="code" class="text-amber-500"></i>
82
- <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
83
- </div>
84
- <div class="hidden md:block">
85
- <div class="ml-10 flex items-baseline space-x-4">
86
- <a href="index.html" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">خانه | Home</a>
87
- <a href="courses.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">دوره‌ها | Courses</a>
88
- <a href="tutorials.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">آموزش‌ها | Tutorials</a>
89
- <a href="resources.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">منابع | Resources</a>
90
- <a href="community.html" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">جامعه | Community</a>
91
- </div>
92
- </div>
93
- </div>
94
- <div class="hidden md:block">
95
- <div class="ml-4 flex items-center md:ml-6">
96
- <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
97
- <i data-feather="search"></i>
98
- </button>
99
- <button class="ml-4 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
100
- ورود | Sign In
101
- </button>
102
- </div>
103
- </div>
104
- <div class="-mr-2 flex md:hidden">
105
- <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
106
- <i data-feather="menu"></i>
107
- </button>
108
- </div>
109
- </div>
110
- </div>
111
- </nav>
112
-
113
- <!-- Hero Section -->
114
  <section class="min-h-screen flex items-center hero-gradient pt-16">
115
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
116
  <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
@@ -357,109 +322,8 @@
357
  </div>
358
  </div>
359
  </section>
360
-
361
- <!-- Footer -->
362
- <footer class="bg-gray-900 border-t border-gray-800">
363
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
364
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
365
- <div class="col-span-2">
366
- <div class="flex items-center">
367
- <i data-feather="code" class="text-amber-500"></i>
368
- <span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
369
- </div>
370
- <p class="mt-4 text-gray-300 text-sm">
371
- Revolutionizing how developers learn. Join our community of passionate learners building the future with code.
372
- </p>
373
- <div class="mt-6 flex space-x-6">
374
- <a href="#" class="text-gray-400 hover:text-white">
375
- <i data-feather="twitter" class="w-5 h-5"></i>
376
- </a>
377
- <a href="#" class="text-gray-400 hover:text-white">
378
- <i data-feather="github" class="w-5 h-5"></i>
379
- </a>
380
- <a href="#" class="text-gray-400 hover:text-white">
381
- <i data-feather="youtube" class="w-5 h-5"></i>
382
- </a>
383
- <a href="#" class="text-gray-400 hover:text-white">
384
- <i data-feather="linkedin" class="w-5 h-5"></i>
385
- </a>
386
- </div>
387
- </div>
388
- <div>
389
- <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
390
- Learn
391
- </h3>
392
- <ul class="mt-4 space-y-4">
393
- <li>
394
- <a href="#" class="text-base text-gray-300 hover:text-white">
395
- Courses
396
- </a>
397
- </li>
398
- <li>
399
- <a href="#" class="text-base text-gray-300 hover:text-white">
400
- Tutorials
401
- </a>
402
- </li>
403
- <li>
404
- <a href="#" class="text-base text-gray-300 hover:text-white">
405
- Roadmaps
406
- </a>
407
- </li>
408
- <li>
409
- <a href="#" class="text-base text-gray-300 hover:text-white">
410
- Challenges
411
- </a>
412
- </li>
413
- </ul>
414
- </div>
415
- <div>
416
- <h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
417
- Community
418
- </h3>
419
- <ul class="mt-4 space-y-4">
420
- <li>
421
- <a href="#" class="text-base text-gray-300 hover:text-white">
422
- Forum
423
- </a>
424
- </li>
425
- <li>
426
- <a href="#" class="text-base text-gray-300 hover:text-white">
427
- Discord
428
- </a>
429
- </li>
430
- <li>
431
- <a href="#" class="text-base text-gray-300 hover:text-white">
432
- Events
433
- </a>
434
- </li>
435
- <li>
436
- <a href="#" class="text-base text-gray-300 hover:text-white">
437
- Blog
438
- </a>
439
- </li>
440
- </ul>
441
- </div>
442
- </div>
443
- <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
444
- <p class="text-gray-400 text-sm">
445
- &copy; 2023 Spadak Code Learn. All rights reserved.
446
- </p>
447
- <div class="mt-4 md:mt-0 flex space-x-6">
448
- <a href="#" class="text-gray-400 hover:text-white text-sm">
449
- Privacy Policy
450
- </a>
451
- <a href="#" class="text-gray-400 hover:text-white text-sm">
452
- Terms of Service
453
- </a>
454
- <a href="#" class="text-gray-400 hover:text-white text-sm">
455
- Contact Us
456
- </a>
457
- </div>
458
- </div>
459
- </div>
460
- </footer>
461
-
462
- <script>
463
  feather.replace();
464
 
465
  // Enhanced smooth scrolling with offset for fixed header
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/feather-icons"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
  <script>
13
+ tailwind.config = {
14
  darkMode: 'class',
15
  theme: {
16
  extend: {
 
74
  </style>
75
  </head>
76
  <body class="bg-gray-900 text-gray-100 min-h-screen scroll-snap">
77
+ <custom-navbar></custom-navbar>
78
+ <!-- Hero Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  <section class="min-h-screen flex items-center hero-gradient pt-16">
80
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
81
  <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
 
322
  </div>
323
  </div>
324
  </section>
325
+ <custom-footer></custom-footer>
326
+ <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  feather.replace();
328
 
329
  // Enhanced smooth scrolling with offset for fixed header