Hugging Face's logo

Spaces:
dprat0821
/
bytebender-it-solutions
Running

App Files Community
dprat0821 commited on
Commit
ed59924
·
verified ·
1 Parent(s): 9fb46c9

Please help me to generate a homepage for my business. So basically, I'm doing the IT consulting for the clients, including startups and enterprises. And my scope of IT consulting is the DevOps and the full stack development, and also the QA. Okay, so please help me to create my homepage with the following sections. I want the hero section first, on top, with a slogan, whatever you want to put for me. And the second section is about the services. I want the cards to display the major services that I'm providing. The third one is about the customer's feedback. And the last section in the bottom is the contact. So we need to allow users to contact us. And put the address, all this information in this section. And you can put the website's name as Daniel's IT Consulting.

Browse files
Files changed (1) hide show
  1. index.html +94 -111
index.html CHANGED
@@ -4,155 +4,145 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Daniel's IT Consulting</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
- <style>
10
- .gradient-bg {
11
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
- }
13
- .card-hover:hover {
14
- transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
16
  }
17
- </style>
18
  </head>
19
- <body class="font-sans antialiased">
20
  <!-- Hero Section -->
21
- <section class="gradient-bg text-white py-20 px-4">
22
- <div class="container mx-auto max-w-6xl text-center">
23
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Transforming Ideas Into Digital Reality</h1>
24
- <p class="text-xl md:text-2xl mb-12">Expert IT Consulting for Startups and Enterprises</p>
25
- <a href="#contact" class="bg-white text-indigo-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">Get In Touch</a>
 
 
26
  </div>
27
  </section>
28
 
29
  <!-- Services Section -->
30
- <section class="py-20 px-4 bg-gray-50">
31
- <div class="container mx-auto max-w-6xl">
32
- <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Our Services</h2>
33
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
34
- <!-- DevOps Card -->
35
- <div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
36
- <div class="text-indigo-600 mb-4">
37
  <i class="fas fa-server text-4xl"></i>
38
  </div>
39
- <h3 class="text-xl font-bold mb-4 text-gray-800">DevOps Solutions</h3>
40
- <p class="text-gray-600">Streamline your development process with our CI/CD pipelines, containerization, and cloud infrastructure expertise.</p>
41
  </div>
42
 
43
- <!-- Full Stack Card -->
44
- <div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
45
- <div class="text-indigo-600 mb-4">
46
  <i class="fas fa-code text-4xl"></i>
47
  </div>
48
- <h3 class="text-xl font-bold mb-4 text-gray-800">Full Stack Development</h3>
49
- <p class="text-gray-600">End-to-end web and application development with modern frameworks and best practices.</p>
50
  </div>
51
 
52
- <!-- QA Card -->
53
- <div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
54
- <div class="text-indigo-600 mb-4">
55
  <i class="fas fa-bug text-4xl"></i>
56
  </div>
57
- <h3 class="text-xl font-bold mb-4 text-gray-800">Quality Assurance</h3>
58
- <p class="text-gray-600">Comprehensive testing strategies to ensure your product meets the highest quality standards.</p>
59
  </div>
60
  </div>
61
  </div>
62
  </section>
63
 
64
  <!-- Testimonials Section -->
65
- <section class="py-20 px-4 bg-white">
66
- <div class="container mx-auto max-w-6xl">
67
- <h2 class="text-3xl font-bold text-center mb-16 text-gray-800">What Our Clients Say</h2>
68
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
69
- <div class="bg-gray-50 p-8 rounded-lg">
 
70
  <div class="flex items-center mb-4">
71
- <div class="text-yellow-400">
72
- <i class="fas fa-star"></i>
73
- <i class="fas fa-star"></i>
74
- <i class="fas fa-star"></i>
75
- <i class="fas fa-star"></i>
76
- <i class="fas fa-star"></i>
77
- </div>
78
- </div>
79
- <p class="text-gray-600 italic mb-6">"Daniel's team transformed our deployment process, reducing our release cycles from weeks to days. Their DevOps expertise is unmatched!"</p>
80
- <div class="flex items-center">
81
- <img src="http://static.photos/people/200x200/42" alt="Client" class="w-12 h-12 rounded-full mr-4">
82
  <div>
83
- <h4 class="font-bold text-gray-800">Sarah Johnson</h4>
84
- <p class="text-gray-500 text-sm">CTO, TechStart Inc.</p>
85
  </div>
86
  </div>
 
 
 
 
 
 
 
 
87
  </div>
88
- <div class="bg-gray-50 p-8 rounded-lg">
 
 
89
  <div class="flex items-center mb-4">
90
- <div class="text-yellow-400">
91
- <i class="fas fa-star"></i>
92
- <i class="fas fa-star"></i>
93
- <i class="fas fa-star"></i>
94
- <i class="fas fa-star"></i>
95
- <i class="fas fa-star"></i>
96
- </div>
97
- </div>
98
- <p class="text-gray-600 italic mb-6">"The web application they developed exceeded our expectations. Their full stack team delivered on time and within budget."</p>
99
- <div class="flex items-center">
100
- <img src="http://static.photos/people/200x200/43" alt="Client" class="w-12 h-12 rounded-full mr-4">
101
  <div>
