Hugging Face's logo

Spaces:
fmlemos
/
multinav-test
Running

App Files Community
fmlemos commited on
Commit
7c1d74e
·
verified ·
1 Parent(s): fe2eb79

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +409 -172
index.html CHANGED
@@ -3,204 +3,454 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Multi-Page Website</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- /* Custom CSS for page transitions */
11
- .page {
12
- display: none;
13
- animation: fadeIn 0.5s ease-in-out;
 
 
 
14
  }
15
 
16
- .page.active {
17
- display: block;
 
 
18
  }
19
 
20
- @keyframes fadeIn {
21
- from { opacity: 0; transform: translateY(10px); }
22
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
23
  }
24
 
25
- /* Custom active nav link style */
26
- .nav-link.active {
27
- background-color: #3b82f6;
28
- color: white;
29
  }
30
 
31
- .nav-link.active:hover {
32
- background-color: #2563eb;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
  </style>
35
  </head>
36
- <body class="bg-gray-100 min-h-screen">
37
- <!-- Navigation Bar -->
38
- <nav class="bg-white shadow-lg sticky top-0 z-10">
39
- <div class="container mx-auto px-4">
40
- <div class="flex justify-between items-center h-16">
41
- <div class="flex items-center">
42
- <i class="fas fa-globe text-blue-500 text-2xl mr-2"></i>
43
- <span class="text-xl font-bold text-gray-800">MultiPage</span>
 
 
44
  </div>
45
- <div class="hidden md:flex space-x-1">
46
- <button onclick="showPage('page1')" id="nav-page1" class="nav-link active px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
47
- <i class="fas fa-home mr-2"></i>Page 1
 
 
48
  </button>
49
- <button onclick="showPage('page2')" id="nav-page2" class="nav-link px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
50
- <i class="fas fa-file-alt mr-2"></i>Page 2
51
  </button>
52
- <button onclick="showPage('page3')" id="nav-page3" class="nav-link px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
53
- <i class="fas fa-cog mr-2"></i>Page 3
54
  </button>
55
- </div>
56
- <button class="md:hidden text-gray-700" onclick="toggleMobileMenu()">
 
 
57
  <i class="fas fa-bars text-2xl"></i>
58
  </button>
59
  </div>
60
- <!-- Mobile Menu -->
61
- <div id="mobile-menu" class="md:hidden hidden pb-4">
62
- <button onclick="showPage('page1')" class="nav-link-mobile active block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300 mb-1">
63
- <i class="fas fa-home mr-2"></i>Page 1
 
 
 
64
  </button>
65
- <button onclick="showPage('page2')" class="nav-link-mobile block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300 mb-1">
66
- <i class="fas fa-file-alt mr-2"></i>Page 2
67
  </button>
68
- <button onclick="showPage('page3')" class="nav-link-mobile block w-full text-left px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-100 transition duration-300">
69
- <i class="fas fa-cog mr-2"></i>Page 3
70
  </button>
71
  </div>
72
  </div>
73
- </nav>
74
 
75
- <!-- Page Content -->
76
- <div class="container mx-auto px-4 py-8">
77
- <!-- Page 1 -->
78
- <div id="page1" class="page active">
79
- <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
80
- <div class="text-center mb-8">
81
- <h1 class="text-4xl font-bold text-blue-600 mb-4">Initial Page</h1>
82
- <p class="text-gray-600 max-w-2xl mx-auto">Welcome to the first page of our multi-page website. This demonstrates how to create a seamless navigation experience without full page reloads.</p>
 
 
83
  </div>
84
- <div class="grid md:grid-cols-3 gap-6">
85
- <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
86
- <i class="fas fa-rocket text-blue-500 text-3xl mb-4"></i>
87
- <h3 class="text-xl font-semibold mb-2">Fast Navigation</h3>
88
- <p class="text-gray-600">Smooth transitions between pages with JavaScript.</p>
89
- </div>
90
- <div class="bg-green-50 p-6 rounded-lg border border-green-100">
91
- <i class="fas fa-mobile-alt text-green-500 text-3xl mb-4"></i>
92
- <h3 class="text-xl font-semibold mb-2">Responsive Design</h3>
93
- <p class="text-gray-600">Works perfectly on all device sizes.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  </div>
95
- <div class="bg-purple-50 p-6 rounded-lg border border-purple-100">
96
- <i class="fas fa-palette text-purple-500 text-3xl mb-4"></i>
97
- <h3 class="text-xl font-semibold mb-2">Beautiful UI</h3>
98
- <p class="text-gray-600">Built with TailwindCSS for modern styling.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
  </div>
101
- </div>
102
  </div>
103
-
104
- <!-- Page 2 -->
105
- <div id="page2" class="page">
106
- <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
107
- <div class="text-center mb-8">
108
- <h1 class="text-4xl font-bold text-green-600 mb-4">Second Page</h1>
109
- <p class="text-gray-600 max-w-2xl mx-auto">This is the second page with different content and styling. Notice how the navigation updates automatically.</p>
110
- </div>
111
- <div class="flex flex-col md:flex-row gap-6">
112
- <div class="md:w-1/2 bg-green-50 p-6 rounded-lg">
113
- <h3 class="text-2xl font-semibold mb-4 text-green-700">Features</h3>
114
- <ul class="space-y-3">
115
- <li class="flex items-start">
116
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
117
- <span>Interactive navigation</span>
118
- </li>
119
- <li class="flex items-start">
120
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
121
- <span>Animated page transitions</span>
122
- </li>
123
- <li class="flex items-start">
124
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
125
- <span>Mobile-friendly design</span>
126
- </li>
127
- </ul>
 
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
- <div class="md:w-1/2 bg-yellow-50 p-6 rounded-lg">
130
- <h3 class="text-2xl font-semibold mb-4 text-yellow-700">How It Works</h3>
131
- <p class="mb-4 text-gray-700">The JavaScript handles showing/hiding pages and updating the active navigation link when you switch between pages.</p>
132
- <button onclick="showPage('page3')" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg transition duration-300">
133
- <i class="fas fa-arrow-right mr-2"></i>Go to Page 3
134
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
  </div>
137
- </div>
138
  </div>
139
-
140
- <!-- Page 3 -->
141
- <div id="page3" class="page">
142
- <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
143
- <div class="text-center mb-8">
144
- <h1 class="text-4xl font-bold text-purple-600 mb-4">Third Page</h1>
145
- <p class="text-gray-600 max-w-2xl mx-auto">Final page with contact information and additional options.</p>
146
- </div>
147
- <div class="max-w-md mx-auto bg-purple-50 rounded-xl p-6">
148
- <h3 class="text-2xl font-semibold mb-4 text-center text-purple-700">Contact Us</h3>
149
- <form class="space-y-4">
150
- <div>
151
- <label class="block text-gray-700 mb-1">Name</label>
152
- <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
153
- </div>
154
- <div>
155
- <label class="block text-gray-700 mb-1">Email</label>
156
- <input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
- <div>
159
- <label class="block text-gray-700 mb-1">Message</label>
160
- <textarea rows="4" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  </div>
162
- <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition duration-300">
163
- <i class="fas fa-paper-plane mr-2"></i>Send Message
164
- </button>
165
- </form>
166
- <div class="mt-6 flex justify-center space-x-4">
167
- <button onclick="showPage('page1')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">
168
- <i class="fas fa-arrow-left mr-2"></i>Back to Page 1
169
- </button>
170
  </div>
171
  </div>
172
- </div>
173
  </div>
174
- </div>
175
 
176
- <!-- Footer -->
177
- <footer class="bg-gray-800 text-white py-8">
178
- <div class="container mx-auto px-4">
179
- <div class="flex flex-col md:flex-row justify-between items-center">
180
- <div class="mb-4 md:mb-0">
181
- <div class="flex items-center">
182
- <i class="fas fa-globe text-blue-400 text-2xl mr-2"></i>
183
- <span class="text-xl font-bold">MultiPage</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
- <p class="text-gray-400 mt-2">A beautiful multi-page website example</p>
186
  </div>
187
- <div class="flex space-x-4">
188
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
189
- <i class="fab fa-facebook-f text-xl"></i>
190
- </a>
191
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
192
- <i class="fab fa-twitter text-xl"></i>
193
- </a>
194
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
195
- <i class="fab fa-instagram text-xl"></i>
196
- </a>
197
- <a href="#" class="text-gray-400 hover:text-white transition duration-300">
198
- <i class="fab fa-github text-xl"></i>
199
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
200
  </div>
201
  </div>
202
- <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
203
- <p>&copy; 2023 MultiPage Website. All rights reserved.</p>
 
204
  </div>
205
  </div>
206
  </footer>
@@ -209,35 +459,22 @@
209
  // Function to show a specific page and hide others
210
  function showPage(pageId) {
211
  // Hide all pages
212
- document.querySelectorAll('.page').forEach(page => {
213
  page.classList.remove('active');
214
  });
215
 
216
- // Show the selected page
217
- document.getElementById(pageId).classList.add('active');
 
 
218
 
219
- // Update navigation active states
220
- updateNavActiveState(pageId);
221
 
222
  // Close mobile menu if open
223
  document.getElementById('mobile-menu').classList.add('hidden');
224
  }
225
 
226
- // Function to update navigation active states
227
- function updateNavActiveState(pageId) {
228
- // Desktop nav
229
- document.querySelectorAll('.nav-link').forEach(link => {
230
- link.classList.remove('active');
231
- });
232
- document.getElementById(`nav-${pageId}`).classList.add('active');
233
-
234
- // Mobile nav
235
- document.querySelectorAll('.nav-link-mobile').forEach(link => {
236
- link.classList.remove('active');
237
- });
238
- document.querySelector(`.nav-link-mobile[onclick="showPage('${pageId}')"]`).classList.add('active');
239
- }
240
-
241
  // Function to toggle mobile menu
242
  function toggleMobileMenu() {
243
  document.getElementById('mobile-menu').classList.toggle('hidden');
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Professional Multipage Site</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ /* Smooth page transitions */
11
+ .page-container {
12
+ opacity: 0;
13
+ transform: translateY(20px);
14
+ transition: opacity 0.3s ease, transform 0.3s ease;
15
+ height: 0;
16
+ overflow: hidden;
17
  }
18
 
19
+ .page-container.active {
20
+ opacity: 1;
21
+ transform: translateY(0);
22
+ height: auto;
23
  }
24
 
25
+ /* Professional color scheme */
26
+ :root {
27
+ --primary: #2563eb;
28
+ --secondary: #1e40af;
29
+ --accent: #3b82f6;
30
+ --text: #1f2937;
31
+ --light: #f9fafb;
32
  }
33
 
34
+ /* Custom underline animation for nav links */
35
+ .nav-link {
36
+ position: relative;
 
37
  }
38
 
39
+ .nav-link::after {
40
+ content: '';
41
+ position: absolute;
42
+ width: 0;
43
+ height: 2px;
44
+ bottom: 0;
45
+ left: 0;
46
+ background-color: var(--accent);
47
+ transition: width 0.3s ease;
48
+ }
49
+
50
+ .nav-link:hover::after {
51
+ width: 100%;
52
+ }
53
+
54
+ .nav-link.active::after {
55
+ width: 100%;
56
+ background-color: var(--secondary);
57
  }
58
  </style>
59
  </head>
60
+ <body class="font-sans text-gray-800 bg-gray-50">
61
+ <!-- Header with Navigation -->
62
+ <header class="bg-white shadow-sm sticky top-0 z-50">
63
+ <div class="container mx-auto px-6 py-4">
64
+ <div class="flex items-center justify-between">
65
+ <div class="flex items-center space-x-2">
66
+ <div class="p-2 bg-blue-600 rounded-lg">
67
+ <i class="fas fa-cube text-white text-xl"></i>
68
+ </div>
69
+ <span class="text-xl font-bold text-gray-800">ProSite</span>
70
  </div>
71
+
72
+ <!-- Desktop Navigation -->
73
+ <nav class="hidden md:flex space-x-8">
74
+ <button onclick="showPage('page1')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2">
75
+ <i class="fas fa-home mr-2"></i>Home
76
  </button>
77
+ <button onclick="showPage('page2')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2">
78
+ <i class="fas fa-briefcase mr-2"></i>Services
79
  </button>
80
+ <button onclick="showPage('page3')" class="nav-link text-gray-600 hover:text-blue-600 transition px-1 py-2">
81
+ <i class="fas fa-envelope mr-2"></i>Contact
82
  </button>
83
+ </nav>
84
+
85
+ <!-- Mobile menu button -->
86
+ <button class="md:hidden text-gray-600" onclick="toggleMobileMenu()">
87
  <i class="fas fa-bars text-2xl"></i>
88
  </button>
89
  </div>
90
+ </div>
91
+
92
+ <!-- Mobile Navigation -->
93
+ <div id="mobile-menu" class="md:hidden hidden bg-white py-4 shadow-md">
94
+ <div class="container mx-auto px-6 flex flex-col space-y-3">
95
+ <button onclick="showPage('page1')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center">
96
+ <i class="fas fa-home mr-3 w-5 text-center"></i>Home
97
  </button>
98
+ <button onclick="showPage('page2')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center">
99
+ <i class="fas fa-briefcase mr-3 w-5 text-center"></i>Services
100
  </button>
101
+ <button onclick="showPage('page3')" class="nav-link py-2 px-4 rounded-lg hover:bg-blue-50 flex items-center">
102
+ <i class="fas fa-envelope mr-3 w-5 text-center"></i>Contact
103
  </button>
104
  </div>
105
  </div>
106
+ </header>
107
 
108
+ <main class="min-h-screen">
109
+ <!-- Page 1 - Home -->
110
+ <div id="page1" class="page-container active">
111
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
112
+ <div class="container mx-auto px-6 text-center">
113
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to ProSite</h1>
114
+ <p class="text-xl max-w-3xl mx-auto mb-10 opacity-90">We provide professional solutions for your digital needs with innovative approaches and cutting-edge technology.</p>
115
+ <button onclick="showPage('page2')" class="bg-white text-blue-700 hover:bg-gray-100 px-8 py-3 rounded-lg font-medium transition-all transform hover:scale-105">
116
+ Explore Our Services <i class="fas fa-arrow-right ml-2"></i>
117
+ </button>
118
  </div>
119
+ </section>
120
+
121
+ <section class="py-16 bg-white">
122
+ <div class="container mx-auto px-6">
123
+ <h2 class="text-3xl font-bold text-center mb-12">Our Core Features</h2>
124
+
125
+ <div class="grid md:grid-cols-3 gap-10">
126
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100">
127
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
128
+ <i class="fas fa-rocket text-blue-600 text-xl"></i>
129
+ </div>
130
+ <h3 class="text-xl font-semibold mb-3">Fast Performance</h3>
131
+ <p class="text-gray-600">Optimized solutions that ensure your applications run smoothly without any lag time.</p>
132
+ </div>
133
+
134
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100">
135
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
136
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold mb-3">Secure Solutions</h3>
139
+ <p class="text-gray-600">Built with security in mind to protect your data and your customers' information.</p>
140
+ </div>
141
+
142
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition cursor-pointer border border-gray-100">
143
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
144
+ <i class="fas fa-lightbulb text-blue-600 text-xl"></i>
145
+ </div>
146
+ <h3 class="text-xl font-semibold mb-3">Innovative Design</h3>
147
+ <p class="text-gray-600">Modern, clean interfaces that provide intuitive user experiences across devices.</p>
148
+ </div>
149
  </div>
150
+ </div>
151
+ </section>
152
+
153
+ <section class="py-16 bg-gray-50">
154
+ <div class="container mx-auto px-6">
155
+ <div class="flex flex-col md:flex-row items-center">
156
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
157
+ <h2 class="text-3xl font-bold mb-6">About Our Company</h2>
158
+ <p class="text-gray-600 mb-6 leading-relaxed">Founded in 2023, our company has been at the forefront of digital innovation, helping businesses transform their online presence with professional solutions tailored to their specific needs.</p>
159
+ <p class="text-gray-600 mb-6 leading-relaxed">Our team of experts combines technical expertise with creative vision to deliver products that not only function flawlessly but also delight users.</p>
160
+ <button onclick="showPage('page3')" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center">
161
+ Contact Us <i class="fas fa-chevron-right ml-2"></i>
162
+ </button>
163
+ </div>
164
+ <div class="md:w-1/2">
165
+ <div class="bg-blue-600 bg-opacity-10 rounded-xl overflow-hidden">
166
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team working" class="w-full h-auto rounded-xl">
167
+ </div>
168
+ </div>
169
  </div>
170
  </div>
171
+ </section>
172
  </div>
173
+
174
+ <!-- Page 2 - Services -->
175
+ <div id="page2" class="page-container">
176
+ <section class="py-16 bg-white">
177
+ <div class="container mx-auto px-6">
178
+ <h1 class="text-4xl font-bold mb-12 text-center">Our Professional Services</h1>
179
+
180
+ <div class="mb-16">
181
+ <div class="bg-blue-50 rounded-xl p-10 shadow-inner">
182
+ <div class="flex flex-col md:flex-row items-center">
183
+ <div class="md:w-1/2 mb-8 md:mb-0">
184
+ <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="rounded-xl shadow-lg">
185
+ </div>
186
+ <div class="md:w-1/2 md:pl-12">
187
+ <h2 class="text-2xl font-bold mb-4">Web Development</h2>
188
+ <p class="text-gray-600 mb-6 leading-relaxed">We build responsive, high-performance websites that work seamlessly across all devices. Our development process focuses on clean code, optimized performance, and SEO-friendly architecture.</p>
189
+ <div class="space-y-3">
190
+ <div class="flex items-center">
191
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
192
+ <span>Custom CMS solutions</span>
193
+ </div>
194
+ <div class="flex items-center">
195
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
196
+ <span>E-commerce platforms</span>
197
+ </div>
198
+ <div class="flex items-center">
199
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
200
+ <span>API integration</span>
201
+ </div>
202
+ </div>
203
+ <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center">
204
+ Learn More <i class="fas fa-chevron-right ml-2"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
  </div>
210
+
211
+ <div class="mb-16">
212
+ <div class="bg-gray-50 rounded-xl p-10 shadow-inner">
213
+ <div class="flex flex-col md:flex-row items-center">
214
+ <div class="md:w-1/2 mb-8 md:mb-0 order-2 md:order-1">
215
+ <h2 class="text-2xl font-bold mb-4">Digital Marketing</h2>
216
+ <p class="text-gray-600 mb-6 leading-relaxed">Our comprehensive digital marketing services help you reach the right audience, convert leads, and grow your business. We combine data-driven strategies with creative execution.</p>
217
+ <div class="space-y-3">
218
+ <div class="flex items-center">
219
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
220
+ <span>SEO optimization</span>
221
+ </div>
222
+ <div class="flex items-center">
223
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
224
+ <span>PPC campaign management</span>
225
+ </div>
226
+ <div class="flex items-center">
227
+ <i class="fas fa-check-circle text-blue-600 mr-3"></i>
228
+ <span>Social media marketing</span>
229
+ </div>
230
+ </div>
231
+ <button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-flex items-center">
232
+ Learn More <i class="fas fa-chevron-right ml-2"></i>
233
+ </button>
234
+ </div>
235
+ <div class="md:w-1/2 md:pr-12 order-1 md:order-2">
236
+ <img src="https://images.unsplash.com/photo-1498049794561-778396e79f3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Digital Marketing" class="rounded-xl shadow-lg">
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="grid md:grid-cols-3 gap-8 mb-16">
243
+ <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer">
244
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
245
+ <i class="fas fa-chart-line text-blue-600 text-xl"></i>
246
+ </div>
247
+ <h3 class="text-xl font-semibold mb-3">Analytics</h3>
248
+ <p class="text-gray-600">Comprehensive data analysis to drive business decisions and measure campaign performance.</p>
249
+ </div>
250
+
251
+ <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer">
252
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
253
+ <i class="fas fa-pencil-ruler text-blue-600 text-xl"></i>
254
+ </div>
255
+ <h3 class="text-xl font-semibold mb-3">Branding</h3>
256
+ <p class="text-gray-600">Strategic brand development that resonates with your target audience and builds loyalty.</p>
257
+ </div>
258
+
259
+ <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm hover:shadow-md transition cursor-pointer">
260
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
261
+ <i class="fas fa-headset text-blue-600 text-xl"></i>
262
+ </div>
263
+ <h3 class="text-xl font-semibold mb-3">Support</h3>
264
+ <p class="text-gray-600">Dedicated support team to ensure your systems run smoothly with minimal downtime.</p>
265
+ </div>
266
  </div>
267
  </div>
268
+ </section>
269
  </div>
270
+
271
+ <!-- Page 3 - Contact -->
272
+ <div id="page3" class="page-container">
273
+ <section class="py-16 bg-gradient-to-b from-blue-50 to-white">
274
+ <div class="container mx-auto px-6">
275
+ <div class="text-center mb-16">
276
+ <h1 class="text-4xl font-bold mb-4">Get In Touch</h1>
277
+ <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you. Whether you have a question about our services, pricing, or anything else, our team is ready to answer all your questions.</p>
278
+ </div>
279
+
280
+ <div class="flex flex-col lg:flex-row gap-12">
281
+ <div class="lg:w-1/2">
282
+ <div class="bg-white rounded-xl shadow-md p-8 md:p-10">
283
+ <h2 class="text-2xl font-semibold mb-6">Send us a message</h2>
284
+
285
+ <form class="space-y-5">
286
+ <div class="grid md:grid-cols-2 gap-5">
287
+ <div>
288
+ <label for="first-name" class="block text-gray-700 mb-2">First Name</label>
289
+ <input type="text" id="first-name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
290
+ </div>
291
+ <div>
292
+ <label for="last-name" class="block text-gray-700 mb-2">Last Name</label>
293
+ <input type="text" id="last-name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
294
+ </div>
295
+ </div>
296
+
297
+ <div>
298
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
299
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
300
+ </div>
301
+
302
+ <div>
303
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
304
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
305
+ </div>
306
+
307
+ <div>
308
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
309
+ <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
310
+ <option value="">Select a subject</option>
311
+ <option>General Inquiry</option>
312
+ <option>Sales Question</option>
313
+ <option>Support Request</option>
314
+ <option>Partnership Opportunity</option>
315
+ </select>
316
+ </div>
317
+
318
+ <div>
319
+ <label for="message" class="block text-gray-700 mb-2">Your Message</label>
320
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
321
+ </div>
322
+
323
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition-all transform hover:scale-[1.01]">
324
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
325
+ </button>
326
+ </form>
327
+ </div>
328
  </div>
329
+
330
+ <div class="lg:w-1/2">
331
+ <div class="bg-white rounded-xl shadow-md p-8 md:p-10">
332
+ <h2 class="text-2xl font-semibold mb-6">Contact Information</h2>
333
+
334
+ <div class="space-y-6">
335
+ <div class="flex items-start">
336
+ <div class="bg-blue-100 p-3 rounded-full mr-5">
337
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
338
+ </div>
339
+ <div>
340
+ <h3 class="text-lg font-medium mb-1">Our Office</h3>
341
+ <p class="text-gray-600">123 Business Avenue<br>Tech City, TC 12345<br>United States</p>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="flex items-start">
346
+ <div class="bg-blue-100 p-3 rounded-full mr-5">
347
+ <i class="fas fa-envelope text-blue-600"></i>
348
+ </div>
349
+ <div>
350
+ <h3 class="text-lg font-medium mb-1">Email Us</h3>
351
+ <p class="text-gray-600">info@prosite.com<br>support@prosite.com</p>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="flex items-start">
356
+ <div class="bg-blue-100 p-3 rounded-full mr-5">
357
+ <i class="fas fa-phone-alt text-blue-600"></i>
358
+ </div>
359
+ <div>
360
+ <h3 class="text-lg font-medium mb-1">Call Us</h3>
361
+ <p class="text-gray-600">+1 (555) 123-4567<br>+1 (555) 987-6543</p>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="mt-10">
367
+ <h3 class="text-xl font-medium mb-4">Follow Us</h3>
368
+ <div class="flex space-x-4">
369
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition">
370
+ <i class="fab fa-facebook-f"></i>
371
+ </a>
372
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition">
373
+ <i class="fab fa-twitter"></i>
374
+ </a>
375
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition">
376
+ <i class="fab fa-linkedin-in"></i>
377
+ </a>
378
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition">
379
+ <i class="fab fa-instagram"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+ </div>
384
  </div>
 
 
 
 
 
 
 
 
385
  </div>
386
  </div>
387
+ </section>
388
  </div>
389
+ </main>
390
 
391
+ <footer class="bg-gray-800 text-white py-12">
392
+ <div class="container mx-auto px-6">
393
+ <div class="grid md:grid-cols-4 gap-10 mb-10">
394
+ <div>
395
+ <div class="flex items-center mb-4">
396
+ <div class="p-2 bg-blue-600 rounded-lg mr-3">
397
+ <i class="fas fa-cube text-white"></i>
398
+ </div>
399
+ <span class="text-xl font-bold">ProSite</span>
400
+ </div>
401
+ <p class="text-gray-400 mb-4">Professional solutions for your digital needs with innovative approaches and cutting-edge technology.</p>
402
+ <div class="flex space-x-3">
403
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition">
404
+ <i class="fab fa-facebook-f text-sm"></i>
405
+ </a>
406
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition">
407
+ <i class="fab fa-twitter text-sm"></i>
408
+ </a>
409
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition">
410
+ <i class="fab fa-linkedin-in text-sm"></i>
411
+ </a>
412
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition">
413
+ <i class="fab fa-instagram text-sm"></i>
414
+ </a>
415
  </div>
 
416
  </div>
417
+
418
+ <div>
419
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
420
+ <ul class="space-y-2">
421
+ <li><button onclick="showPage('page1')" class="text-gray-400 hover:text-white transition">Home</button></li>
422
+ <li><button onclick="showPage('page2')" class="text-gray-400 hover:text-white transition">Services</button></li>
423
+ <li><button onclick="showPage('page3')" class="text-gray-400 hover:text-white transition">Contact</button></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
426
+ </ul>
427
+ </div>
428
+
429
+ <div>
430
+ <h3 class="text-lg font-semibold mb-4">Services</h3>
431
+ <ul class="space-y-2">
432
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
433
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Digital Marketing</a></li>
434
+ <li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li>
435
+ <li><a href="#" class="text-gray-400 hover:text-white transition">SEO Services</a></li>
436
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Content Strategy</a></li>
437
+ </ul>
438
+ </div>
439
+
440
+ <div>
441
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
442
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and offers.</p>
443
+ <form class="flex">
444
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-800">
445
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition">
446
+ <i class="fas fa-paper-plane"></i>
447
+ </button>
448
+ </form>
449
  </div>
450
  </div>
451
+
452
+ <div class="border-t border-gray-700 pt-8 text-center">
453
+ <p class="text-gray-400">&copy; 2023 ProSite. All rights reserved. | <a href="#" class="hover:text-white transition">Privacy Policy</a> | <a href="#" class="hover:text-white transition">Terms of Service</a></p>
454
  </div>
455
  </div>
456
  </footer>
 
459
  // Function to show a specific page and hide others
460
  function showPage(pageId) {
461
  // Hide all pages
462
+ document.querySelectorAll('.page-container').forEach(page => {
463
  page.classList.remove('active');
464
  });
465
 
466
+ // Show the selected page with a delay to allow initial hiding
467
+ setTimeout(() => {
468
+ document.getElementById(pageId).classList.add('active');
469
+ }, 10);
470
 
471
+ // Scroll to top
472
+ window.scrollTo(0, 0);
473
 
474
  // Close mobile menu if open
475
  document.getElementById('mobile-menu').classList.add('hidden');
476
  }
477
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
478
  // Function to toggle mobile menu
479
  function toggleMobileMenu() {
480
  document.getElementById('mobile-menu').classList.toggle('hidden');