Hugging Face's logo

Spaces:
acceler-wireless-llc
/
chainsql
Running

App Files Community
alphonse86 commited on
Commit
c17cc95
·
verified ·
1 Parent(s): 16618c0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +927 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chainsql
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: pink
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: chainsql
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,927 @@
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>ChainSQL - Database Bridge for Blockchain & ERP Systems</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1E293B',
17
+ light: '#F8FAFC',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ scroll-behavior: smooth;
32
+ }
33
+
34
+ .hero-gradient {
35
+ background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
36
+ }
37
+
38
+ .feature-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
41
+ }
42
+
43
+ .database-icon {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .database-icon:hover {
48
+ transform: scale(1.1);
49
+ }
50
+
51
+ .nav-link {
52
+ position: relative;
53
+ }
54
+
55
+ .nav-link::after {
56
+ content: '';
57
+ position: absolute;
58
+ width: 0;
59
+ height: 2px;
60
+ bottom: 0;
61
+ left: 0;
62
+ background-color: #4F46E5;
63
+ transition: width 0.3s ease;
64
+ }
65
+
66
+ .nav-link:hover::after {
67
+ width: 100%;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-light">
72
+ <!-- Navigation -->
73
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="flex justify-between h-16">
76
+ <div class="flex items-center">
77
+ <div class="flex-shrink-0 flex items-center">
78
+ <i class="fas fa-database text-primary text-2xl mr-2"></i>
79
+ <span class="text-xl font-bold text-dark">ChainSQL</span>
80
+ </div>
81
+ </div>
82
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
83
+ <a href="#features" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Features</a>
84
+ <a href="#how-it-works" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">How It Works</a>
85
+ <a href="#integrations" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Integrations</a>
86
+ <a href="#pricing" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Pricing</a>
87
+ <a href="#contact" class="nav-link text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">Contact</a>
88
+ </div>
89
+ <div class="flex items-center">
90
+ <a href="#" class="hidden md:block bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Started</a>
91
+ <button id="mobile-menu-button" class="md:hidden text-gray-500 hover:text-primary focus:outline-none">
92
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
93
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
94
+ </svg>
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Mobile menu -->
101
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md">
102
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
103
+ <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Features</a>
104
+ <a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">How It Works</a>
105
+ <a href="#integrations" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Integrations</a>
106
+ <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Pricing</a>
107
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-primary hover:bg-gray-50">Contact</a>
108
+ <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-primary hover:bg-primary-dark">Get Started</a>
109
+ </div>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Section -->
114
+ <section class="hero-gradient text-white">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
116
+ <div class="md:flex items-center">
117
+ <div class="md:w-1/2 mb-10 md:mb-0">
118
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Bridge Your Database to Blockchain</h1>
119
+ <p class="text-xl mb-8">ChainSQL enables traditional databases to seamlessly interact with blockchain networks using standard SQL queries. Connect your ERP systems to smart contracts effortlessly.</p>
120
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
121
+ <a href="#" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300 text-center">Start Free Trial</a>
122
+ <a href="#demo" class="border-2 border-white hover:bg-white hover:text-primary px-6 py-3 rounded-md text-lg font-semibold transition duration-300 text-center">Request Demo</a>
123
+ </div>
124
+ </div>
125
+ <div class="md:w-1/2 flex justify-center">
126
+ <div class="relative w-full max-w-md">
127
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
128
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-white bg-opacity-10 rounded-full"></div>
129
+ <div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-6 shadow-xl">
130
+ <div class="flex items-center mb-4">
131
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
132
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
133
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
134
+ <span class="text-sm ml-2">SQL Terminal</span>
135
+ </div>
136
+ <div class="bg-dark bg-opacity-90 rounded-lg p-4 font-mono text-sm">
137
+ <p class="text-green-400">-- Query Ethereum blockchain from MySQL</p>
138
+ <p class="text-blue-400">SELECT * FROM blockchain.transactions</p>
139
+ <p class="text-blue-400">WHERE contract_address = '0x...'</p>
140
+ <p class="text-blue-400">AND block_number > 1000000;</p>
141
+ <br>
142
+ <p class="text-green-400">-- Update SAP records with blockchain data</p>
143
+ <p class="text-blue-400">UPDATE erp.inventory</p>
144
+ <p class="text-blue-400">SET verified = blockchain.verify_hash(hash)</p>
145
+ <p class="text-blue-400">WHERE product_id = 'PRD-123';</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Trusted By Section -->
155
+ <section class="bg-white py-12">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <p class="text-center text-gray-500 mb-8">Trusted by enterprises worldwide</p>
158
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
159
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
160
+ <img src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Oracle_logo.svg" alt="Oracle" class="h-10 opacity-70 hover:opacity-100 transition duration-300">
161
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Netsuite_logo.svg" alt="Netsuite" class="h-8 opacity-70 hover:opacity-100 transition duration-300">
162
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/MySQL_logo.svg" alt="MySQL" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
163
+ <img src="https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg" alt="PostgreSQL" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Features Section -->
169
+ <section id="features" class="py-20 bg-gray-50">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="text-center mb-16">
172
+ <h2 class="text-3xl font-bold text-dark mb-4">Powerful Features</h2>
173
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">ChainSQL brings blockchain capabilities to your existing database infrastructure</p>
174
+ </div>
175
+
176
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
177
+ <!-- Feature 1 -->
178
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
179
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
180
+ <i class="fas fa-exchange-alt text-primary text-2xl"></i>
181
+ </div>
182
+ <h3 class="text-xl font-semibold mb-3">Bi-Directional Sync</h3>
183
+ <p class="text-gray-600">Keep your database and blockchain in perfect harmony with automatic two-way synchronization of data.</p>
184
+ </div>
185
+
186
+ <!-- Feature 2 -->
187
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
188
+ <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
189
+ <i class="fas fa-shield-alt text-secondary text-2xl"></i>
190
+ </div>
191
+ <h3 class="text-xl font-semibold mb-3">Immutable Audit Trails</h3>
192
+ <p class="text-gray-600">Create tamper-proof records of all database transactions stored directly on the blockchain.</p>
193
+ </div>
194
+
195
+ <!-- Feature 3 -->
196
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
197
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
198
+ <i class="fas fa-plug text-primary text-2xl"></i>
199
+ </div>
200
+ <h3 class="text-xl font-semibold mb-3">ERP Integration</h3>
201
+ <p class="text-gray-600">Direct connectivity with SAP, Oracle Netsuite, and other ERP systems without middleware.</p>
202
+ </div>
203
+
204
+ <!-- Feature 4 -->
205
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
206
+ <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
207
+ <i class="fas fa-code text-secondary text-2xl"></i>
208
+ </div>
209
+ <h3 class="text-xl font-semibold mb-3">Smart Contract Triggers</h3>
210
+ <p class="text-gray-600">Execute smart contracts automatically based on database events with our powerful trigger system.</p>
211
+ </div>
212
+
213
+ <!-- Feature 5 -->
214
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
215
+ <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
216
+ <i class="fas fa-lock text-primary text-2xl"></i>
217
+ </div>
218
+ <h3 class="text-xl font-semibold mb-3">Enterprise Security</h3>
219
+ <p class="text-gray-600">Military-grade encryption with role-based access control and blockchain verification for all data.</p>
220
+ </div>
221
+
222
+ <!-- Feature 6 -->
223
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
224
+ <div class="w-14 h-14 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
225
+ <i class="fas fa-chart-line text-secondary text-2xl"></i>
226
+ </div>
227
+ <h3 class="text-xl font-semibold mb-3">Performance Optimized</h3>
228
+ <p class="text-gray-600">High-speed queries with caching layer and parallel processing for blockchain interactions.</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+
234
+ <!-- How It Works Section -->
235
+ <section id="how-it-works" class="py-20 bg-white">
236
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
237
+ <div class="text-center mb-16">
238
+ <h2 class="text-3xl font-bold text-dark mb-4">How ChainSQL Works</h2>
239
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Simplify blockchain integration with familiar SQL syntax</p>
240
+ </div>
241
+
242
+ <div class="flex flex-col md:flex-row items-center mb-16">
243
+ <div class="md:w-1/2 mb-10 md:mb-0">
244
+ <h3 class="text-2xl font-semibold mb-4">Standard SQL, Blockchain Power</h3>
245
+ <p class="text-gray-600 mb-6">ChainSQL translates your SQL queries into blockchain operations, allowing you to interact with smart contracts and decentralized networks without learning new languages or tools.</p>
246
+ <ul class="space-y-3">
247
+ <li class="flex items-start">
248
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
249
+ <span>Use SELECT, INSERT, UPDATE with blockchain data</span>
250
+ </li>
251
+ <li class="flex items-start">
252
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
253
+ <span>Join database tables with blockchain records</span>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
257
+ <span>Create triggers that execute smart contracts</span>
258
+ </li>
259
+ </ul>
260
+ </div>
261
+ <div class="md:w-1/2">
262
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
263
+ <div class="flex mb-4">
264
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
265
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
266
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
267
+ </div>
268
+ <div class="bg-dark text-white p-4 rounded-lg font-mono text-sm overflow-x-auto">
269
+ <p><span class="text-green-400">-- Query blockchain and database in single statement</span></p>
270
+ <p><span class="text-purple-400">SELECT</span> p.product_id, p.name, p.price,</p>
271
+ <p> (<span class="text-purple-400">SELECT</span> COUNT(*) <span class="text-purple-400">FROM</span> blockchain.transactions t</p>
272
+ <p> <span class="text-purple-400">WHERE</span> t.product_id = p.product_id) <span class="text-purple-400">AS</span> tx_count</p>
273
+ <p><span class="text-purple-400">FROM</span> products p</p>
274
+ <p><span class="text-purple-400">WHERE</span> p.category = 'Electronics'</p>
275
+ <p><span class="text-purple-400">AND</span> blockchain.verify_owner(p.owner) = <span class="text-yellow-400">true</span>;</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="grid md:grid-cols-3 gap-8">
282
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
283
+ <div class="text-5xl text-primary font-bold mb-4">1</div>
284
+ <h4 class="text-xl font-semibold mb-3">Install Connector</h4>
285
+ <p class="text-gray-600">Deploy the ChainSQL plugin to your database server (MySQL, PostgreSQL, or Oracle).</p>
286
+ </div>
287
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
288
+ <div class="text-5xl text-primary font-bold mb-4">2</div>
289
+ <h4 class="text-xl font-semibold mb-3">Configure Networks</h4>
290
+ <p class="text-gray-600">Connect to Ethereum, Hyperledger, or other supported blockchain networks.</p>
291
+ </div>
292
+ <div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
293
+ <div class="text-5xl text-primary font-bold mb-4">3</div>
294
+ <h4 class="text-xl font-semibold mb-3">Write SQL Queries</h4>
295
+ <p class="text-gray-600">Start interacting with blockchain data using standard SQL syntax.</p>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- Database Support Section -->
302
+ <section id="integrations" class="py-20 bg-gray-50">
303
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
304
+ <div class="text-center mb-16">
305
+ <h2 class="text-3xl font-bold text-dark mb-4">Supported Databases</h2>
306
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">ChainSQL works with the databases you already use</p>
307
+ </div>
308
+
309
+ <div class="grid md:grid-cols-3 gap-8">
310
+ <!-- MySQL -->
311
+ <div class="database-card bg-white p-8 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300">
312
+ <div class="database-icon bg-blue-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
313
+ <i class="fas fa-database text-blue-500 text-3xl"></i>
314
+ </div>
315
+ <h3 class="text-xl font-semibold mb-3 text-blue-600">MySQL</h3>
316
+ <p class="text-gray-600 mb-4">Full support for MySQL 5.7+ and MariaDB with optimized blockchain extensions.</p>
317
+ <div class="flex justify-center space-x-2">
318
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Stored Procedures</span>
319
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Triggers</span>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- PostgreSQL -->
324
+ <div class="database-card bg-white p-8 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300">
325
+ <div class="database-icon bg-purple-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
326
+ <i class="fas fa-database text-purple-500 text-3xl"></i>
327
+ </div>
328
+ <h3 class="text-xl font-semibold mb-3 text-purple-600">PostgreSQL</h3>
329
+ <p class="text-gray-600 mb-4">Native integration with PostgreSQL 9.5+ including JSONB and custom functions.</p>
330
+ <div class="flex justify-center space-x-2">
331
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">JSON Support</span>
332
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Custom Types</span>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Oracle -->
337
+ <div class="database-card bg-white p-8 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300">
338
+ <div class="database-icon bg-red-50 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
339
+ <i class="fas fa-database text-red-500 text-3xl"></i>
340
+ </div>
341
+ <h3 class="text-xl font-semibold mb-3 text-red-600">Oracle</h3>
342
+ <p class="text-gray-600 mb-4">Enterprise-grade support for Oracle Database 12c+ with PL/SQL extensions.</p>
343
+ <div class="flex justify-center space-x-2">
344
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">PL/SQL</span>
345
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Enterprise</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="mt-16 bg-white rounded-xl shadow-md overflow-hidden">
351
+ <div class="md:flex">
352
+ <div class="md:w-1/2 bg-dark p-8 md:p-12 flex items-center">
353
+ <div>
354
+ <h3 class="text-2xl font-bold text-white mb-4">ERP System Integration</h3>
355
+ <p class="text-gray-300 mb-6">ChainSQL provides direct connectors for major ERP platforms, enabling real-time blockchain verification of critical business data.</p>
356
+ <ul class="space-y-3 text-gray-300">
357
+ <li class="flex items-center">
358
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
359
+ <span>SAP ECC and S/4HANA integration</span>
360
+ </li>
361
+ <li class="flex items-center">
362
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
363
+ <span>Oracle Netsuite real-time sync</span>
364
+ </li>
365
+ <li class="flex items-center">
366
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
367
+ <span>Microsoft Dynamics compatibility</span>
368
+ </li>
369
+ </ul>
370
+ </div>
371
+ </div>
372
+ <div class="md:w-1/2 p-8 md:p-12 bg-gray-50">
373
+ <h4 class="text-xl font-semibold mb-4">Use Cases</h4>
374
+ <div class="space-y-6">
375
+ <div class="flex">
376
+ <div class="flex-shrink-0">
377
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
378
+ <i class="fas fa-box"></i>
379
+ </div>
380
+ </div>
381
+ <div class="ml-4">
382
+ <h5 class="text-lg font-medium">Supply Chain Provenance</h5>
383
+ <p class="text-gray-600">Verify product authenticity from ERP to end consumer via blockchain.</p>
384
+ </div>
385
+ </div>
386
+ <div class="flex">
387
+ <div class="flex-shrink-0">
388
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-secondary text-white">
389
+ <i class="fas fa-file-invoice-dollar"></i>
390
+ </div>
391
+ </div>
392
+ <div class="ml-4">
393
+ <h5 class="text-lg font-medium">Smart Invoicing</h5>
394
+ <p class="text-gray-600">Automate invoice processing with smart contract payments.</p>
395
+ </div>
396
+ </div>
397
+ <div class="flex">
398
+ <div class="flex-shrink-0">
399
+ <div class="flex items-center justify-center h-10 w-10 rounded-md bg-primary text-white">
400
+ <i class="fas fa-user-shield"></i>
401
+ </div>
402
+ </div>
403
+ <div class="ml-4">
404
+ <h5 class="text-lg font-medium">Identity Verification</h5>
405
+ <p class="text-gray-600">Securely verify customer identities between ERP and blockchain.</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Pricing Section -->
416
+ <section id="pricing" class="py-20 bg-white">
417
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
418
+ <div class="text-center mb-16">
419
+ <h2 class="text-3xl font-bold text-dark mb-4">Simple, Transparent Pricing</h2>
420
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Choose the plan that fits your needs</p>
421
+ </div>
422
+
423
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
424
+ <!-- Starter Plan -->
425
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
426
+ <div class="px-6 py-8">
427
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Starter</h3>
428
+ <p class="text-gray-500 mb-6">Perfect for small projects</p>
429
+ <div class="flex items-baseline mb-6">
430
+ <span class="text-4xl font-extrabold">$99</span>
431
+ <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
432
+ </div>
433
+ <ul class="space-y-3 mb-8">
434
+ <li class="flex items-start">
435
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
436
+ <span>1 Database Instance</span>
437
+ </li>
438
+ <li class="flex items-start">
439
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
440
+ <span>Ethereum & Binance Chain</span>
441
+ </li>
442
+ <li class="flex items-start">
443
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
444
+ <span>10,000 Monthly Queries</span>
445
+ </li>
446
+ <li class="flex items-start">
447
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
448
+ <span>Email Support</span>
449
+ </li>
450
+ </ul>
451
+ <a href="#" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-md text-center transition duration-300">Get Started</a>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Professional Plan (Featured) -->
456
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-primary transform scale-105 z-10">
457
+ <div class="px-6 py-8">
458
+ <div class="flex justify-between items-center mb-2">
459
+ <h3 class="text-lg font-medium text-gray-900">Professional</h3>
460
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary text-white">Popular</span>
461
+ </div>
462
+ <p class="text-gray-500 mb-6">For growing businesses</p>
463
+ <div class="flex items-baseline mb-6">
464
+ <span class="text-4xl font-extrabold">$499</span>
465
+ <span class="ml-1 text-lg font-medium text-gray-500">/month</span>
466
+ </div>
467
+ <ul class="space-y-3 mb-8">
468
+ <li class="flex items-start">
469
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
470
+ <span>5 Database Instances</span>
471
+ </li>
472
+ <li class="flex items-start">
473
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
474
+ <span>All Public Blockchains</span>
475
+ </li>
476
+ <li class="flex items-start">
477
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
478
+ <span>100,000 Monthly Queries</span>
479
+ </li>
480
+ <li class="flex items-start">
481
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
482
+ <span>1 ERP Integration</span>
483
+ </li>
484
+ <li class="flex items-start">
485
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
486
+ <span>Priority Support</span>
487
+ </li>
488
+ </ul>
489
+ <a href="#" class="block w-full bg-primary hover:bg-primary-dark text-white font-medium py-3 px-4 rounded-md text-center transition duration-300">Get Started</a>
490
+ </div>
491
+ </div>
492
+
493
+ <!-- Enterprise Plan -->
494
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
495
+ <div class="px-6 py-8">
496
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Enterprise</h3>
497
+ <p class="text-gray-500 mb-6">For large organizations</p>
498
+ <div class="flex items-baseline mb-6">
499
+ <span class="text-4xl font-extrabold">Custom</span>
500
+ </div>
501
+ <ul class="space-y-3 mb-8">
502
+ <li class="flex items-start">
503
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
504
+ <span>Unlimited Databases</span>
505
+ </li>
506
+ <li class="flex items-start">
507
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
508
+ <span>Public & Private Blockchains</span>
509
+ </li>
510
+ <li class="flex items-start">
511
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
512
+ <span>Custom Query Limits</span>
513
+ </li>
514
+ <li class="flex items-start">
515
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
516
+ <span>Multiple ERP Integrations</span>
517
+ </li>
518
+ <li class="flex items-start">
519
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
520
+ <span>24/7 Dedicated Support</span>
521
+ </li>
522
+ </ul>
523
+ <a href="#contact" class="block w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-md text-center transition duration-300">Contact Sales</a>
524
+ </div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="mt-16 text-center">
529
+ <h3 class="text-xl font-semibold mb-4">Need something different?</h3>
530
+ <p class="text-gray-600 max-w-2xl mx-auto mb-6">We offer custom solutions for unique requirements, including on-premise deployment and specialized blockchain networks.</p>
531
+ <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-dark transition duration-300">
532
+ Contact Our Team
533
+ <i class="fas fa-arrow-right ml-2"></i>
534
+ </a>
535
+ </div>
536
+ </div>
537
+ </section>
538
+
539
+ <!-- Demo Section -->
540
+ <section id="demo" class="py-20 bg-gray-50">
541
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
542
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
543
+ <div class="lg:col-span-6">
544
+ <h2 class="text-3xl font-bold text-dark mb-6">See ChainSQL in Action</h2>
545
+ <p class="text-lg text-gray-600 mb-8">Request a personalized demo to see how ChainSQL can transform your database and ERP systems with blockchain capabilities.</p>
546
+
547
+ <div class="space-y-6">
548
+ <div class="flex">
549
+ <div class="flex-shrink-0">
550
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
551
+ <i class="fas fa-calendar-alt"></i>
552
+ </div>
553
+ </div>
554
+ <div class="ml-4">
555
+ <h4 class="text-lg font-medium">30-Minute Walkthrough</h4>
556
+ <p class="text-gray-600">See real examples of SQL queries interacting with blockchain networks.</p>
557
+ </div>
558
+ </div>
559
+ <div class="flex">
560
+ <div class="flex-shrink-0">
561
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
562
+ <i class="fas fa-laptop-code"></i>
563
+ </div>
564
+ </div>
565
+ <div class="ml-4">
566
+ <h4 class="text-lg font-medium">Live Q&A</h4>
567
+ <p class="text-gray-600">Get your specific questions answered by our solution architects.</p>
568
+ </div>
569
+ </div>
570
+ <div class="flex">
571
+ <div class="flex-shrink-0">
572
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
573
+ <i class="fas fa-gift"></i>
574
+ </div>
575
+ </div>
576
+ <div class="ml-4">
577
+ <h4 class="text-lg font-medium">Free Trial</h4>
578
+ <p class="text-gray-600">Get started with a 14-day free trial after your demo.</p>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <div class="mt-12 lg:mt-0 lg:col-span-6">
585
+ <div class="bg-white shadow-xl rounded-lg overflow-hidden">
586
+ <div class="px-6 py-8">
587
+ <h3 class="text-xl font-bold text-center mb-6">Schedule Your Demo</h3>
588
+ <form id="demoForm" class="space-y-6">
589
+ <div>
590
+ <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
591
+ <input type="text" id="name" name="name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
592
+ </div>
593
+ <div>
594
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
595
+ <input type="email" id="email" name="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
596
+ </div>
597
+ <div>
598
+ <label for="company" class="block text-sm font-medium text-gray-700">Company</label>
599
+ <input type="text" id="company" name="company" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
600
+ </div>
601
+ <div>
602
+ <label for="database" class="block text-sm font-medium text-gray-700">Primary Database</label>
603
+ <select id="database" name="database" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
604
+ <option>MySQL</option>
605
+ <option>PostgreSQL</option>
606
+ <option>Oracle</option>
607
+ <option>Other</option>
608
+ </select>
609
+ </div>
610
+ <div>
611
+ <label for="message" class="block text-sm font-medium text-gray-700">What would you like to see?</label>
612
+ <textarea id="message" name="message" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"></textarea>
613
+ </div>
614
+ <div>
615
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-300">
616
+ Request Demo
617
+ </button>
618
+ </div>
619
+ </form>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </section>
626
+
627
+ <!-- Testimonials -->
628
+ <section class="py-20 bg-white">
629
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
630
+ <div class="text-center mb-16">
631
+ <h2 class="text-3xl font-bold text-dark mb-4">Trusted by Industry Leaders</h2>
632
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">What our customers say about ChainSQL</p>
633
+ </div>
634
+
635
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
636
+ <!-- Testimonial 1 -->
637
+ <div class="bg-gray-50 p-6 rounded-xl">
638
+ <div class="flex items-center mb-4">
639
+ <div class="flex-shrink-0">
640
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Samantha Lee">
641
+ </div>
642
+ <div class="ml-4">
643
+ <h4 class="text-sm font-semibold">Samantha Lee</h4>
644
+ <p class="text-xs text-gray-500">CTO, Global Logistics Co.</p>
645
+ </div>
646
+ </div>
647
+ <p class="text-gray-600 italic">"ChainSQL revolutionized our supply chain tracking. Being able to query blockchain data directly from our Oracle database saved us months of development time."</p>
648
+ <div class="mt-4 flex text-yellow-400">
649
+ <i class="fas fa-star"></i>
650
+ <i class="fas fa-star"></i>
651
+ <i class="fas fa-star"></i>
652
+ <i class="fas fa-star"></i>
653
+ <i class="fas fa-star"></i>
654
+ </div>
655
+ </div>
656
+
657
+ <!-- Testimonial 2 -->
658
+ <div class="bg-gray-50 p-6 rounded-xl">
659
+ <div class="flex items-center mb-4">
660
+ <div class="flex-shrink-0">
661
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Rodriguez">
662
+ </div>
663
+ <div class="ml-4">
664
+ <h4 class="text-sm font-semibold">Michael Rodriguez</h4>
665
+ <p class="text-xs text-gray-500">Head of IT, Financial Services</p>
666
+ </div>
667
+ </div>
668
+ <p class="text-gray-600 italic">"The integration with our SAP system was seamless. Now we have immutable audit trails for all financial transactions without changing our existing workflows."</p>
669
+ <div class="mt-4 flex text-yellow-400">
670
+ <i class="fas fa-star"></i>
671
+ <i class="fas fa-star"></i>
672
+ <i class="fas fa-star"></i>
673
+ <i class="fas fa-star"></i>
674
+ <i class="fas fa-star-half-alt"></i>
675
+ </div>
676
+ </div>
677
+
678
+ <!-- Testimonial 3 -->
679
+ <div class="bg-gray-50 p-6 rounded-xl">
680
+ <div class="flex items-center mb-4">
681
+ <div class="flex-shrink-0">
682
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel">
683
+ </div>
684
+ <div class="ml-4">
685
+ <h4 class="text-sm font-semibold">Priya Patel</h4>
686
+ <p class="text-xs text-gray-500">Database Architect, Healthcare</p>
687
+ </div>
688
+ </div>
689
+ <p class="text-gray-600 italic">"We needed to verify patient consent records on blockchain but keep using PostgreSQL. ChainSQL was the perfect solution with its simple SQL interface."</p>
690
+ <div class="mt-4 flex text-yellow-400">
691
+ <i class="fas fa-star"></i>
692
+ <i class="fas fa-star"></i>
693
+ <i class="fas fa-star"></i>
694
+ <i class="fas fa-star"></i>
695
+ <i class="fas fa-star"></i>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </section>
701
+
702
+ <!-- CTA Section -->
703
+ <section class="py-16 bg-primary text-white">
704
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
705
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Database with Blockchain?</h2>
706
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Start your free 14-day trial today. No credit card required.</p>
707
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
708
+ <a href="#" class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">Start Free Trial</a>
709
+ <a href="#demo" class="border-2 border-white hover:bg-white hover:text-primary px-6 py-3 rounded-md text-lg font-semibold transition duration-300">Schedule Demo</a>
710
+ </div>
711
+ </div>
712
+ </section>
713
+
714
+ <!-- Contact Section -->
715
+ <section id="contact" class="py-20 bg-white">
716
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
717
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
718
+ <div class="lg:col-span-5">
719
+ <h2 class="text-3xl font-bold text-dark mb-6">Get in Touch</h2>
720
+ <p class="text-lg text-gray-600 mb-8">Have questions about ChainSQL? Our team is here to help.</p>
721
+
722
+ <div class="space-y-6">
723
+ <div class="flex">
724
+ <div class="flex-shrink-0">
725
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
726
+ <i class="fas fa-envelope"></i>
727
+ </div>
728
+ </div>
729
+ <div class="ml-4">
730
+ <h4 class="text-lg font-medium">Email Us</h4>
731
+ <p class="text-gray-600">support@chainsql.com</p>
732
+ </div>
733
+ </div>
734
+ <div class="flex">
735
+ <div class="flex-shrink-0">
736
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
737
+ <i class="fas fa-headset"></i>
738
+ </div>
739
+ </div>
740
+ <div class="ml-4">
741
+ <h4 class="text-lg font-medium">Support</h4>
742
+ <p class="text-gray-600">+1 (555) 123-4567</p>
743
+ </div>
744
+ </div>
745
+ <div class="flex">
746
+ <div class="flex-shrink-0">
747
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
748
+ <i class="fas fa-map-marker-alt"></i>
749
+ </div>
750
+ </div>
751
+ <div class="ml-4">
752
+ <h4 class="text-lg font-medium">Headquarters</h4>
753
+ <p class="text-gray-600">San Francisco, CA</p>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+
759
+ <div class="mt-12 lg:mt-0 lg:col-span-7">
760
+ <div class="bg-gray-50 shadow-xl rounded-lg overflow-hidden">
761
+ <div class="px-6 py-8">
762
+ <h3 class="text-xl font-bold text-center mb-6">Send Us a Message</h3>
763
+ <form id="contactForm" class="space-y-6">
764
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
765
+ <div>
766
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
767
+ <input type="text" id="first-name" name="first-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
768
+ </div>
769
+ <div>
770
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
771
+ <input type="text" id="last-name" name="last-name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
772
+ </div>
773
+ </div>
774
+ <div>
775
+ <label for="contact-email" class="block text-sm font-medium text-gray-700">Email</label>
776
+ <input type="email" id="contact-email" name="contact-email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
777
+ </div>
778
+ <div>
779
+ <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
780
+ <input type="text" id="subject" name="subject" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
781
+ </div>
782
+ <div>
783
+ <label for="contact-message" class="block text-sm font-medium text-gray-700">Message</label>
784
+ <textarea id="contact-message" name="contact-message" rows="4" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"></textarea>
785
+ </div>
786
+ <div>
787
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-300">
788
+ Send Message
789
+ </button>
790
+ </div>
791
+ </form>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </section>
798
+
799
+ <!-- Footer -->
800
+ <footer class="bg-dark text-white pt-16 pb-8">
801
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
802
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
803
+ <div>
804
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3>
805
+ <ul class="space-y-3">
806
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
807
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
808
+ <li><a href="#integrations" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li>
809
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Changelog</a></li>
810
+ </ul>
811
+ </div>
812
+ <div>
813
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Resources</h3>
814
+ <ul class="space-y-3">
815
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li>
816
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API Reference</a></li>
817
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
818
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
819
+ </ul>
820
+ </div>
821
+ <div>
822
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3>
823
+ <ul class="space-y-3">
824
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
825
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
826
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
827
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
828
+ </ul>
829
+ </div>
830
+ <div>
831
+ <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Legal</h3>
832
+ <ul class="space-y-3">
833
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy</a></li>
834
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms</a></li>
835
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Security</a></li>
836
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Compliance</a></li>
837
+ </ul>
838
+ </div>
839
+ </div>
840
+
841
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
842
+ <div class="flex items-center mb-6 md:mb-0">
843
+ <i class="fas fa-database text-primary text-2xl mr-2"></i>
844
+ <span class="text-xl font-bold">ChainSQL</span>
845
+ </div>
846
+ <div class="flex space-x-6 mb-6 md:mb-0">
847
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
848
+ <i class="fab fa-twitter text-xl"></i>
849
+ </a>
850
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
851
+ <i class="fab fa-linkedin text-xl"></i>
852
+ </a>
853
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
854
+ <i class="fab fa-github text-xl"></i>
855
+ </a>
856
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
857
+ <i class="fab fa-youtube text-xl"></i>
858
+ </a>
859
+ </div>
860
+ <p class="text-gray-400 text-sm">© 2023 ChainSQL. All rights reserved.</p>
861
+ </div>
862
+ </div>
863
+ </footer>
864
+
865
+ <script>
866
+ // Mobile menu toggle
867
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
868
+ const menu = document.getElementById('mobile-menu');
869
+ menu.classList.toggle('hidden');
870
+ });
871
+
872
+ // Form submission handlers
873
+ document.getElementById('demoForm').addEventListener('submit', function(e) {
874
+ e.preventDefault();
875
+ alert('Thank you for your demo request! We will contact you shortly.');
876
+ this.reset();
877
+ });
878
+
879
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
880
+ e.preventDefault();
881
+ alert('Thank you for your message! Our team will get back to you soon.');
882
+ this.reset();
883
+ });
884
+
885
+ // Smooth scrolling for anchor links
886
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
887
+ anchor.addEventListener('click', function (e) {
888
+ e.preventDefault();
889
+
890
+ const targetId = this.getAttribute('href');
891
+ if (targetId === '#') return;
892
+
893
+ const targetElement = document.querySelector(targetId);
894
+ if (targetElement) {
895
+ targetElement.scrollIntoView({
896
+ behavior: 'smooth'
897
+ });
898
+
899
+ // Close mobile menu if open
900
+ const mobileMenu = document.getElementById('mobile-menu');
901
+ if (!mobileMenu.classList.contains('hidden')) {
902
+ mobileMenu.classList.add('hidden');
903
+ }
904
+ }
905
+ });
906
+ });
907
+
908
+ // Animate elements when they come into view
909
+ const observerOptions = {
910
+ threshold: 0.1
911
+ };
912
+
913
+ const observer = new IntersectionObserver((entries) => {
914
+ entries.forEach(entry => {
915
+ if (entry.isIntersecting) {
916
+ entry.target.classList.add('animate-fadeIn');
917
+ observer.unobserve(entry.target);
918
+ }
919
+ });
920
+ }, observerOptions);
921
+
922
+ document.querySelectorAll('.feature-card, .database-card').forEach(card => {
923
+ observer.observe(card);
924
+ });
925
+ </script>
926
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alphonse86/chainsql" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
927
+ </html>