102
- <h4 class="font-bold text-gray-800">Michael Chen</h4>
103
- <p class="text-gray-500 text-sm">Product Manager, Enterprise Corp</p>
104
  </div>
105
  </div>
 
 
 
 
 
 
 
 
106
  </div>
107
  </div>
108
  </div>
109
  </section>
110
 
111
  <!-- Contact Section -->
112
- <section id="contact" class="py-20 px-4 bg-gray-800 text-white">
113
- <div class="container mx-auto max-w-6xl">
114
- <h2 class="text-3xl font-bold text-center mb-16">Get In Touch</h2>
115
- <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
116
  <div>
117
- <h3 class="text-xl font-bold mb-6">Contact Information</h3>
118
- <div class="space-y-4">
119
- <div class="flex items-start">
120
- <i class="fas fa-envelope mt-1 mr-4"></i>
121
- <span>contact@danielsitconsulting.com</span>
122
- </div>
123
- <div class="flex items-start">
124
- <i class="fas fa-phone mt-1 mr-4"></i>
125
- <span>+1 (555) 123-4567</span>
126
- </div>
127
- <div class="flex items-start">
128
- <i class="fas fa-map-marker-alt mt-1 mr-4"></i>
129
- <span>123 Tech Street, Silicon Valley, CA 94025</span>
130
- </div>
131
- </div>
132
- <div class="mt-8">
133
- <h4 class="font-bold mb-4">Follow Us</h4>
134
- <div class="flex space-x-4">
135
- <a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-twitter text-xl"></i></a>
136
- <a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-linkedin text-xl"></i></a>
137
- <a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-github text-xl"></i></a>
138
- </div>
139
  </div>
140
  </div>
141
  <div>
142
- <form class="space-y-4">
143
- <div>
144
  <label for="name" class="block mb-2">Name</label>
145
- <input type="text" id="name" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
146
  </div>
147
- <div>
148
  <label for="email" class="block mb-2">Email</label>
149
- <input type="email" id="email" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
150
  </div>
151
- <div>
152
  <label for="message" class="block mb-2">Message</label>
153
- <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400"></textarea>
154
  </div>
155
- <button type="submit" class="bg-indigo-600 text-white py-2 px-6 rounded hover:bg-indigo-700 transition duration-300">Send Message</button>
156
  </form>
157
  </div>
158
  </div>
@@ -160,22 +150,15 @@
160
  </section>
161
 
162
  <!-- Footer -->
163
- <footer class="bg-gray-900 text-gray-400 py-8 px-4">
164
- <div class="container mx-auto max-w-6xl text-center">
165
  <p>&copy; 2023 Daniel's IT Consulting. All rights reserved.</p>
166
  </div>
167
  </footer>
168
 
 
169
  <script>
170
- // Smooth scrolling for anchor links
171
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
172
- anchor.addEventListener('click', function (e) {
173
- e.preventDefault();
174
- document.querySelector(this.getAttribute('href')).scrollIntoView({
175
- behavior: 'smooth'
176
- });
177
- });
178
- });
179
  </script>
180
  </body>
181
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Daniel's IT Consulting</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#3b82f6',
15
+ dark: '#1e293b',
16
+ }
17
+ }
18
+ }
19
  }
20
+ </script>
21
  </head>
22
+ <body class="bg-gray-50">
23
  <!-- Hero Section -->
24
+ <section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
25
+ <div class="container mx-auto px-4">
26
+ <div class="max-w-3xl mx-auto text-center">
27
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Digital Infrastructure</h1>
28
+ <p class="text-xl mb-8">Expert IT consulting services tailored to accelerate your business growth and optimize your technology stack.</p>
29
+ <a href="#contact" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition duration-300">Get Started</a>
30
+ </div>
31
  </div>
32
  </section>
33
 
34
  <!-- Services Section -->
35
+ <section class="py-16 bg-white">
36
+ <div class="container mx-auto px-4">
37
+ <h2 class="text-3xl font-bold text-center mb-12 text-dark">Our Services</h2>
38
+ <div class="grid md:grid-cols-3 gap-8">
39
+ <!-- Service 1 -->
40
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
41
+ <div class="text-blue-600 mb-4">
42
  <i class="fas fa-server text-4xl"></i>
43
  </div>
44
+ <h3 class="text-xl font-semibold mb-3">DevOps Solutions</h3>
45
+ <p class="text-gray-600">Streamline your development and operations with our cutting-edge DevOps strategies and tools implementation.</p>
46
  </div>
47
 
48
+ <!-- Service 2 -->
49
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
50
+ <div class="text-blue-600 mb-4">
51
  <i class="fas fa-code text-4xl"></i>
52
  </div>
53
+ <h3 class="text-xl font-semibold mb-3">Full Stack Development</h3>
54
+ <p class="text-gray-600">End-to-end web and application development services to bring your ideas to life with modern technologies.</p>
55
  </div>
56
 
57
+ <!-- Service 3 -->
58
+ <div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
59
+ <div class="text-blue-600 mb-4">
60
  <i class="fas fa-bug text-4xl"></i>
