|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AbilityXchange | AI-Powered Skills Marketplace</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
|
<style> |
|
:root { |
|
--primary: #A4FF63; |
|
--primary-dark: #85D44F; |
|
--dark: #0A0A0A; |
|
--darker: #010101; |
|
--light: #F5F5F5; |
|
--gray: #1E1E1E; |
|
} |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: var(--dark); |
|
color: white; |
|
overflow-x: hidden; |
|
scroll-behavior: smooth; |
|
} |
|
|
|
.hero-title { |
|
line-height: 1.1; |
|
letter-spacing: -0.05em; |
|
} |
|
|
|
.glow-text { |
|
text-shadow: 0 0 10px rgba(164, 255, 99, 0.7); |
|
} |
|
|
|
.glow-box { |
|
box-shadow: 0 0 20px rgba(164, 255, 99, 0.3); |
|
} |
|
|
|
.gradient-box { |
|
background: linear-gradient(135deg, rgba(10, 10, 10, 0.8), rgba(1, 1, 1, 0.9)); |
|
backdrop-filter: blur(10px); |
|
-webkit-backdrop-filter: blur(10px); |
|
border: 1px solid rgba(164, 255, 99, 0.1); |
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.primary-border { |
|
position: relative; |
|
} |
|
|
|
.primary-border::after { |
|
content: ''; |
|
position: absolute; |
|
inset: 0; |
|
border-radius: inherit; |
|
padding: 2px; |
|
background: linear-gradient(45deg, var(--primary), rgba(164, 255, 99, 0.3)); |
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
|
mask-composite: exclude; |
|
pointer-events: none; |
|
} |
|
|
|
@keyframes float { |
|
0%, 100% { transform: translateY(0px); } |
|
50% { transform: translateY(-15px); } |
|
} |
|
|
|
.floating { |
|
animation: float 6s ease-in-out infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { box-shadow: 0 0 0 0 rgba(164, 255, 99, 0.7); } |
|
70% { box-shadow: 0 0 0 15px rgba(164, 255, 99, 0); } |
|
100% { box-shadow: 0 0 0 0 rgba(164, 255, 99, 0); } |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
.typewriter { |
|
border-right: 3px solid var(--primary); |
|
white-space: nowrap; |
|
overflow: hidden; |
|
display: inline-block; |
|
vertical-align: bottom; |
|
} |
|
|
|
.typing { |
|
animation: blink-caret 1s step-end infinite; |
|
} |
|
|
|
@keyframes blink-caret { |
|
from, to { border-color: transparent } |
|
50% { border-color: var(--primary); } |
|
} |
|
|
|
.scrolling-text { |
|
animation: scrollText 20s linear infinite; |
|
white-space: nowrap; |
|
} |
|
|
|
@keyframes scrollText { |
|
0% { transform: translateX(0); } |
|
100% { transform: translateX(-50%); } |
|
} |
|
|
|
.gradient-mask { |
|
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); |
|
} |
|
|
|
.ai-chip { |
|
position: absolute; |
|
top: -12px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background: linear-gradient(90deg, #000000, #1E1E1E, #000000); |
|
color: var(--primary); |
|
padding: 4px 12px; |
|
border-radius: 20px; |
|
font-size: 12px; |
|
font-weight: bold; |
|
border: 1px solid rgba(164, 255, 99, 0.3); |
|
box-shadow: 0 0 10px rgba(164, 255, 99, 0.2); |
|
} |
|
|
|
.gradient-text { |
|
background: linear-gradient(90deg, var(--primary), #B0FF7D); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.shadow-inner-custom { |
|
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
.grid-pattern { |
|
background-image: |
|
linear-gradient(rgba(164, 255, 99, 0.05) 1px, transparent 1px), |
|
linear-gradient(90deg, rgba(164, 255, 99, 0.05) 1px, transparent 1px); |
|
background-size: 30px 30px; |
|
} |
|
|
|
.hexagon-bg { |
|
background-image: url("data:image/svg+xml,%3Csvg width='52' height='60' viewBox='0 0 52 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0L51.9808 15V45L26 60L0.019237 45V15L26 0Z' fill='%2300FFA3' fill-opacity='0.03'/%3E%3C/svg%3E%0A"); |
|
background-size: 52px 60px; |
|
opacity: 0.5; |
|
} |
|
|
|
.animated-blob { |
|
position: absolute; |
|
border-radius: 50%; |
|
filter: blur(40px); |
|
opacity: 0.2; |
|
animation: blob-move 15s infinite alternate; |
|
} |
|
|
|
@keyframes blob-move { |
|
0%, 100% { transform: translate(0%, 0%); } |
|
25% { transform: translate(10%, -15%); } |
|
50% { transform: translate(5%, 10%); } |
|
75% { transform: translate(-10%, 5%); } |
|
} |
|
|
|
.tilt-effect { |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.tilt-effect:hover { |
|
transform: perspective(1000px) rotateY(5deg) rotateX(3deg) scale(1.05); |
|
} |
|
|
|
.tech-grid { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
|
gap: 1rem; |
|
} |
|
|
|
.feature-card:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 15px 30px rgba(164, 255, 99, 0.2); |
|
} |
|
.feature-card { |
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
} |
|
|
|
.testimonial-card { |
|
transition: all 0.3s ease; |
|
border: 1px solid rgba(164, 255, 99, 0.1); |
|
} |
|
|
|
.testimonial-card:hover { |
|
border-color: rgba(164, 255, 99, 0.3); |
|
} |
|
|
|
.pricing-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px rgba(164, 255, 99, 0.15); |
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
.hero-title { |
|
font-size: 2.5rem; |
|
} |
|
.section-title { |
|
font-size: 2rem; |
|
} |
|
} |
|
|
|
|
|
.primary-underline { |
|
position: relative; |
|
display: inline-block; |
|
} |
|
|
|
.primary-underline::after { |
|
content: ''; |
|
position: absolute; |
|
width: 100%; |
|
height: 3px; |
|
bottom: -5px; |
|
left: 0; |
|
background: linear-gradient(90deg, var(--primary), transparent); |
|
transform: scaleX(0); |
|
transform-origin: left; |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.primary-underline:hover::after { |
|
transform: scaleX(1); |
|
} |
|
|
|
|
|
.btn-primary { |
|
background-color: var(--primary); |
|
color: var(--dark); |
|
font-weight: 700; |
|
position: relative; |
|
overflow: hidden; |
|
z-index: 1; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.btn-primary:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 10px 20px rgba(164, 255, 99, 0.3); |
|
} |
|
|
|
.btn-primary::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 0; |
|
height: 100%; |
|
background-color: rgba(255, 255, 255, 0.1); |
|
transition: all 0.3s ease; |
|
z-index: -1; |
|
} |
|
|
|
.btn-primary:hover::before { |
|
width: 100%; |
|
} |
|
|
|
.btn-secondary { |
|
background-color: transparent; |
|
border: 2px solid var(--primary); |
|
color: var(--primary); |
|
font-weight: 700; |
|
position: relative; |
|
overflow: hidden; |
|
z-index: 1; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.btn-secondary:hover { |
|
color: var(--dark); |
|
transform: translateY(-2px); |
|
} |
|
|
|
.btn-secondary::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 0; |
|
height: 100%; |
|
background-color: var(--primary); |
|
transition: all 0.3s ease; |
|
z-index: -1; |
|
} |
|
|
|
.btn-secondary:hover::before { |
|
width: 100%; |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: var(--darker); |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: var(--primary); |
|
border-radius: 4px; |
|
} |
|
|
|
|
|
.input-field { |
|
background-color: rgba(30, 30, 30, 0.8); |
|
border: 1px solid rgba(164, 255, 99, 0.2); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.input-field:focus { |
|
border-color: var(--primary); |
|
box-shadow: 0 0 0 3px rgba(164, 255, 99, 0.2); |
|
} |
|
|
|
|
|
.sparkle { |
|
position: absolute; |
|
width: 4px; |
|
height: 4px; |
|
background-color: var(--primary); |
|
border-radius: 50%; |
|
pointer-events: none; |
|
opacity: 0; |
|
} |
|
|
|
|
|
@media (max-width: 1024px) { |
|
.feature-columns { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.feature-columns { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(20px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
.animate-fade-in { |
|
animation: fadeIn 0.6s ease forwards; |
|
} |
|
|
|
|
|
.wave-divider { |
|
position: relative; |
|
height: 60px; |
|
overflow: hidden; |
|
} |
|
|
|
.wave-divider svg { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
|
|
.stat-card { |
|
background: rgba(10, 10, 10, 0.6); |
|
border: 1px solid rgba(164, 255, 99, 0.1); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.stat-card:hover { |
|
border-color: rgba(164, 255, 99, 0.3); |
|
transform: translateY(-5px); |
|
} |
|
|
|
|
|
.gradient-border { |
|
position: relative; |
|
background: var(--dark); |
|
} |
|
|
|
.gradient-border::before { |
|
content: ''; |
|
position: absolute; |
|
top: -1px; |
|
left: -1px; |
|
right: -1px; |
|
bottom: -1px; |
|
background: linear-gradient(45deg, var(--primary), #0066FF); |
|
z-index: -1; |
|
border-radius: inherit; |
|
} |
|
|
|
|
|
.animated-gradient { |
|
background: linear-gradient(-45deg, #A4FF63, #0066FF, #A4FF63); |
|
background-size: 300% 300%; |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
animation: gradient 6s ease infinite; |
|
} |
|
|
|
@keyframes gradient { |
|
0% { background-position: 0% 50%; } |
|
50% { background-position: 100% 50%; } |
|
100% { background-position: 0% 50%; } |
|
} |
|
|
|
|
|
.leaderboard-item:nth-child(1) .rank { |
|
background: linear-gradient(135deg, #FFD700, #FFA500); |
|
color: black; |
|
} |
|
|
|
.leaderboard-item:nth-child(2) .rank { |
|
background: linear-gradient(135deg, #C0C0C0, #A0A0A0); |
|
color: black; |
|
} |
|
|
|
.leaderboard-item:nth-child(3) .rank { |
|
background: linear-gradient(135deg, #CD7F32, #A66D2C); |
|
color: black; |
|
} |
|
|
|
|
|
.ai-tool-container { |
|
background: linear-gradient(135deg, #131313 0%, #0A0A0A 100%); |
|
border-radius: 12px; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
|
|
.ai-tool-header { |
|
background: rgba(20, 20, 20, 0.8); |
|
padding: 12px 16px; |
|
border-bottom: 1px solid rgba(164, 255, 99, 0.1); |
|
} |
|
|
|
.ai-tool-content { |
|
padding: 20px; |
|
min-height: 300px; |
|
} |
|
|
|
.ai-message { |
|
background: rgba(30, 30, 30, 0.7); |
|
border-radius: 8px; |
|
padding: 12px 16px; |
|
margin-bottom: 12px; |
|
border-left: 3px solid var(--primary); |
|
} |
|
|
|
.ai-loading { |
|
display: flex; |
|
align-items: center; |
|
gap: 8px; |
|
color: var(--primary); |
|
} |
|
|
|
.ai-loading-dot { |
|
width: 8px; |
|
height: 8px; |
|
background: var(--primary); |
|
border-radius: 50%; |
|
animation: bounce 1.5s infinite ease-in-out; |
|
} |
|
|
|
.ai-loading-dot:nth-child(1) { |
|
animation-delay: 0s; |
|
} |
|
|
|
.ai-loading-dot:nth-child(2) { |
|
animation-delay: 0.2s; |
|
} |
|
|
|
.ai-loading-dot:nth-child(3) { |
|
animation-delay: 0.4s; |
|
} |
|
|
|
@keyframes bounce { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-5px); } |
|
} |
|
|
|
.ai-tool-input { |
|
position: relative; |
|
margin-top: 16px; |
|
} |
|
|
|
.ai-tool-input input { |
|
width: 100%; |
|
padding: 12px 16px; |
|
background: rgba(30, 30, 30, 0.7); |
|
border: 1px solid rgba(164, 255, 99, 0.2); |
|
border-radius: 8px; |
|
color: white; |
|
outline: none; |
|
} |
|
|
|
.ai-tool-input button { |
|
position: absolute; |
|
right: 8px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
background: var(--primary); |
|
color: black; |
|
border: none; |
|
border-radius: 50%; |
|
width: 32px; |
|
height: 32px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
} |
|
|
|
|
|
@media (max-width: 1024px) { |
|
.hero-ai-tool { |
|
margin-top: 40px; |
|
margin-bottom: 60px; |
|
} |
|
.ai-tool-floating-card { |
|
right: 10px; |
|
bottom: -50px; |
|
width: 90%; |
|
} |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.hero-ai-tool { |
|
margin-top: 30px; |
|
margin-bottom: 20px; |
|
} |
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
.testimonial-card { |
|
margin-bottom: 20px; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="grid-pattern"> |
|
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0"> |
|
<div class="animated-blob w-96 h-96 bg-primary -left-20 -top-20 opacity-10" style="animation-delay: 0s;"></div> |
|
<div class="animated-blob w-80 h-80 bg-purple-500 top-1/4 -right-40 opacity-10" style="animation-delay: 2s;"></div> |
|
<div class="animated-blob w-96 h-96 bg-teal-500 bottom-0 left-1/2 opacity-10" style="animation-delay: 4s;"></div> |
|
</div> |
|
|
|
|
|
<nav class="bg-black/70 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="flex justify-between h-20 items-center"> |
|
<div class="flex items-center gap-8"> |
|
<div class="flex items-center"> |
|
<img src="https://imagedelivery.net/LtCN8b7XAtToQgo5calb3g/5282c62f-e522-4507-9956-07b063b49201/website" alt="AbilityXchange Logo" class="h-10 mr-3"> |
|
<span class="text-2xl font-bold gradient-text">AbilityXchange</span> |
|
</div> |
|
<div class="hidden md:flex gap-6"> |
|
<a href="#how-it-works" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline"> |
|
<span>How It Works</span> |
|
</a> |
|
<a href="#ai-power" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline"> |
|
<span>AI Power</span> |
|
</a> |
|
<section href="#features" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline"> |
|
<span>Features</span> |
|
</section> |
|
<a href="#community" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline"> |
|
<span>Community</span> |
|
</a> |
|
<a href="#pricing" class="font-medium text-gray-300 hover:text-primary transition-colors flex items-center primary-underline"> |
|
<span>Pricing</span> |
|
</a> |
|
</div> |
|
</div> |
|
<div class="flex items-center gap-4"> |
|
<button class="hidden md:flex items-center gap-2 px-6 py-2 rounded-full font-medium text-white/80 hover:text-primary transition-colors btn-secondary"> |
|
Sign In |
|
</button> |
|
<button class="btn-primary px-6 py-3 rounded-full flex items-center gap-2 glow-box pulse"> |
|
<i class="fas fa-bolt"></i> |
|
<span>Get Started</span> |
|
</button> |
|
<button class="md:hidden text-gray-300 hover:text-primary" id="mobile-menu-button"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden bg-black/90 backdrop-blur-lg border-t border-gray-800" id="mobile-menu"> |
|
<div class="px-4 py-3 space-y-4"> |
|
<a href="#how-it-works" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900"> |
|
How It Works |
|
</a> |
|
<a href="#ai-power" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900"> |
|
AI Power |
|
</a> |
|
<a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900"> |
|
Features |
|
</a> |
|
<a href="#community" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900"> |
|
Community |
|
</a> |
|
<a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-primary hover:bg-gray-900"> |
|
Pricing |
|
</a> |
|
<div class="pt-4 border-t border-gray-800"> |
|
<button class="w-full btn-secondary px-4 py-2 rounded-md text-base font-medium"> |
|
Sign In |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section class="pt-32 pb-24 px-4 sm:px-6 lg:px-8 relative z-10"> |
|
<div class="max-w-7xl mx-auto"> |
|
<div class="flex flex-col lg:flex-row items-center gap-8 xl:gap-12"> |
|
<div class="lg:w-1/2"> |
|
<div class="bg-black/20 border border-gray-800 rounded-full px-4 py-1.5 w-max mb-6 glow-box"> |
|
<span class="text-primary text-sm font-medium">YOUR AI-POWERED SKILLS MARKETPLACE</span> |
|
</div> |
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold hero-title mb-6"> |
|
<span class="gradient-text">Trade Your Talents</span> <span class="typewriter typing">With AbilityXchange</span> |
|
</h1> |
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-xl"> |
|
Our revolutionary AI matches your unique abilities with perfect counterparts, creating fair exchanges without traditional currency. |
|
</p> |
|
<div class="flex flex-col sm:flex-row gap-4 mb-12"> |
|
<button class="btn-primary px-8 py-4 rounded-full text-lg flex items-center justify-center gap-2"> |
|
<i class="fas fa-bolt"></i> |
|
Start Trading Now |
|
</button> |
|
<button class="btn-secondary px-8 py-4 rounded-full text-lg flex items-center justify-center gap-2"> |
|
<i class="fas fa-play-circle"></i> |
|
See How It Works |
|
</button> |
|
</div> |
|
<div class="flex flex-wrap gap-6 items-center"> |
|
<div class="flex -space-x-4"> |
|
<img src="https://randomuser.me/api/portraits/women/43.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt=""> |
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt=""> |
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full border-2 border-black" alt=""> |
|
<div class="w-12 h-12 rounded-full border-2 border-black bg-gray-900 flex items-center justify-center"> |
|
<span class="text-xs font-bold text-primary">500K+</span> |
|
</div> |
|
</div> |
|
<div class="flex flex-col sm:flex-row sm:items-center gap-2"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
</div> |
|
<span class="text-sm text-gray-400">Trusted by 24K+ professionals</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="lg:w-1/2 relative hero-ai-tool"> |
|
<div class="relative floating"> |
|
<div class="gradient-box rounded-xl w-full max-w-xl mx-auto primary-border tilt-effect p-2"> |
|
|
|
<div class="ai-tool-container"> |
|
<div class="ai-tool-header flex items-center justify-between"> |
|
<div class="flex items-center gap-2"> |
|
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div> |
|
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div> |
|
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div> |
|
</div> |
|
<h3 class="text-xs font-medium text-gray-400">AbilityXchange AI</h3> |
|
<div class="w-20"></div> |
|
</div> |
|
<div class="ai-tool-content"> |
|
<div class="ai-message"> |
|
<h4 class="font-bold text-primary mb-1">🔍 Skills Analysis Complete</h4> |
|
<p class="text-sm text-gray-300">Welcome to your AbilityXchange AI assistant! Based on your profile, I've analyzed your skills and found optimal exchange opportunities.</p> |
|
</div> |
|
|
|
<div class="ai-message"> |
|
<h4 class="font-bold text-primary mb-1">🎯 Suggested Exchange</h4> |
|
<p class="text-sm text-gray-300">Your web development skills (rated 4.8/5 by peers) could be exchanged for high-quality logo design services from verified partners.</p> |
|
<div class="mt-3 flex items-center gap-2"> |
|
<span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">Time Value: 8 hrs ↔ 8 hrs</span> |
|
<span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">Demand Match: 95%</span> |
|
</div> |
|
</div> |
|
|
|
<div class="ai-message"> |
|
<h4 class="font-bold text-primary mb-1">💡 Optimization Tip</h4> |
|
<p class="text-sm text-gray-300">Adding backend development to your offer increases potential matches to 12 while maintaining fairness ratios.</p> |
|
</div> |
|
|
|
<div class="ai-loading"> |
|
<span class="text-xs">Analyzing new opportunities</span> |
|
<div class="ai-loading-dot"></div> |
|
<div class="ai-loading-dot"></div> |
|
<div class="ai-loading-dot"></div> |
|
</div> |
|
</div> |
|
<div class="ai-tool-input p-4 bg-gray-900/50"> |
|
<input type="text" placeholder="Ask AI for exchange advice..." class="w-full"> |
|
<button> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="absolute -bottom-6 -right-6 bg-gray-900 p-6 rounded-2xl shadow-2xl border border-gray-800 w-3/4 z-10 primary-border ai-tool-floating-card"> |
|
<div class="ai-chip">AI MATCH ALERT</div> |
|
<div class="flex items-center gap-2 mb-3"> |
|
<div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center text-primary border border-gray-700"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<div class="flex-1"> |
|
<div class="text-xs font-medium text-primary">PERFECT MATCH AVAILABLE</div> |
|
<h4 class="font-bold">Your Web Dev ⇄ Logo Design</h4> |
|
</div> |
|
<div class="px-2 py-1 bg-primary/10 text-primary text-xs font-bold rounded">95%</div> |
|
</div> |
|
<div class="flex justify-between items-center mt-4 text-xs"> |
|
<div class="flex items-center gap-2"> |
|
<div class="flex -space-x-2"> |
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-5 h-5 rounded-full border border-black"> |
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-5 h-5 rounded-full border border-black"> |
|
</div> |
|
<span class="text-gray-400">Verified Partners</span> |
|
</div> |
|
<button class="text-xs btn-primary rounded-full font-bold"> |
|
<i class="fas fa-exchange-alt mr-1"></i> |
|
View Match |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<div class="py-8 bg-black/30 border-y border-gray-800 relative overflow-hidden"> |
|
<div class="absolute inset-0 gradient-mask z-10"></div> |
|
<div class="scrolling-text whitespace-nowrap text-gray-500 text-sm font-medium w-max flex gap-16"> |
|
<span class="flex items-center gap-2"><i class="fas fa-check text-primary"></i> Trusted by professionals worldwide</span> |
|
<span>•</span> |
|
<span>24,000+ daily exchanges</span> |
|
<span>•</span> |
|
<span>98% satisfaction rate</span> |
|
<span>•</span> |
|
<span>5-star rated on Trustpilot</span> |
|
<span>•</span> |
|
<span>Featured in TechCrunch & Forbes</span> |
|
<span>•</span> |
|
<span>AI-powered valuation</span> |
|
<span>•</span> |
|
<span>500K+ member community</span> |
|
<span>•</span> |
|
<span>Smart contracts</span> |
|
</div> |
|
</div> |
|
|
|
|
|
<section class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900 relative overflow-hidden"> |
|
<div class="max-w-7xl mx-auto relative z-10"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
REVOLUTIONARY APPROACH |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
The Future of <span class="gradient-text">Value Exchange</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
AbilityXchange transforms how professionals leverage their skills through AI-powered matching |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card tilt-effect"> |
|
<div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6"> |
|
<i class="fas fa-money-bill-wave"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-white mb-4">Currency-Free</h3> |
|
<p class="text-gray-400"> |
|
Exchange value directly using your skills and abilities, bypassing traditional financial systems. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card tilt-effect"> |
|
<div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6"> |
|
<i class="fas fa-robot"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-white mb-4">AI-Powered Fairness</h3> |
|
<p class="text-gray-400"> |
|
Our neural network evaluates 300+ factors to ensure every exchange is perfectly balanced. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card tilt-effect"> |
|
<div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6"> |
|
<i class="fas fa-chart-line"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-white mb-4">Expand Your Network</h3> |
|
<p class="text-gray-400"> |
|
Connect with vetted professionals who truly value your unique abilities. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card tilt-effect"> |
|
<div class="w-12 h-12 rounded-full bg-primary/10 text-primary text-xl flex items-center justify-center mb-6"> |
|
<i class="fas fa-shield-alt"></i> |
|
</div> |
|
<h3 class="text-xl font-bold text-white mb-4">Blockchain Security</h3> |
|
<p class="text-gray-400"> |
|
Smart contracts ensure every exchange is completed as promised with AI mediation. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="how-it-works" class="py-24 px-4 sm:px-6 lg:px-8 relative z-10"> |
|
<div class="max-w-7xl mx-auto"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
SIMPLE EXCHANGE PROCESS |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Get Started in <span class="gradient-text">3 Steps</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Our AI-powered platform makes skill trading effortless and rewarding |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 relative"> |
|
|
|
<div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in"> |
|
<div class="flex flex-col items-center text-center"> |
|
<div class="relative mb-6"> |
|
<div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom"> |
|
1 |
|
</div> |
|
<div class="ai-chip">AI-ASSISTED</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-white mb-4">List Your Skills</h3> |
|
<p class="text-gray-300"> |
|
Describe your abilities and requirements. Our AI helps optimize your listing for ideal matches. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in" style="animation-delay: 0.2s;"> |
|
<div class="flex flex-col items-center text-center"> |
|
<div class="relative mb-6"> |
|
<div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom"> |
|
2 |
|
</div> |
|
<div class="ai-chip">AI-POWERED</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-white mb-4">Receive Matches</h3> |
|
<p class="text-gray-300"> |
|
Our neural network analyzes thousands of variables to find exchanges with perfect value alignment. |
|
</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl primary-border feature-card tilt-effect animate-fade-in" style="animation-delay: 0.4s;"> |
|
<div class="flex flex-col items-center text-center"> |
|
<div class="relative mb-6"> |
|
<div class="w-24 h-24 bg-gradient-to-br from-black to-gray-900 rounded-full flex items-center justify-center text-primary text-3xl font-bold mb-6 border border-gray-800 shadow-inner-custom"> |
|
3 |
|
</div> |
|
<div class="ai-chip">AI-PROTECTED</div> |
|
</div> |
|
<h3 class="text-2xl font-bold text-white mb-4">Exchange Securely</h3> |
|
<p class="text-gray-300"> |
|
Complete fair exchanges with confidence using blockchain contracts and AI mediation. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-16 text-center"> |
|
<button class="btn-primary px-8 py-4 rounded-full text-lg glow-box"> |
|
<i class="fas fa-play-circle mr-2"></i> |
|
Watch Exchange Demo |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="categories" class="py-24 px-4 sm:px-6 lg:px-8 bg-black/20 relative overflow-hidden"> |
|
<div class="hexagon-bg absolute inset-0 opacity-10"></div> |
|
<div class="max-w-7xl mx-auto relative z-10"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
TRENDING EXCHANGES |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Most <span class="gradient-text">Exchanged</span> Skills |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
These categories see the most successful trades on AbilityXchange |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> |
|
<div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer"> |
|
<div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors"> |
|
<i class="fas fa-paint-brush"></i> |
|
</div> |
|
<span class="font-medium text-center">Design</span> |
|
<span class="text-xs text-primary mt-1">98% match rate</span> |
|
</div> |
|
|
|
<div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer"> |
|
<div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors"> |
|
<i class="fas fa-code"></i> |
|
</div> |
|
<span class="font-medium text-center">Development</span> |
|
<span class="text-xs text-primary mt-1">96% match rate</span> |
|
</div> |
|
|
|
<div class="group aspect-square bg-gray-900/70 rounded-xl p-6 flex flex-col justify-center items-center border border-gray-8p-6 flex flex-col justify-center items-center border border-gray-800 hover:border-primary/50 transition-all cursor-pointer"> |
|
<div class="w-16 h-16 rounded-full bg-black flex items-center justify-center text-primary text-2xl mb-4 group-hover:bg-primary/10 transition-colors"> |
|
<i class="fas fa-language"></i> |
|
</div> |
|
<span class="font-medium text-center">Translation</span> |
|
<span class="text-xs text-primary mt-1">89% match rate</span> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-16 text-center"> |
|
<button class="btn-secondary px-8 py-4 rounded-full text-lg"> |
|
<i class="fas fa-search mr-2"></i> |
|
Browse All Categories |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="stories" class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900 relative"> |
|
<div class="max-w-7xl mx-auto relative z-10"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
REAL COMMUNITY STORIES |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Transforming <span class="gradient-text">Lives & Businesses</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
See how AbilityXchange members are creating value through fair exchanges |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card"> |
|
<div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div> |
|
<div class="flex items-center gap-4 mb-6"> |
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30"> |
|
<div> |
|
<h4 class="font-bold text-white">Sarah K.</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-primary text-sm">Graphic Designer</span> |
|
<span class="text-primary">•</span> |
|
<span class="text-yellow-400 text-xs"> |
|
<i class="fas fa-star"></i> |
|
4.9 |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"Traded my design services for a complete website rebuild. Saved thousands while getting exactly what my business needed!" |
|
</p> |
|
<div class="relative"> |
|
<div class="bg-black/30 rounded-lg p-4 border border-gray-700"> |
|
<div class="flex items-center gap-3"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Branding Package ⇄ Web Development</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 98%</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card"> |
|
<div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div> |
|
<div class="flex items-center gap-4 mb-6"> |
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30"> |
|
<div> |
|
<h4 class="font-bold text-white">David T.</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-primary text-sm">Photographer</span> |
|
<span class="text-primary">•</span> |
|
<span class="text-yellow-400 text-xs"> |
|
<i class="fas fa-star"></i> |
|
5.0 |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"Exchanged product photos for accounting services. The AI valuation ensured perfect fairness - both parties thrilled!" |
|
</p> |
|
<div class="relative"> |
|
<div class="bg-black/30 rounded-lg p-4 border border-gray-700"> |
|
<div class="flex items-center gap-3"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Photography ⇄ Financial Services</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 96%</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl relative overflow-hidden testimonial-card"> |
|
<div class="absolute -right-10 -top-10 w-48 h-48 rounded-full bg-primary/10 blur-2xl"></div> |
|
<div class="flex items-center gap-4 mb-6"> |
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-16 h-16 rounded-full object-cover border-2 border-primary/30"> |
|
<div> |
|
<h4 class="font-bold text-white">Maya P.</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-primary text-sm">Copywriter</span> |
|
<span class="text-primary">•</span> |
|
<span class="text-yellow-400 text-xs"> |
|
<i class="fas fa-star"></i> |
|
4.8 |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 mb-6"> |
|
"Traded website copy for 3 months of personal training. Got fit while helping a trainer boost his business!" |
|
</p> |
|
<div class="relative"> |
|
<div class="bg-black/30 rounded-lg p-4 border border-gray-700"> |
|
<div class="flex items-center gap-3"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary"> |
|
<i class="fas fa-exchange-alt"></i> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">Copywriting ⇄ Fitness Training</h4> |
|
<div class="flex items-center gap-1 mt-1"> |
|
<span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">AI Score: 95%</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="ai-power" class="py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden bg-black/20"> |
|
<div class="max-w-7xl mx-auto relative z-10"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
CUTTING-EDGE TECHNOLOGY |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Our <span class="gradient-text">AI Matching Engine</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Advanced artificial intelligence powers every exchange to ensure fairness and perfect value alignment |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
|
<div> |
|
<h3 class="text-3xl font-bold text-white mb-6">Smart Valuation Algorithm</h3> |
|
<p class="text-gray-300 mb-6"> |
|
Our proprietary neural network evaluates hundreds of factors to calculate the perfect exchange ratio: |
|
</p> |
|
<ul class="space-y-4 mb-8"> |
|
<li class="flex items-start gap-3"> |
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<span class="text-gray-300">Market demand for each skill</span> |
|
</li> |
|
<li class="flex items-start gap-3"> |
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<span class="text-gray-300">Historical exchange data</span> |
|
</li> |
|
<li class="flex items-start gap-3"> |
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<span class="text-gray-300">Time investment required</span> |
|
</li> |
|
<li class="flex items-start gap-3"> |
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<span class="text-gray-300">Complexity & specialization</span> |
|
</li> |
|
<li class="flex items-start gap-3"> |
|
<div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 mt-1"> |
|
<i class="fas fa-check text-xs"></i> |
|
</div> |
|
<span class="text-gray-300">Reputation & verification status</span> |
|
</li> |
|
</ul> |
|
<button class="btn-primary px-6 py-3 rounded-full"> |
|
Learn How Our AI Works |
|
</button> |
|
</div> |
|
<div class="gradient-box rounded-xl p-1 primary-border tilt-effect"> |
|
<div class="bg-black/20 rounded-lg p-8 aspect-video flex items-center justify-center"> |
|
<div class="text-center"> |
|
<div class="w-20 h-20 mx-auto rounded-full bg-primary/10 text-primary text-3xl flex items-center justify-center mb-6"> |
|
<i class="fas fa-brain"></i> |
|
</div> |
|
<h4 class="font-bold text-2xl text-white mb-2">AI Match Visualization</h4> |
|
<p class="text-gray-300 mb-4">See how skills connect across our network</p> |
|
<div class="flex gap-2 justify-center"> |
|
<div class="w-6 h-6 rounded-full bg-primary/20 border border-primary/40 animate-pulse" style="animation-delay: 0s;"></div> |
|
<div class="w-6 h-6 rounded-full bg-primary/30 border border-primary/50 animate-pulse" style="animation-delay: 0.2s;"></div> |
|
<div class="w-6 h-6 rounded-full bg-primary/40 border border-primary/60 animate-pulse" style="animation-delay: 0.4s;"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="features" class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900 to-black"> |
|
<div class="max-w-7xl mx-auto"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
PREMIUM FEATURES |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Why Choose <span class="gradient-text">AbilityXchange</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Powerful tools to make your skill trading experience seamless and rewarding |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8"> |
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-shield-alt"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Escrow Protection</h3> |
|
<p class="text-gray-400"> |
|
AI mediates every exchange, holding both parties accountable until all terms are met to mutual satisfaction. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-chart-network"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Smart Recommendations</h3> |
|
<p class="text-gray-400"> |
|
Our AI suggests optimal exchanges you might not have considered, expanding your opportunities. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-file-contract"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Smart Contracts</h3> |
|
<p class="text-gray-400"> |
|
Blockchain-based agreements automatically enforce terms and release exchanges when conditions are met. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-network-wired"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Multi-Skill Exchanges</h3> |
|
<p class="text-gray-400"> |
|
Combine multiple skills for more complex trades, all balanced by our AI valuation system. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-clipboard-list-check"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Milestone Tracking</h3> |
|
<p class="text-gray-400"> |
|
Break larger exchanges into manageable phases with automated progress tracking. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl feature-card"> |
|
<div class="flex items-start gap-4"> |
|
<div class="w-12 h-12 rounded-lg bg-primary/10 text-primary text-xl flex items-center justify-center flex-shrink-0"> |
|
<i class="fas fa-users"></i> |
|
</div> |
|
<div> |
|
<h3 class="text-xl font-bold text-white mb-2">Community Network</h3> |
|
<p class="text-gray-400"> |
|
Connect with like-minded professionals who value skill-based trading. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-16 text-center"> |
|
<button class="btn-secondary px-8 py-4 rounded-full text-lg"> |
|
See All Features |
|
</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="pricing" class="py-24 px-4 sm:px-6 lg:px-8 bg-black/20 relative"> |
|
<div class="max-w-7xl mx-auto relative z-10"> |
|
<div class="text-center mb-16"> |
|
<span class="inline-block px-4 py-1.5 rounded-full bg-black/30 border border-gray-800 text-primary font-medium mb-4 glow-box"> |
|
FAIR & TRANSPARENT |
|
</span> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Simple <span class="gradient-text">Pricing</span> |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
|
Choose the plan that works for you. We only succeed when you do. |
|
</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
<div class="gradient-box p-8 rounded-2xl pricing-card"> |
|
<div class="mb-6"> |
|
<h3 class="text-2xl font-bold text-white mb-1">Starter</h3> |
|
<p class="text-gray-400 text-sm">Perfect for trying out skill exchanges</p> |
|
</div> |
|
<div class="mb-6"> |
|
<span class="text-5xl font-bold text-white">$0</span> |
|
<span class="text-gray-400">/forever</span> |
|
</div> |
|
<ul class="space-y-3 mb-8"> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">5 exchanges per month</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Basic AI matching</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Community ratings</span> |
|
</li> |
|
<li class="flex items-center gap-2 opacity-50"> |
|
<i class="fas fa-times text-gray-500"></i> |
|
<span class="text-gray-500">Priority support</span> |
|
</li> |
|
</ul> |
|
<button class="w-full btn-secondary px-6 py-3 rounded-full"> |
|
Get Started |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl pricing-card relative border-2 border-primary/30"> |
|
<div class="absolute top-0 right-0 bg-primary text-black px-4 py-1 rounded-bl-lg rounded-tr-lg font-bold text-sm"> |
|
MOST POPULAR |
|
</div> |
|
<div class="mb-6"> |
|
<h3 class="text-2xl font-bold text-white mb-1">Professional</h3> |
|
<p class="text-gray-400 text-sm">For serious skill traders</p> |
|
</div> |
|
<div class="mb-6"> |
|
<span class="text-5xl font-bold text-white">$15</span> |
|
<span class="text-gray-400">/month</span> |
|
</div> |
|
<ul class="space-y-3 mb-8"> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Unlimited exchanges</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Advanced AI matching</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Priority listing</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Premium support</span> |
|
</li> |
|
</ul> |
|
<button class="w-full btn-primary px-6 py-3 rounded-full glow-box"> |
|
Go Professional |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="gradient-box p-8 rounded-2xl pricing-card"> |
|
<div class="mb-6"> |
|
<h3 class="text-2xl font-bold text-white mb-1">Enterprise</h3> |
|
<p class="text-gray-400 text-sm">For teams & organizations</p> |
|
</div> |
|
<div class="mb-6"> |
|
<span class="text-5xl font-bold text-white">$99</span> |
|
<span class="text-gray-400">/month</span> |
|
</div> |
|
<ul class="space-y-3 mb-8"> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Unlimited team members</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Custom AI matching</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Dedicated account manager</span> |
|
</li> |
|
<li class="flex items-center gap-2"> |
|
<i class="fas fa-check text-primary"></i> |
|
<span class="text-gray-300">Enterprise API access</span> |
|
</li> |
|
</ul> |
|
<button class="w-full btn-secondary px-6 py-3 rounded-full"> |
|
Contact Sales |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-black to-gray-900 relative overflow-hidden"> |
|
<div class="max-w-7xl mx-auto text-center relative z-10"> |
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6"> |
|
Ready to Transform Your <span class="gradient-text">Skills Network</span>? |
|
</h2> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10"> |
|
Join AbilityXchange today and start exchanging skills with top professionals worldwide. |
|
</p> |
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
<button class="btn-primary px-8 py-4 rounded-full text-lg"> |
|
<i class="fas fa-bolt mr-2"></i> |
|
Get Started - It's Free |
|
</button> |
|
<button class="btn-secondary px-8 py-4 rounded-full text-lg"> |
|
<i class="fas fa-comments mr-2"></i> |
|
Talk to Our Team |
|
</button> |
|
</div> |
|
<div class="mt-10 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-400"> |
|
<div class="flex items-center gap-2"> |
|
<i class="fas fa-shield-alt"></i> |
|
<span>SSL Secured</span> |
|
</div> |
|
<div class="flex items-center gap-2"> |
|
<i class="fas fa-lock"></i> |
|
<span>Data Encrypted</span> |
|
</div> |
|
<div class="flex items-center gap-2"> |
|
<i class="fas fa-user-shield"></i> |
|
<span>Privacy First</span> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-black/70 border-t border-gray-800 relative z-10"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12"> |
|
<div class="col-span-2"> |
|
<div class="flex items-center mb-6"> |
|
<img src="https://imagedelivery.net/LtCN8b7XAtToQgo5calb3g/5282c62f-e522-4507-9956-07b063b49201/website" alt="AbilityXchange Logo" class="h-10 mr-3"> |
|
<span class="text-2xl font-bold gradient-text">AbilityXchange</span> |
|
</div> |
|
<p class="text-gray-400 mb-6"> |
|
The future of fair value exchange powered by artificial intelligence. |
|
</p> |
|
<div class="flex gap-4"> |
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors"> |
|
<i class="fab fa-twitter"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors"> |
|
<i class="fab fa-linkedin"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors"> |
|
<i class="fab fa-instagram"></i> |
|
</a> |
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center text-gray-300 hover:text-primary transition-colors"> |
|
<i class="fab fa-facebook"></i> |
|
</a> |
|
</div> |
|
</div> |
|
<div> |
|
<h4 class="text-lg font-semibold text-white mb-4">Platform</h4> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">How It Works</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Features</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pricing</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Success Stories</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="text-lg font-semibold text-white mb-4">Resources</h4> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Help Center</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Community</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Webinars</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Status</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h4 class="text-lg font-semibold text-white mb-4">Company</h4> |
|
<ul class="space-y-3"> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Press</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Legal</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-gray-400"> |
|
© 2023 AbilityXchange. All rights reserved. |
|
</p> |
|
<div class="flex gap-6 mt-4 md:mt-0"> |
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Privacy Policy</a> |
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Terms of Service</a> |
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-sm">Cookie Policy</a> |
|
</div> |
|
</div> |
|
<div class="mt-6 text-center md:text-left text-xs text-gray-500"> |
|
<p>"AbilityXchange" is a registered trademark of AbilityXchange Technologies LLC.</p> |
|
<p class="mt-1">The future of fair exchange is here. Trade skills, not dollars.</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
const menu = document.getElementById('mobile-menu'); |
|
if (menu.classList.contains('hidden')) { |
|
menu.classList.remove('hidden'); |
|
menu.classList.add('block'); |
|
} else { |
|
menu.classList.remove('block'); |
|
menu.classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
let i = 0; |
|
const txt = 'With AbilityXchange'; |
|
const speed = 120; |
|
|
|
function typeWriter() { |
|
if (i < txt.length) { |
|
document.querySelector(".typewriter").textContent += txt.charAt(i); |
|
i++; |
|
setTimeout(typeWriter, speed); |
|
} else { |
|
|
|
document.querySelector(".typewriter").classList.add("typing"); |
|
} |
|
} |
|
|
|
|
|
window.addEventListener('load', function() { |
|
setTimeout(typeWriter, 1000); |
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
const sparkle = document.createElement('div'); |
|
sparkle.className = 'sparkle'; |
|
sparkle.style.left = e.clientX + 'px'; |
|
sparkle.style.top = e.clientY + 'px'; |
|
document.body.appendChild(sparkle); |
|
|
|
|
|
sparkle.animate([ |
|
{ opacity: 1, transform: 'scale(1)' }, |
|
{ opacity: 0, transform: 'scale(3)' } |
|
], { |
|
duration: 1000, |
|
easing: 'cubic-bezier(0.4, 0, 0.2, 1)', |
|
fill: 'forwards' |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
sparkle.remove(); |
|
}, 1000); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
if (target) { |
|
target.scrollIntoView({ |
|
behavior: 'smooth', |
|
block: 'start' |
|
}); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
const animateOnScroll = function() { |
|
const elements = document.querySelectorAll('.animate-fade-in'); |
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
entries.forEach(entry => { |
|
if (entry.isIntersecting) { |
|
entry.target.style.animationPlayState = 'running'; |
|
observer.unobserve(entry.target); |
|
} |
|
}); |
|
}, { threshold: 0.1 }); |
|
|
|
elements.forEach(element => { |
|
element.style.animationPlayState = 'paused'; |
|
observer.observe(element); |
|
}); |
|
} |
|
|
|
|
|
window.addEventListener('load', animateOnScroll); |
|
</script> |
|
<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=hamadali1/ax1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
