Hugging Face's logo

Spaces:
pradipp
/
undefined
Running

App Files Community
pradipp commited on
Commit
92e3103
·
verified ·
1 Parent(s): 78dada2

make dynamic and clickable like when I click in tab it should be redirect to specific page like in About should be into details about

Browse files
Files changed (6) hide show
  1. README.md +9 -5
  2. about.html +96 -0
  3. articles.html +64 -0
  4. index.html +245 -19
  5. research.html +60 -0
  6. tutorials.html +60 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📈
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: pink
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
about.html ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About | AI Byte</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
12
+ .font-space { font-family: 'Space Grotesk', sans-serif; }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 font-sans">
22
+ <!-- Navigation -->
23
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16">
26
+ <div class="flex items-center">
27
+ <div class="flex-shrink-0 flex items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text font-space">AI Byte</a>
29
+ </div>
30
+ </div>
31
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
32
+ <a href="index.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
33
+ <a href="articles.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Articles</a>
34
+ <a href="tutorials.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
35
+ <a href="research.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
36
+ <a href="about.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
37
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Subscribe</button>
38
+ </div>
39
+ <div class="md:hidden flex items-center">
40
+ <button id="menu-btn" class="text-gray-500 hover:text-gray-900">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Main Content -->
49
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
50
+ <div class="text-center mb-16">
51
+ <h1 class="text-4xl font-bold text-gray-900 mb-6 font-space">About <span class="gradient-text">AI Byte</span></h1>
52
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Demystifying artificial intelligence through expert insights and practical knowledge.</p>
53
+ </div>
54
+
55
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
56
+ <div>
57
+ <h2 class="text-2xl font-bold text-gray-900 mb-6 font-space">Our Mission</h2>
58
+ <p class="text-gray-600 mb-6">At AI Byte, we're committed to making artificial intelligence accessible to everyone. We believe that understanding AI shouldn't be limited to researchers and engineers.</p>
59
+ <p class="text-gray-600">Our team of experts breaks down complex concepts into digestible content that helps developers, business leaders, and curious minds stay ahead in the rapidly evolving field of AI.</p>
60
+ </div>
61
+ <div>
62
+ <img src="http://static.photos/technology/640x360/88" alt="AI Technology" class="rounded-xl shadow-md w-full">
63
+ </div>
64
+ </div>
65
+
66
+ <div class="mt-20">
67
+ <h2 class="text-2xl font-bold text-gray-900 mb-8 font-space text-center">Meet the Team</h2>
68
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
69
+ <!-- Team Members -->
70
+ <div class="bg-white p-6 rounded-xl shadow-sm">
71
+ <img src="http://static.photos/people/200x200/10" alt="Team Member" class="w-24 h-24 rounded-full mx-auto mb-4">
72
+ <h3 class="text-xl font-bold text-gray-900 text-center">Dr. Sarah Chen</h3>
73
+ <p class="text-gray-500 text-center mb-4">Machine Learning Expert</p>
74
+ <p class="text-gray-600 text-center">Former Google Brain researcher specializing in NLP and transformer architectures.</p>
75
+ </div>
76
+ <div class="bg-white p-6 rounded-xl shadow-sm">
77
+ <img src="http://static.photos/people/200x200/11" alt="Team Member" class="w-24 h-24 rounded-full mx-auto mb-4">
78
+ <h3 class="text-xl font-bold text-gray-900 text-center">Alex Rodriguez</h3>
79
+ <p class="text-gray-500 text-center mb-4">Computer Vision Specialist</p>
80
+ <p class="text-gray-600 text-center">PhD in Computer Science with focus on generative models and diffusion techniques.</p>
81
+ </div>
82
+ <div class="bg-white p-6 rounded-xl shadow-sm">
83
+ <img src="http://static.photos/people/200x200/12" alt="Team Member" class="w-24 h-24 rounded-full mx-auto mb-4">
84
+ <h3 class="text-xl font-bold text-gray-900 text-center">Prof. James Wilson</h3>
85
+ <p class="text-gray-500 text-center mb-4">AI Ethics Researcher</p>
86
+ <p class="text-gray-600 text-center">Leading authority on the ethical implications of artificial intelligence systems.</p>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </section>
91
+
92
+ <script>
93
+ feather.replace();
94
+ </script>
95
+ </body>
96
+ </html>
articles.html ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Articles | AI Byte</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
12
+ .font-space { font-family: 'Space Grotesk', sans-serif; }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .article-card:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50 font-sans">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <a href="index.html" class="text-2xl font-bold gradient-text font-space">AI Byte</a>
33
+ </div>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
37
+ <a href="articles.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Articles</a>
38
+ <a href="tutorials.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
39
+ <a href="research.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
40
+ <a href="about.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
41
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Subscribe</button>
42
+ </div>
43
+ <div class="md:hidden flex items-center">
44
+ <button id="menu-btn" class="text-gray-500 hover:text-gray-900">
45
+ <i data-feather="menu"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </nav>
51
+
52
+ <!-- Main Content -->
53
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
54
+ <h1 class="text-3xl font-bold text-gray-900 mb-8 font-space">All Articles</h1>
55
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
56
+ <!-- Articles will be dynamically loaded here -->
57
+ </div>
58
+ </section>
59
+
60
+ <script>
61
+ feather.replace();
62
+ </script>
63
+ </body>
64
+ </html>
index.html CHANGED
@@ -1,19 +1,245 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Byte Blog | Cutting-edge AI Insights</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
14
+ .font-space { font-family: 'Space Grotesk', sans-serif; }
15
+ .gradient-text {
16
+ background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
17
+ -webkit-background-clip: text;
18
+ background-clip: text;
19
+ color: transparent;
20
+ }
21
+ .article-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+ #vanta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-50 font-sans">
29
+ <div id="vanta-bg"></div>
30
+
31
+ <!-- Navigation -->
32
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
33
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
34
+ <div class="flex justify-between h-16">
35
+ <div class="flex items-center">
36
+ <div class="flex-shrink-0 flex items-center">
37
+ <span class="text-2xl font-bold gradient-text font-space">AI Byte</span>
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
41
+ <a href="index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
42
+ <a href="articles.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Articles</a>
43
+ <a href="tutorials.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
44
+ <a href="research.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
45
+ <a href="about.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
46
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Subscribe</button>
47
+ </div>
48
+ <div class="md:hidden flex items-center">
49
+ <button id="menu-btn" class="text-gray-500 hover:text-gray-900">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+
57
+ <!-- Mobile Menu -->
58
+ <div id="mobile-menu" class="hidden md:hidden fixed inset-0 bg-white z-20 pt-16">
59
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
60
+ <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-100">Home</a>
61
+ <a href="articles.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:bg-gray-100">Articles</a>
62
+ <a href="tutorials.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:bg-gray-100">Tutorials</a>
63
+ <a href="research.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:bg-gray-100">Research</a>
64
+ <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:bg-gray-100">About</a>
65
+ <button class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-base font-medium mt-2">Subscribe</button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Hero Section -->
70
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
71
+ <div class="text-center">
72
+ <h1 class="text-4xl md:text-6xl font-bold font-space text-gray-900 mb-6">
73
+ Decoding the <span class="gradient-text">Future</span> of AI
74
+ </h1>
75
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
76
+ Cutting-edge insights, tutorials and research on artificial intelligence, machine learning and neural networks.
77
+ </p>
78
+ <div class="mt-8 flex justify-center space-x-4">
79
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition">
80
+ Start Reading
81
+ </button>
82
+ <button class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition">
83
+ Latest Research
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </section>
88
+
89
+ <!-- Featured Articles -->
90
+ <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
91
+ <div class="flex justify-between items-center mb-10">
92
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-900 font-space">Featured Articles</h2>
93
+ <a href="#" class="text-purple-600 hover:text-purple-800 font-medium flex items-center">
94
+ View all <i data-feather="chevron-right" class="ml-1 w-5 h-5"></i>
95
+ </a>
96
+ </div>
97
+
98
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
99
+ <!-- Article 1 -->
100
+ <div class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300">
101
+ <img src="http://static.photos/technology/640x360/42" alt="AI Technology" class="w-full h-48 object-cover">
102
+ <div class="p-6">
103
+ <div class="flex items-center text-sm text-gray-500 mb-3">
104
+ <span>Machine Learning</span>
105
+ <span class="mx-2">•</span>
106
+ <span>15 min read</span>
107
+ </div>
108
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Transformers in NLP: Beyond BERT and GPT</h3>
109
+ <p class="text-gray-600 mb-4">Exploring the latest advancements in transformer architectures and their applications in natural language processing.</p>
110
+ <div class="flex items-center">
111
+ <img src="http://static.photos/people/200x200/1" alt="Author" class="w-8 h-8 rounded-full mr-2">
112
+ <span class="text-sm font-medium text-gray-900">Dr. Sarah Chen</span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Article 2 -->
118
+ <div class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300">
119
+ <img src="http://static.photos/science/640x360/23" alt="AI Research" class="w-full h-48 object-cover">
120
+ <div class="p-6">
121
+ <div class="flex items-center text-sm text-gray-500 mb-3">
122
+ <span>Computer Vision</span>
123
+ <span class="mx-2">•</span>
124
+ <span>12 min read</span>
125
+ </div>
126
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Diffusion Models: The New Frontier in Image Generation</h3>
127
+ <p class="text-gray-600 mb-4">How diffusion models are revolutionizing image synthesis and surpassing GANs in quality and stability.</p>
128
+ <div class="flex items-center">
129
+ <img src="http://static.photos/people/200x200/2" alt="Author" class="w-8 h-8 rounded-full mr-2">
130
+ <span class="text-sm font-medium text-gray-900">Alex Rodriguez</span>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Article 3 -->
136
+ <div class="bg-white rounded-xl overflow-hidden shadow-md article-card transition duration-300">
137
+ <img src="http://static.photos/abstract/640x360/56" alt="AI Ethics" class="w-full h-48 object-cover">
138
+ <div class="p-6">
139
+ <div class="flex items-center text-sm text-gray-500 mb-3">
140
+ <span>AI Ethics</span>
141
+ <span class="mx-2">•</span>
142
+ <span>18 min read</span>
143
+ </div>
144
+ <h3 class="text-xl font-bold text-gray-900 mb-3">The Ethical Implications of Generative AI</h3>
145
+ <p class="text-gray-600 mb-4">Examining the societal impacts and ethical considerations surrounding rapidly advancing generative models.</p>
146
+ <div class="flex items-center">
147
+ <img src="http://static.photos/people/200x200/3" alt="Author" class="w-8 h-8 rounded-full mr-2">
148
+ <span class="text-sm font-medium text-gray-900">Prof. James Wilson</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Newsletter -->
156
+ <section class="bg-gradient-to-r from-purple-50 to-indigo-50 py-16 px-4 sm:px-6 lg:px-8">
157
+ <div class="max-w-3xl mx-auto text-center">
158
+ <h2 class="text-3xl font-bold text-gray-900 font-space mb-4">Stay Updated with AI Trends</h2>
159
+ <p class="text-gray-600 mb-8">Subscribe to our newsletter and get the latest AI research, tutorials and industry news delivered to your inbox weekly.</p>
160
+ <div class="flex flex-col sm:flex-row gap-4">
161
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent">
162
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition">Subscribe</button>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- Popular Topics -->
168
+ <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
169
+ <div class="text-center mb-12">
170
+ <h2 class="text-2xl md:text-3xl font-bold text-gray-900 font-space mb-4">Explore Popular Topics</h2>
171
+ <p class="text-gray-600 max-w-2xl mx-auto">Dive deep into specialized areas of artificial intelligence with our curated topic collections.</p>
172
+ </div>
173
+
174
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
175
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition flex flex-col items-center">
176
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
177
+ <i data-feather="cpu" class="text-purple-600"></i>
178
+ </div>
179
+ <span class="font-medium text-gray-900">Deep Learning</span>
180
+ </a>
181
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition flex flex-col items-center">
182
+ <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
183
+ <i data-feather="eye" class="text-indigo-600"></i>
184
+ </div>
185
+ <span class="font-medium text-gray-900">Computer Vision</span>
186
+ </a>
187
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition flex flex-col items-center">
188
+ <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-4">
189
+ <i data-feather="message-square" class="text-pink-600"></i>
190
+ </div>
191
+ <span class="font-medium text-gray-900">NLP</span>
192
+ </a>
193
+ <a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition flex flex-col items-center">
194
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
195
+ <i data-feather="shield" class="text-blue-600"></i>
196
+ </div>
197
+ <span class="font-medium text-gray-900">AI Ethics</span>
198
+ </a>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Footer -->
203
+ <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
204
+ <div class="max-w-7xl mx-auto">
205
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
206
+ <div>
207
+ <h3 class="text-lg font-bold mb-4 font-space">AI Byte</h3>
208
+ <p class="text-gray-400">Demystifying artificial intelligence through expert insights and practical knowledge.</p>
209
+ </div>
210
+ <div>
211
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Explore</h4>
212
+ <ul class="space-y-2">
213
+ <li><a href="articles.html" class="text-gray-400 hover:text-white">Articles</a></li>
214
+ <li><a href="tutorials.html" class="text-gray-400 hover:text-white">Tutorials</a></li>
215
+ <li><a href="research.html" class="text-gray-400 hover:text-white">Research Papers</a></li>
216
+ <li><a href="about.html" class="text-gray-400 hover:text-white">About</a></li>
217
+ </ul>
218
+ </div>
219
+ <div>
220
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h4>
221
+ <ul class="space-y-2">
222
+ <li><a href="about.html" class="text-gray-400 hover:text-white">About Us</a></li>
223
+ <li><a href="about.html#team" class="text-gray-400 hover:text-white">Authors</a></li>
224
+ <li><a href="mailto:careers@aibyte.com" class="text-gray-400 hover:text-white">Careers</a></li>
225
+ <li><a href="mailto:contact@aibyte.com" class="text-gray-400 hover:text-white">Contact</a></li>
226
+ </ul>
227
+ </div>
228
+ <div>
229
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Connect</h4>
230
+ <div class="flex space-x-4">
231
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
232
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
233
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
234
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="youtube"></i></a>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
239
+ <p class="text-gray-400 text-sm">© 2023 AI Byte Blog. All rights reserved.</p>
240
+ <div class="flex space-x-6 mt-4 md:mt-0">
241
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
242
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
243
+ <a href="#" class
244
+ </body>
245
+ </html>
research.html ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Research | AI Byte</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
12
+ .font-space { font-family: 'Space Grotesk', sans-serif; }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 font-sans">
22
+ <!-- Navigation -->
23
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16">
26
+ <div class="flex items-center">
27
+ <div class="flex-shrink-0 flex items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text font-space">AI Byte</a>
29
+ </div>
30
+ </div>
31
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
32
+ <a href="index.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
33
+ <a href="articles.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Articles</a>
34
+ <a href="tutorials.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
35
+ <a href="research.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
36
+ <a href="about.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
37
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Subscribe</button>
38
+ </div>
39
+ <div class="md:hidden flex items-center">
40
+ <button id="menu-btn" class="text-gray-500 hover:text-gray-900">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Main Content -->
49
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
50
+ <h1 class="text-3xl font-bold text-gray-900 mb-8 font-space">Latest Research Papers</h1>
51
+ <div class="grid grid-cols-1 gap-8">
52
+ <!-- Research papers will be dynamically loaded here -->
53
+ </div>
54
+ </section>
55
+
56
+ <script>
57
+ feather.replace();
58
+ </script>
59
+ </body>
60
+ </html>
tutorials.html ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tutorials | AI Byte</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
12
+ .font-space { font-family: 'Space Grotesk', sans-serif; }
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 font-sans">
22
+ <!-- Navigation -->
23
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 fixed w-full z-10">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16">
26
+ <div class="flex items-center">
27
+ <div class="flex-shrink-0 flex items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text font-space">AI Byte</a>
29
+ </div>
30
+ </div>
31
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
32
+ <a href="index.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
33
+ <a href="articles.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Articles</a>
34
+ <a href="tutorials.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Tutorials</a>
35
+ <a href="research.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
36
+ <a href="about.html" class="text-gray-500 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
37
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:opacity-90 transition">Subscribe</button>
38
+ </div>
39
+ <div class="md:hidden flex items-center">
40
+ <button id="menu-btn" class="text-gray-500 hover:text-gray-900">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </nav>
47
+
48
+ <!-- Main Content -->
49
+ <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
50
+ <h1 class="text-3xl font-bold text-gray-900 mb-8 font-space">Step-by-Step Tutorials</h1>
51
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
52
+ <!-- Tutorials will be dynamically loaded here -->
53
+ </div>
54
+ </section>
55
+
56
+ <script>
57
+ feather.replace();
58
+ </script>
59
+ </body>
60
+ </html>