Hugging Face's logo

Spaces:
ashercn97
/
steeldatametrics-forge
Running

App Files Community
ashercn97 commited on
Commit
740c2b9
·
verified ·
1 Parent(s): f2aed8e

A landing page for a data company with an industrial vibe. Think steel company.

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +181 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Steeldatametrics Forge
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: green
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: SteelDataMetrics Forge 🔥
3
+ colorFrom: blue
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
+
index.html CHANGED
@@ -1,19 +1,181 @@
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>SteelDataMetrics Forge - Industrial Data Solutions</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
15
+ }
16
+ .steel-texture {
17
+ background-image: url("http://static.photos/industry/1200x630/42");
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+ .glow-border {
22
+ box-shadow: 0 0 15px rgba(100, 100, 100, 0.5);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-900 text-gray-100 font-sans">
27
+ <!-- Navigation -->
28
+ <nav class="bg-gray-800 border-b border-gray-700">
29
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
30
+ <div class="flex justify-between h-16">
31
+ <div class="flex items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <i data-feather="database" class="h-8 w-8 text-blue-400"></i>
34
+ <span class="ml-2 text-xl font-bold text-white">SteelDataMetrics</span>
35
+ </div>
36
+ </div>
37
+ <div class="flex items-center space-x-8">
38
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2">Services</a>
39
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2">Solutions</a>
40
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2">Industries</a>
41
+ <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">Contact</a>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Hero Section -->
48
+ <section class="steel-texture hero-gradient min-h-screen flex items-center">
49
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
50
+ <div class="text-center">
51
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
52
+ FORGING DATA<br>INTO STEEL
53
+ </h1>
54
+ <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
55
+ Industrial-strength data analytics and machine learning solutions built for the toughest business environments
56
+ </p>
57
+ <div class="flex justify-center space-x-6">
58
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-md text-lg font-semibold glow-border">
59
+ Get Started
60
+ </button>
61
+ <button class="border border-gray-400 hover:border-white text-white px-8 py-4 rounded-md text-lg font-semibold">
62
+ View Demo
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Stats Section -->
70
+ <section class="bg-gray-800 py-20">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
73
+ <div class="p-6">
74
+ <div class="text-3xl font-bold text-blue-400 mb-2">98.7%</div>
75
+ <div class="text-gray-400">Uptime Guarantee</div>
76
+ </div>
77
+ <div class="p-6">
78
+ <div class="text-3xl font-bold text-blue-400 mb-2">500+</div>
79
+ <div class="text-gray-400">Enterprise Clients</div>
80
+ </div>
81
+ <div class="p-6">
82
+ <div class="text-3xl font-bold text-blue-400 mb-2">24/7</div>
83
+ <div class="text-gray-400">Support Coverage</div>
84
+ </div>
85
+ <div class="p-6">
86
+ <div class="text-3xl font-bold text-blue-400 mb-2">0.2ms</div>
87
+ <div class="text-gray-400">Average Latency</div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Services Section -->
94
+ <section class="bg-gray-900 py-20">
95
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
96
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">INDUSTRIAL DATA SOLUTIONS</h2>
97
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
98
+ <div class="bg-gray-800 p-8 rounded-lg glow-border">
99
+ <i data-feather="bar-chart-2" class="h-12 w-12 text-blue-400 mb-4"></i>
100
+ <h3 class="text-xl font-semibold mb-4">Real-time Analytics</h3>
101
+ <p class="text-gray-400">Monitor and analyze data streams with millisecond precision for immediate insights.</p>
102
+ </div>
103
+ <div class="bg-gray-800 p-8 rounded-lg glow-border">
104
+ <i data-feather="cpu" class="h-12 w-12 text-blue-400 mb-4"></i>
105
+ <h3 class="text-xl font-semibold mb-4">Machine Learning</h3>
106
+ <p class="text-gray-400">Predictive models built to withstand the most demanding industrial applications.</p>
107
+ </div>
108
+ <div class="bg-gray-800 p-8 rounded-lg glow-border">
109
+ <i data-feather="shield" class="h-12 w-12 text-blue-400 mb-4"></i>
110
+ <h3 class="text-xl font-semibold mb-4">Security First</h3>
111
+ <p class="text-gray-400">Military-grade encryption and compliance frameworks for sensitive industrial data.</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- CTA Section -->
118
+ <section class="bg-blue-600 py-20">
119
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
120
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">READY TO FORGE YOUR DATA?</h2>
121
+ <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
122
+ Join industry leaders who trust SteelDataMetrics for their mission-critical data operations
123
+ </p>
124
+ <button class="bg-white text-blue-600 px-8 py-4 rounded-md text-lg font-semibold hover:bg-gray-100">
125
+ Schedule Demo
126
+ </button>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Footer -->
131
+ <footer class="bg-gray-800 border-t border-gray-700 py-12">
132
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
133
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
134
+ <div>
135
+ <div class="flex items-center mb-4">
136
+ <i data-feather="database" class="h-6 w-6 text-blue-400"></i>
137
+ <span class="ml-2 text-lg font-bold text-white">SteelDataMetrics</span>
138
+ </div>
139
+ <p class="text-gray-400">Forging data into actionable insights since 2018</p>
140
+ </div>
141
+ <div>
142
+ <h4 class="text-white font-semibold mb-4">Solutions</h4>
143
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">Real-time Analytics</a>
144
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">Predictive Maintenance</a>
145
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">Quality Control</a>
146
+ </div>
147
+ <div>
148
+ <h4 class="text-white font-semibold mb-4">Company</h4>
149
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">About Us</a>
150
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">Careers</a>
151
+ <a href="#" class="block text-gray-400 hover:text-white mb-2">Contact</a>
152
+ </div>
153
+ <div>
154
+ <h4 class="text-white font-semibold mb-4">Connect</h4>
155
+ <div class="flex space-x-4">
156
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
157
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
158
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
163
+ <p>&copy; 2024 SteelDataMetrics Forge. All rights reserved.</p>
164
+ </div>
165
+ </div>
166
+ </footer>
167
+
168
+ <script>
169
+ feather.replace();
170
+ document.addEventListener('DOMContentLoaded', function() {
171
+ anime({
172
+ targets: '.hero-gradient h1',
173
+ translateY: [-50, 0],
174
+ opacity: [0, 1],
175
+ duration: 1500,
176
+ easing: 'easeOutExpo'
177
+ });
178
+ });
179
+ </script>
180
+ </body>
181
+ </html>