GradientX/tool3.html at main · um-xair/GradientX · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>R4XN Developer Tools</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

            body {
                font-family: 'Inter', sans-serif;
            }

            .gradient-text {
                background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .glass-effect {
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .crypto-gradient {
                background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
            }

            .crypto-glow {
                box-shadow: 0 0 50px rgba(99, 102, 241, 0.3);
            }

            .floating-crypto {
                animation: cryptoFloat 6s ease-in-out infinite;
            }

            .floating-crypto:nth-child(2) {
                animation-delay: 2s;
            }

            .floating-crypto:nth-child(3) {
                animation-delay: 4s;
            }

            @keyframes cryptoFloat {
                0%, 100% {
                    transform: translateY(0px) rotate(0deg);
                }
                50% {
                    transform: translateY(-20px) rotate(180deg);
                }
            }

            .pulse-ring {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }

            @keyframes pulse {
                0%, 100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.5;
                }
            }

            .typing-animation {
                overflow: hidden;
                border-right: 3px solid #38bdf8;
                white-space: nowrap;
                margin: 0 auto;
                animation: typing 3s steps(40, end), blink-caret 0.5s step-end infinite;
            }

            @keyframes typing {
                from {
                    width: 0;
                }
                to {
                    width: 100%;
                }
            }

            @keyframes blink-caret {
                from, to {
                    border-color: transparent;
                }
                50% {
                    border-color: #38bdf8;
                }
            }

            .hover-lift {
                transition: all 0.3s;
            }

            .hover-lift:hover {
                transform: translateY(-6px);
            }
        </style>
    </head>
    <body class="bg-black text-white overflow-x-hidden">
        <nav class="fixed top-0 left-0 right-0 z-50 bg-black/80 glass-effect">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <div class="text-2xl font-bold gradient-text">R4XN Tools</div>
                    <div class="hidden md:flex space-x-8">
                        <a href="#features" class="hover:text-sky-400 transition-colors">Features</a>
                        <a href="#pricing" class="hover:text-sky-400 transition-colors">Pricing</a>
                        <a href="#about" class="hover:text-sky-400 transition-colors">About</a>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 text-sm border border-sky-500 rounded-lg hover:bg-sky-500 transition-colors">Sign In</button>
                        <button class="px-4 py-2 text-sm crypto-gradient rounded-lg hover:scale-105 transition-transform">Get Started</button>
                    </div>
                </div>
            </div>
        </nav>

        <section class="relative min-h-screen flex items-center justify-center bg-black bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:40px_40px] overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-black/80 via-gray-900/60 to-black/80"></div>
            <div class="absolute inset-0 overflow-hidden">
                <div class="floating-crypto absolute top-20 left-10 text-6xl opacity-20">⚙️</div>
                <div class="floating-crypto absolute top-40 right-20 text-4xl opacity-20">{ }</div>
                <div class="floating-crypto absolute bottom-32 left-32 text-5xl opacity-20">💻</div>
            </div>
            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500 rounded-full opacity-20 blur-3xl"></div>
            <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500 rounded-full opacity-20 blur-3xl"></div>
            <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
                <div class="inline-flex items-center px-4 py-2 mb-8 bg-gray-900/50 glass-effect rounded-full">
                    <div class="w-2 h-2 bg-green-400 rounded-full mr-2 pulse-ring"></div>
                    <span class="text-sm text-gray-300">Open Source • Developer First</span>
                </div>
                <h1 class="text-5xl md:text-7xl lg:text-8xl font-black mb-6 leading-tight">
                    <span class="block text-white">Build Smarter with</span>
                    <span class="block gradient-text">R4XN Developer Tools</span>
                    <span class="block text-white">Automation & Speed</span>
                </h1>
                <div class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
                    <div class="typing-animation">Scaffold apps, deploy APIs, and monitor everything—effortlessly</div>
                </div>
                <div class="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
                    <button class="group relative px-8 py-4 crypto-gradient rounded-lg hover-lift overflow-hidden crypto-glow">
                        <div class="absolute inset-0 bg-gradient-to-r from-sky-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                        <div class="relative flex items-center font-semibold">
                            <span>Launch Your Stack</span>
                            <svg class="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </div>
                    </button>
                    <button class="group px-8 py-4 bg-gray-900/40 text-white rounded-lg glass-effect hover-lift">
                        <div class="flex items-center font-semibold">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-10 5l18-18"></path>
                            </svg>
                            <span>Explore Docs</span>
                        </div>
                    </button>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                    <div class="p-4 bg-gray-900/30 glass-effect rounded-lg">
                        <div class="text-2xl font-bold text-green-400 mb-1">9,800+</div>
                        <div class="text-sm text-gray-400">Developers onboarded</div>
                    </div>
                    <div class="p-4 bg-gray-900/30 glass-effect rounded-lg">
                        <div class="text-2xl font-bold text-blue-400 mb-1">400+</div>
                        <div class="text-sm text-gray-400">APIs deployed</div>
                    </div>
                    <div class="p-4 bg-gray-900/30 glass-effect rounded-lg">
                        <div class="text-2xl font-bold text-purple-400 mb-1">99.98%</div>
                        <div class="text-sm text-gray-400">Uptime last 12 months</div>
                    </div>
                    <div class="p-4 bg-gray-900/30 glass-effect rounded-lg">
                        <div class="text-2xl font-bold text-yellow-400 mb-1">12K+</div>
                        <div class="text-sm text-gray-400">Projects generated</div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>