-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (143 loc) · 6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FetchFast</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<style>
body {
font-family: "Poppins", sans-serif;
}
.gradient-text {
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.feature-icon {
background: linear-gradient(to right, #8e2de2, #4a00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800">
<!-- Header -->
<header
class="bg-gradient-to-r from-purple-600 to-blue-500 text-white py-12">
<div class="container mx-auto text-center">
<h1 class="text-5xl font-bold mb-4">FetchFast</h1>
<p class="text-2xl mb-6">The Ultimate Tool for Rapid API Testing</p>
</div>
</header>
<!-- Features Section -->
<section class="py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center mb-16 gradient-text">
Why Choose FetchFast?
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<!-- Feature 1 -->
<div
class="bg-white p-8 shadow-xl rounded-lg text-center transform hover:scale-105 transition-transform duration-300">
<i class="fas fa-bolt fa-4x mb-6 feature-icon"></i>
<h3 class="text-2xl font-semibold mb-4">Blazing Fast</h3>
<p class="text-gray-600">
Experience unparalleled speed and efficiency with FetchFast,
optimizing your workflow like never before.
</p>
</div>
<!-- Feature 2 -->
<div
class="bg-white p-8 shadow-xl rounded-lg text-center transform hover:scale-105 transition-transform duration-300">
<i class="fas fa-user-friends fa-4x mb-6 feature-icon"></i>
<h3 class="text-2xl font-semibold mb-4">Intuitive Interface</h3>
<p class="text-gray-600">
Enjoy a user-friendly interface designed to be accessible for
developers of all skill levels.
</p>
</div>
<!-- Feature 3 -->
<div
class="bg-white p-8 shadow-xl rounded-lg text-center transform hover:scale-105 transition-transform duration-300">
<i class="fas fa-code fa-4x mb-6 feature-icon"></i>
<h3 class="text-2xl font-semibold mb-4">Highly Versatile</h3>
<p class="text-gray-600">
Supports all HTTP methods and offers a comprehensive suite of
features for thorough API testing.
</p>
</div>
</div>
</div>
</section>
<!-- Screenshot Section -->
<section class="bg-gradient-to-r from-blue-500 to-purple-600 py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-bold text-white mb-16">
See FetchFast in Action
</h2>
<div
class="rounded-lg shadow-2xl inline-block overflow-hidden transform hover:scale-105 transition-transform duration-300">
<!-- Replace 'path-to-your-screenshot.png' with the actual path to your screenshot file -->
<img
src="./screenshot.png"
alt="Extension Screenshot"
class="rounded-lg" />
</div>
</div>
</section>
<!-- Download Section -->
<section class="bg-white py-20" id="download">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Download FetchFast Now</h2>
<p class="text-xl mb-12">Elevate your API testing experience today!</p>
<a
href="https://chromewebstore.google.com/detail/http-requester/cphnklgdpghfegmlpihlfhgngfgepiee"
target="_blank"
class="bg-purple-500 text-white py-4 px-12 rounded-full text-lg font-medium hover:bg-purple-600 transition-colors duration-300 inline-flex items-center"
><i class="fa-brands fa-chrome mr-2"></i> Get it on Chrome Web
Store</a
>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center mb-16">What Our Users Say</h2>
<div class="space-y-12">
<!-- Testimonial 1 -->
<blockquote
class="flex flex-col md:flex-row bg-white shadow-xl rounded-lg p-8 transform hover:scale-105 transition-transform duration-300">
<div class="md:flex-shrink-0 text-center md:text-left">
<i class="fas fa-quote-left fa-3x text-purple-300"></i>
</div>
<div class="mt-6 md:mt-0 md:ml-8 text-center md:text-left">
<p class="text-gray-700 text-xl">
"FetchFast has revolutionized my API testing process. It's
incredibly fast and easy to use. A must-have tool for every
developer!"
</p>
<footer class="mt-4 text-sm text-gray-500">
- Jane Doe, Senior Developer
</footer>
</div>
</blockquote>
<!-- Additional testimonials can be added here -->
</div>
</div>
</section>
<!-- Footer -->
<footer
class="py-12 bg-gradient-to-r from-purple-600 to-blue-500 text-white text-center">
<p class="text-lg">© 2024 FetchFast | All Rights Reserved</p>
<p class="text-sm mt-4">Crafted with ❤️ by Nexys</p>
</footer>
</body>
</html>