forked from tailwindtoolbox/Rainblur-Landing-Page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (139 loc) · 7.85 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tool0 - Effortless AI Agent Creation Without Code</title>
<meta name="description" content="Discover Tool0, the ultimate platform for creating AI agents effortlessly without any coding. Leverage our extensive library of professional-grade tools to build powerful AI solutions." />
<meta name="keywords" content="AI agents, no-code AI, AI tools, Tool0, create AI, AI development, AI solutions" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://unpkg.com/@tailwindcss/custom-forms/dist/custom-forms.min.css" rel="stylesheet" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
html {
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>
</head>
<body class="leading-normal tracking-normal text-gray-700 m-0 bg-cover bg-fixed" style="background-color: #f8fafc; background-image: linear-gradient(120deg, rgba(224, 242, 254, 0.8) 0%, rgba(240, 249, 255, 0.8) 50%, rgba(236, 254, 255, 0.8) 100%);">
<div class="h-full">
<!--Nav-->
<div class="w-full container mx-auto px-6 py-8">
<div class="w-full flex items-center justify-between">
<a class="flex items-center text-gray-800 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="#">
Tool<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-500">0.dev</span>
</a>
<div class="flex w-1/2 justify-end content-center">
<a class="inline-block text-gray-500 no-underline hover:text-blue-500 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 transform hover:scale-125 duration-500 ease-in-out" href="https://x.com/tool0dev" aria-label="Follow Tool0 on X">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"/></svg>
</a>
<a class="inline-block text-gray-500 no-underline hover:text-blue-500 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 transform hover:scale-125 duration-500 ease-in-out" href="https://www.linkedin.com/company/tool0/" aria-label="Connect with Tool0 on LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M2 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm1.05 5h1.9v6h-1.9zm2.025-1.995a1.075 1.075 0 1 1-2.15 0a1.075 1.075 0 0 1 2.15 0M12 8.357c0-1.805-1.167-2.507-2.326-2.507a2.2 2.2 0 0 0-1.095.231c-.257.13-.526.424-.734.938h-.053V6H6v6.005h1.906V8.81c-.027-.327.077-.75.291-1.001c.215-.252.52-.312.753-.342h.073c.606 0 1.056.375 1.056 1.32v3.217h1.906z" clip-rule="evenodd"/></svg>
</a>
</div>
</div>
</div>
<!--Main-->
<div class="container pt-16 md:pt-28 pb-16 mx-auto flex flex-wrap flex-col md:flex-row items-center px-6 md:px-12">
<!--Left Col-->
<div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden md:pr-12">
<h1 class="my-6 text-3xl md:text-5xl text-gray-800 font-bold leading-tight text-center md:text-left">
Create
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-500">
AI Agents
</span>
<br>without code.
</h1>
<p class="leading-normal text-base md:text-xl mb-10 text-center md:text-left text-gray-600">
Build powerful AI agents with our vast library of professional-grade tools.
</p>
<form class="bg-white w-full shadow-lg rounded-lg px-8 pt-8 pb-10 mb-6 border border-gray-100">
<script async src="https://eocampaign1.com/form/43c7c94e-f69f-11ef-b3ee-973e85d8e18d.js" data-form="43c7c94e-f69f-11ef-b3ee-973e85d8e18d"></script>
</form>
</div>
<!--Right Col-->
<div class="w-full xl:w-3/5 pt-6 pb-6 md:p-12 overflow-hidden">
<img id="animated-image" class="mx-auto w-full md:w-4/5 transform transition-opacity duration-1000 ease-in-out opacity-100" src="images/1.png" alt="AI Agent Creation Tool" />
</div>
<script>
let currentImageIndex = 1;
const totalImages = 6;
const imageElement = document.getElementById('animated-image');
setInterval(() => {
// Fade out
imageElement.classList.remove('opacity-100');
imageElement.classList.add('opacity-0');
setTimeout(() => {
// Change image
currentImageIndex = (currentImageIndex % totalImages) + 1;
imageElement.src = `images/${currentImageIndex}.png`;
// Fade in with subtle slide animation
imageElement.classList.remove('opacity-0', 'translate-y-4');
imageElement.classList.add('opacity-100', 'translate-y-0');
// Reset animation after it completes
setTimeout(() => {
imageElement.classList.remove('translate-y-0');
imageElement.classList.add('translate-y-4');
}, 4000);
}, 500);
}, 5000);
</script>
<style>
.opacity-0 {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.opacity-100 {
opacity: 1;
transition: opacity 1s ease-in-out;
}
.translate-y-0 {
transform: translateY(0);
transition: transform 1s ease-in-out;
}
.translate-y-4 {
transform: translateY(16px);
transition: transform 1s ease-in-out;
}
/* Natural, colorful background elements */
body::before {
content: '';
position: fixed;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
z-index: -1;
}
body::after {
content: '';
position: fixed;
bottom: -50%;
left: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.03) 50%, transparent 70%);
z-index: -1;
}
</style>
</div>
<!-- Footer -->
<footer class="w-full py-12 mt-20">
<div class="container mx-auto px-6 md:px-12">
<div class="w-full h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent mb-10"></div>
<div class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
<div class="text-center md:text-left">
<p class="text-gray-500 text-sm">© 2025 Tool0.dev</p>
</div>
</div>
<div class="text-center mt-8">
<p class="text-xs text-gray-500">Simple. Powerful. Intelligent.</p>
</div>
</div>
</footer>
</div>
</body>
</html>