61
  </div>
62
+ <h3 class="text-xl font-semibold mb-3">Quality Assurance</h3>
63
+ <p class="text-gray-600">Comprehensive testing solutions to ensure your applications are reliable, secure, and perform at their best.</p>
64
  </div>
65
  </div>
66
  </div>
67
  </section>
68
 
69
  <!-- Testimonials Section -->
70
+ <section class="py-16 bg-gray-100">
71
+ <div class="container mx-auto px-4">
72
+ <h2 class="text-3xl font-bold text-center mb-12 text-dark">What Our Clients Say</h2>
73
+ <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
74
+ <!-- Testimonial 1 -->
75
+ <div class="bg-white p-6 rounded-lg shadow-md">
76
  <div class="flex items-center mb-4">
77
+ <img src="http://static.photos/people/200x200/1" alt="Client" class="w-12 h-12 rounded-full mr-4">
 
 
 
 
 
 
 
 
 
 
78
  <div>
79
+ <h4 class="font-semibold">John Smith</h4>
80
+ <p class="text-gray-500 text-sm">CEO, TechStart Inc.</p>
81
  </div>
82
  </div>
83
+ <p class="text-gray-700">"Daniel's team transformed our deployment pipeline, reducing our release cycle from weeks to days. Their DevOps expertise is unmatched."</p>
84
+ <div class="text-yellow-400 mt-3">
85
+ <i class="fas fa-star"></i>
86
+ <i class="fas fa-star"></i>
87
+ <i class="fas fa-star"></i>
88
+ <i class="fas fa-star"></i>
89
+ <i class="fas fa-star"></i>
90
+ </div>
91
  </div>
92
+
93
+ <!-- Testimonial 2 -->
94
+ <div class="bg-white p-6 rounded-lg shadow-md">
95
  <div class="flex items-center mb-4">
96
+ <img src="http://static.photos/people/200x200/2" alt="Client" class="w-12 h-12 rounded-full mr-4">
 
 
 
 
 
 
 
 
 
 
97
  <div>
98
+ <h4 class="font-semibold">Sarah Johnson</h4>
99
+ <p class="text-gray-500 text-sm">CTO, Enterprise Solutions</p>
100
  </div>
101
  </div>
102
+ <p class="text-gray-700">"The application developed by Daniel exceeded our expectations. Their full stack developers delivered a robust solution ahead of schedule."</p>
103
+ <div class="text-yellow-400 mt-3">
104
+ <i class="fas fa-star"></i>
105
+ <i class="fas fa-star"></i>
106
+ <i class="fas fa-star"></i>
107
+ <i class="fas fa-star"></i>
108
+ <i class="fas fa-star-half-alt"></i>
109
+ </div>
110
  </div>
111
  </div>
112
  </div>
113
  </section>
114
 
115
  <!-- Contact Section -->
116
+ <section id="contact" class="py-16 bg-dark text-white">
117
+ <div class="container mx-auto px-4">
118
+ <h2 class="text-3xl font-bold text-center mb-12">Get In Touch</h2>
119
+ <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
120
  <div>
121
+ <h3 class="text-xl font-semibold mb-4">Contact Information</h3>
122
+ <p class="mb-4"><i class="fas fa-map-marker-alt mr-3"></i> 123 Tech Street, Silicon Valley, CA 94025</p>
123
+ <p class="mb-4"><i class="fas fa-phone mr-3"></i> (555) 123-4567</p>
124
+ <p class="mb-6"><i class="fas fa-envelope mr-3"></i> contact@danielsitconsulting.com</p>
125
+ <div class="flex space-x-4">
126
+ <a href="#" class="text-white hover:text-blue-300"><i class="fab fa-twitter text-2xl"></i></a>
127
+ <a href="#" class="text-white hover:text-blue-700"><i class="fab fa-linkedin text-2xl"></i></a>
128
+ <a href="#" class="text-white hover:text-gray-400"><i class="fab fa-github text-2xl"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
  </div>
131
  <div>
132
+ <form class="bg-gray-800 p-6 rounded-lg">
133
+ <div class="mb-4">
134
  <label for="name" class="block mb-2">Name</label>
135
+ <input type="text" id="name" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-blue-500">
136
  </div>
137
+ <div class="mb-4">
138
  <label for="email" class="block mb-2">Email</label>
139
+ <input type="email" id="email" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-blue-500">
140
  </div>
141
+ <div class="mb-4">
142
  <label for="message" class="block mb-2">Message</label>
143
+ <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-blue-500"></textarea>
144
  </div>
145
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition duration-300">Send Message</button>
146
  </form>
147
  </div>
148
  </div>
 
150
  </section>
151
 
152
  <!-- Footer -->
153
+ <footer class="bg-gray-900 text-gray-400 py-8">
154
+ <div class="container mx-auto px-4 text-center">
155
  <p>&copy; 2023 Daniel's IT Consulting. All rights reserved.</p>
156
  </div>
157
  </footer>
158
 
159
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
160
  <script>
161
+ feather.replace();
 
 
 
 
 
 
 
 
162
  </script>
163
  </body>
164
  </html>