-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathai.html
More file actions
194 lines (187 loc) · 10.8 KB
/
Copy pathai.html
File metadata and controls
194 lines (187 loc) · 10.8 KB
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
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-Powered Matching - CraftConnect</title>
<link rel="icon" href="imagefavicon.jpg" type="image/jpeg">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans">
<!-- Header -->
<header class="bg-slate-800 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">CraftConnect</a>
<nav>
<ul class="flex space-x-4">
<li><a href="index.html" class="hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-blue-300">Features</a></li>
<li><a href="product.html" class="hover:text-blue-300">Products</a></li>
<li><a href="message.html" class="hover:text-blue-300">Community</a></li>
<li><a href="profile.html" class="hover:text-blue-300">Profile</a></li>
</ul>
</nav>
<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded">Login / Register</button>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
<div class="container mx-auto text-center">
<h1 class="text-4xl font-bold mb-4">AI-Powered Matching</h1>
<p class="text-xl mb-8">Connecting Buyers and Sellers Effortlessly</p>
<p class="max-w-2xl mx-auto mb-8">Our advanced AI algorithm enhances the CraftConnect platform by intelligently matching buyers with the best sellers and products, creating a seamless and personalized experience.</p>
<div class="space-x-4">
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-blue-100">Explore AI Features</button>
<button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600">Join Now</button>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="py-16 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">How Our AI Works</h2>
<div class="flex justify-around items-start flex-wrap">
<div class="w-full md:w-1/3 text-center px-4 mb-8">
<i class="fas fa-database text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Data Collection</h3>
<p>AI gathers user preferences and behaviors to understand individual needs.</p>
</div>
<div class="w-full md:w-1/3 text-center px-4 mb-8">
<i class="fas fa-chart-line text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Analysis</h3>
<p>Advanced algorithms analyze the collected data to identify patterns and trends.</p>
</div>
<div class="w-full md:w-1/3 text-center px-4 mb-8">
<i class="fas fa-puzzle-piece text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Matching</h3>
<p>AI matches buyers with suitable sellers and products based on the analysis.</p>
</div>
</div>
</div>
</section>
<!-- Key Features Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">AI-Powered Features</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-thumbs-up text-3xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Personalized Recommendations</h3>
<p>AI provides tailored product recommendations based on user preferences and browsing history.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-search text-3xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Smart Search</h3>
<p>Intelligent search functionality powered by AI to help users find exactly what they're looking for.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-comments text-3xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Automated Messaging</h3>
<p>AI facilitates communication between buyers and sellers with smart, contextual messaging.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-shield-alt text-3xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Fraud Detection</h3>
<p>AI-powered systems to detect and prevent fraudulent activities, ensuring a safe marketplace.</p>
</div>
</div>
</div>
</section>
<!-- Success Stories Section -->
<!--- <section class="py-16 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Success Stories</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-100 p-6 rounded-lg">
<p class="italic mb-4">"Thanks to CraftConnect's AI matching, I found the perfect handmade jewelry for my wedding. The recommendations were spot-on!"</p>
<p class="font-bold">- Sarah T., Buyer</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg">
<p class="italic mb-4">"As a seller, the AI-powered platform has significantly increased my sales by connecting me with interested buyers."</p>
<p class="font-bold">- Mark R., Seller</p>
</div>
</div>
</div>
</section>
-->
<!-- Benefits Section -->
<section class="py-16 bg-gray-100">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Benefits of AI-Powered Matching</h2>
<div class="flex flex-wrap justify-around">
<div class="w-full md:w-1/4 text-center mb-8">
<i class="fas fa-bolt text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Efficiency</h3>
<p>Faster and more efficient connections between buyers and sellers.</p>
</div>
<div class="w-full md:w-1/4 text-center mb-8">
<i class="fas fa-bullseye text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Accuracy</h3>
<p>More accurate product recommendations and matches.</p>
</div>
<div class="w-full md:w-1/4 text-center mb-8">
<i class="fas fa-lock text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">Security</h3>
<p>Enhanced security and fraud detection for a safer platform.</p>
</div>
<div class="w-full md:w-1/4 text-center mb-8">
<i class="fas fa-smile text-5xl text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold mb-2">User Satisfaction</h3>
<p>Improved overall user experience and satisfaction.</p>
</div>
</div>
</div>
</section>
<!-- Get Started Section -->
<section class="py-16 bg-blue-600 text-white">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-bold mb-8">Get Started with CraftConnect</h2>
<p class="mb-8 max-w-2xl mx-auto">Experience the power of AI-driven matching and take your crafting journey to the next level.</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-full font-bold text-lg hover:bg-blue-100">Sign Up Now</button>
<p class="mt-4"><a href="#" class="underline">Learn more</a> about our AI features or check our <a href="#" class="underline">FAQ</a>.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-800 text-white py-8">
<div class="container mx-auto flex flex-wrap justify-between">
<div class="w-full md:w-1/4 mb-8 md:mb-0">
<h3 class="text-xl font-bold mb-4">About CraftConnect</h3>
<p>CraftConnect is your go-to platform for connecting artisans and discovering unique handmade products.</p>
</div>
<div class="w-full md:w-1/4 mb-8 md:mb-0">
<h3 class="text-xl font-bold mb-4">Quick Links</h3>
<ul>
<li><a href="#" class="hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-blue-300">Shop</a></li>
<li><a href="#" class="hover:text-blue-300">Blog</a></li>
<li><a href="#" class="hover:text-blue-300">About Us</a></li>
<li><a href="#" class="hover:text-blue-300">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-8 md:mb-0">
<h3 class="text-xl font-bold mb-4">Contact Us</h3>
<p>Email: info@craftconnect.com</p>
<p>Phone: +1 234 567 890</p>
<p>Address: 123 Craft Lane, Artisan City, CA 90210</p>
</div>
<div class="w-full md:w-1/4">
<h3 class="text-xl font-bold mb-4">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-2xl hover:text-blue-300"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-2xl hover:text-blue-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-2xl hover:text-blue-300"><i class="fab fa-instagram"></i></a>
</div>
<h3 class="text-xl font-bold mt-4 mb-2">Newsletter</h3>
<form class="flex">
<input type="email" placeholder="Your email" class="p-2 rounded-l-lg w-full">
<button type="submit" class="bg-blue-500 text-white p-2 rounded-r-lg">Subscribe</button>
</form>
</div>
</div>
<div class="text-center mt-8">
<p>© 2024 CraftConnect. All rights reserved.</p>
</div>
</footer>
</body>
</html>