Hugging Face's logo

Spaces:
Abdalkaderdev
/
ORA
Paused

App Files Community
ORA / frontend /inspo /generated-page (1).html
Abdalkaderdev's picture
Abdalkaderdev
Initial ORA deployment
5e0532d
raw
history blame contribute delete
46.6 kB
<html lang="en" class="scroll-smooth overflow-x-hidden"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aura Financial | Future Banking</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;family=Newsreader:ital,opsz,wght@1,6..72,300;1,6..72,400&amp;display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Iconify -->
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Newsreader', 'serif'],
},
colors: {
brand: {
sky: '#38BDF8',
dark: '#050505',
panel: '#0F110E',
}
},
backgroundImage: {
'radial-glow': 'radial-gradient(circle at 70% 50%, rgba(56, 189, 248, 0.25) 0%, rgba(5, 5, 5, 0) 60%)',
},
animation: {
'beam': 'beam 3s linear infinite',
'spin-slow': 'spin 12s linear infinite',
'spin-slow-reverse': 'spin 15s linear infinite reverse',
'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
beam: {
'0%': { strokeDashoffset: '1000' },
'100%': { strokeDashoffset: '0' },
}
}
}
}
}
</script>
<style>
body {
background-color: #030303;
color: #ffffff;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.text-glow {
text-shadow: 0 0 25px rgba(56, 189, 248, 0.4);
}
.grid-bg {
background-size: 100px 200px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}
.monotone-logo {
filter: grayscale(100%) brightness(150%) contrast(0.5);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.monotone-logo:hover {
opacity: 1;
filter: grayscale(100%) brightness(200%);
}
.beam-line {
stroke-dasharray: 80 1000;
stroke-linecap: round;
}
/* Custom Keyframes for SVG Sonar */
@keyframes sonar-wave {
0% { r: 10px; opacity: 0.8; stroke-width: 1px; }
100% { r: 80px; opacity: 0; stroke-width: 0px; }
}
.animate-sonar {
animation: sonar-wave 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.delay-1000 { animation-delay: 1s; }
.delay-2000 { animation-delay: 2s; }
/* Shiny CTA Button CSS */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 20%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: #38BDF8; inherits: false; }
.shiny-cta {
--gradient-angle: 0deg;
--gradient-angle-offset: 0deg;
--gradient-percent: 20%;
--gradient-shine: #38BDF8;
--shadow-size: 2px;
position: relative;
overflow: hidden;
border-radius: 9999px;
padding: 1.25rem 2.5rem;
font-size: 1rem;
line-height: 1.2;
font-weight: 500;
color: #ffffff;
background: linear-gradient(#030303, #030303) padding-box,
conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent 0%, #0ea5e9 5%, var(--gradient-shine) 15%, #0ea5e9 30%, transparent 40%, transparent 100% ) border-box;
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px #1a1818;
outline: none;
transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;
cursor: pointer;
isolation: isolate;
outline-offset: 4px;
font-family: 'Inter', 'Helvetica Neue', sans-serif;
z-index: 0;
animation: border-spin 2.5s linear infinite;
}
@keyframes border-spin { to { --gradient-angle: 360deg; } }
.shiny-cta:active { transform: translateY(1px); }
.shiny-cta::before {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;
--size: calc(100% - 6px); --position: 2px; --space: 4px; width: var(--size); height: var(--size);
background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;
background-size: var(--space) var(--space); background-repeat: space;
mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black );
border-radius: inherit; opacity: 0.4; pointer-events: none;
}
.shiny-cta::after {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
width: 100%; aspect-ratio: 1;
background: linear-gradient(-50deg, transparent, #0ea5e9, transparent);
mask-image: radial-gradient(circle at bottom, transparent 40%, black);
opacity: 0.6; animation: shimmer 4s linear infinite; animation-play-state: running;
}
.shiny-cta span { position: relative; z-index: 2; display: inline-block; }
.shiny-cta span::before {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;
--size: calc(100% + 1rem); width: var(--size); height: var(--size);
box-shadow: inset 0 -1ex 2rem 4px #0ea5e9; opacity: 0; border-radius: inherit;
transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1); animation: breathe 4.5s linear infinite;
}
@keyframes shimmer { to { transform: translate(-50%, -50%) rotate(360deg);} }
@keyframes breathe {
0%, 100% { transform: translate(-50%, -50%) scale(1);}
50% { transform: translate(-50%, -50%) scale(1.20);}
}
/* Shared Border Gradient for Secondary Button */
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}
</style>
<meta name="disabled-font-classes" content="font-geist,font-roboto,font-montserrat,font-poppins,font-playfair,font-merriweather,font-bricolage,font-jakarta,font-manrope,font-space-grotesk,font-work-sans,font-pt-serif,font-geist-mono,font-space-mono,font-quicksand,font-nunito">
<style id="aura-editor-visibility-style">
.invisible { visibility: hidden !important; }
</style>
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&amp;display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style></head>
<body class="min-h-screen overflow-x-hidden selection:bg-brand-sky selection:text-black relative w-full">
<!-- Background (component) -->
<div class="aura-background-component top-0 w-full h-screen -z-10 fixed overflow-hidden" data-alpha-mask="80" style="mask-image: linear-gradient(transparent, black 0%, black 80%, transparent);"><div class="aura-background-component top-0 w-full -z-10 absolute h-full saturate-0">
 <div data-us-project="FixNvEwvWwbu3QX9qC3F" class="absolute w-full h-full left-0 top-0 -z-10 overflow-hidden"><div data-us-text="id-oibit0npjv07r8fdb8kfha" style="width: 5px; top: 418.405px; left: 736.273px; font-size: 10px; line-height: 65.1906px; letter-spacing: 0px; font-family: Inter; font-weight: 400; text-align: left; position: absolute; word-break: break-word; transform: rotateZ(0deg); color: transparent; z-index: 2;">.</div></div>
 <script type="text/javascript">
 !function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
 </script>
</div></div>
<!-- Background Effects -->
 <div class="fixed inset-0 grid-bg pointer-events-none z-0"></div>
<!-- Navigation: Pill Shaped & Floating -->
 <nav class="fixed -translate-x-1/2 flex transition-all duration-300 lg:w-fit z-50 w-full max-w-[90vw] ring-white/10 ring-1 rounded-full pt-1.5 pr-1.5 pb-1.5 pl-4 top-6 left-1/2 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur-xl items-center justify-between">
<!-- Logo Area -->
 <div class="flex gap-2.5 items-center mr-8">
 <span class="text-base font-medium tracking-tight text-white">Vision</span>
 </div>
<!-- Links (Hidden on small screens) -->
 <div class="hidden md:flex items-center gap-6 mr-8">
 <a href="#" class="transition-colors hover:text-white text-xs font-medium text-white/50">Changelog</a>
 <a href="#" class="transition-colors hover:text-white text-xs font-medium text-white/50">Pricing</a>
 <a href="#" class="transition-colors hover:text-white text-xs font-medium text-white/50">Contact</a>
 </div>
<!-- Action Button -->
 <button class="flex flex-none text-xs font-semibold text-black bg-white rounded-full pt-2 pr-4 pb-2 pl-4 gap-x-2 gap-y-2 items-center">Log in</button>
</nav>
<!-- Main Content -->
 <main class="container lg:px-12 lg:pt-0 min-h-[100vh] flex flex-col lg:flex-row z-10 mr-auto ml-auto pt-0 pr-6 pl-6 relative items-center justify-center overflow-x-hidden">
<!-- Left Column: Copy -->
 <div class="flex flex-col min-h-screen lg:py-0 lg:mt-0 lg:min-h-0 text-center w-full max-w-2xl mt-0 pt-10 pb-20 items-center justify-center">
 <div class="inline-flex gap-2 animate-on-scroll border rounded-full mb-6 pt-1 pr-3 pb-1 pl-3 gap-x-2 gap-y-2 items-center bg-white/5 border-white/10">
 <span class="relative flex h-2 w-2">
 <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-emerald-400"></span>
 <span class="inline-flex w-2 h-2 rounded-full relative bg-teal-400"></span>
 </span>
 <span class="text-xs font-medium text-neutral-300" style="">Public Beta Now Live</span>
 </div>
 <h2 class="md:text-6xl lg:text-7xl text-5xl text-white tracking-tight font-instrument-serif pb-4" style="">Place <span class="text-white/60 font-instrument-serif">every</span> trade with confidence and clarity.</h2>
<p class="lg:text-1xl leading-relaxed text-l text-white/70 tracking-tight font-inter max-w-xl mt-0 mb-12">
 The AI-driven tool that keeps you away from bad setups and guides you toward cleaner entries, smarter profits, and
 tighter risk.</p>
<div class="flex flex-col sm:flex-row gap-6 gap-x-6 gap-y-6 items-center justify-center">
 <button class="transition-all flex group hover:bg-white/10 hover:text-white text-sm font-medium text-slate-300 bg-white/5 rounded-full pt-2 pr-4 pb-2 pl-4 gap-x-2 gap-y-2 items-center" style="box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.15)); --border-radius-before: 9999px">
 <span class="text-sm font-medium tracking-tight">Sign up</span>
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:opacity-100 group-hover:translate-x-0.5 transition-all opacity-70 w-[16px] h-[16px]" style="width: 16px; height: 16px; color: rgb(255, 255, 255)" data-icon-replaced="true">
 <path d="M5 12h14" class=""></path>
 <path d="m12 5 7 7-7 7" class=""></path>
 </svg>
 </button>
 </div>
 </div>
<!-- Right Column: Abstract UI Visualization with Sonar -->
<section class="w-[95%] z-20 pb-8 absolute bottom-0 filter saturate-0 overflow-hidden">
 <div class="flex flex-col lg:flex-row overflow-hidden opacity-50 w-full pt-6 gap-x-6 gap-y-6 items-center justify-between">
 <style>
 @keyframes marquee {
 0% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(-50%);
 }
 }
 .animate-marquee {
 animation: marquee 40s linear infinite;
 }
 .mask-gradient-fade {
 mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 }
 </style>
<!-- Infinite Marquee Section -->
 <div class="flex-1 overflow-hidden mask-gradient-fade w-full relative">
 <div class="flex animate-marquee hover:[animation-play-state:paused] w-max gap-x-32 gap-y-16 items-center">
 <!-- Original Set -->
 <svg xmlns="http://www.w3.org/2000/svg" width="124" height="28" viewBox="0 0 512 90" style="color: rgb(255, 255, 255); width: 124px; height: 28px;" class="w-[124px] h-[28px]" aria-hidden="true" role="img" data-icon="logos:vercel" data-logos="airbrake" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <g fill="#ffffff" class="">
 <path fill-opacity=".6" d="m33.83 8.897l6.176 18.062l-10.965 31.634a78.3 78.3 0 0 0 13.112 1.02a83 83 0 0 0 9.038-.475l3.768 11.744c-4.066.411-8.5.709-12.75.709a122 122 0 0 1-16.88-1.219l-6.254 18.332H0L29.835 8.897z">
 </path>
 <path d="M481.258 26.959c19.21 0 30.742 8.96 30.742 31.57c0 2.833-.078 5.907-.15 6.311h-44.227c-.078 9.102 7.664 13.076 19.741 13.076c8.132 0 14.613-1.898 18.983-3.188l.708 11.815c-3.62 1.353-11.453 3.322-22.149 3.322c-21.2.029-35.671-7.777-35.671-31.407c0-15.271 6.028-25.457 18.232-29.537v24.791h26.527c.07-11-4.144-15.753-13.26-15.753c-4.25 0-7.388 1.02-9.57 3.195V27.908a50.7 50.7 0 0 1 10.094-.95M201.561 2.309v56.22c0 12.042 2.487 19.415 13.26 19.415s14.089-7.402 14.089-19.415s-3.315-19.422-14.089-19.422c-4.519 0-7.536 1.289-9.57 3.669v-11.95c3.464-2.174 8.14-3.598 14.543-3.598c16.277 0 26.895 9.3 26.895 31.23c0 21.958-10.625 31.167-27.044 31.167c-10.172 0-16.05-3.542-19.366-8.082l-.828 7.132h-15.442V13.99h-7.841V2.31zm131.161 25.11c10.32 0 16.2 3.599 19.437 8.146l.906-7.473h15.371l.021 60.583h-17.56V58.53c0-12.042-2.485-19.422-13.259-19.422s-14.089 7.402-14.089 19.422s3.315 19.387 14.089 19.387c4.526 0 7.537-1.29 9.57-3.662V86.07c-3.464 2.167-8.21 3.541-14.542 3.541c-16.42 0-26.917-9.165-26.917-31.095s10.476-31.096 26.973-31.096M55.306 8.897l29.835 79.778H65.173l-27.2-79.778zm57.318 19.21V76.98h7.083v11.694H95.093V39.801h-7.834V28.106zm57.247-1.084a24.4 24.4 0 0 1 5.015.474l-.227 13.855c-1.417-.142-3.315-.276-4.958-.276c-5.2 0-8.89 1.225-11.454 3.124c-5.669 4.193-5.871 11.983-5.879 16.243v28.232H134.88V39.801h-7.842V28.106h23.283l1.133 9.712c3.167-6.177 9.039-10.795 18.417-10.795m127.003 0a24.4 24.4 0 0 1 5.05.474l-.227 13.855c-1.416-.142-3.314-.276-4.958-.276c-5.199 0-8.89 1.225-11.453 3.124c-5.663 4.193-5.865 11.983-5.872 16.243v28.232h-17.496V39.801h-7.841V28.106h23.282l1.134 9.712c3.166-6.177 9.038-10.795 18.38-10.795M402.59 2.309v86.366h-17.55V13.99h-7.834V2.31zm42.288 25.77l-21.491 28.275l24.19 32.321h-20.57l-23.134-32.009l21.171-28.588zM103.076 0c5.425 0 9.42 3.542 9.42 8.422s-3.995 8.415-9.42 8.415c-5.426 0-9.414-3.528-9.414-8.415h-.021C93.662 3.542 97.65 0 103.076 0" class="">
 </path>
 </g>
 </svg><svg xmlns="http://www.w3.org/2000/svg" width="124" height="28" viewBox="0 0 512 107" style="color: rgb(255, 255, 255); width: 124px; height: 28px" class="w-[124px] h-[28px]" aria-hidden="true" role="img" data-icon="logos:vercel" data-logos="amplitude" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <path fill="#ffffff" d="M53.346 0c29.459 0 53.347 23.888 53.347 53.346c0 29.459-23.888 53.347-53.347 53.347C23.888 106.693 0 82.826 0 53.346S23.888 0 53.346 0M276.31 38.135c10.54-.021 18.982 8.677 18.982 19.925c0 11.098-8.463 19.86-18.982 19.86c-4.306 0-7.906-1.114-10.862-3.02v20.652H254.35V38.928h11.098v2.228c2.956-1.907 6.534-3.02 10.862-3.02M46.298 16.304c-6.577.021-12.533 10.605-17.654 31.43c-3.258-.04-6.274-.095-9.11-.137l-.938-.014h-.471c-.386-.021-.771 0-1.157.043a3.7 3.7 0 0 0-3.02 3.642a3.73 3.73 0 0 0 2.958 3.63l.19.034l.043.043h9.834a240 240 0 0 0-2.123 10.76l-.255 1.494l-.3 1.736v.085c0 .836.429 1.607 1.136 2.057a2.457 2.457 0 0 0 3.29-.612l.095-.138l.064.065l4.82-15.447h23.224c1.778 6.727 3.621 13.647 6.063 20.16c1.284 3.43 4.243 11.35 9.182 11.666l.266.01h.065c6.142 0 9.372-7.737 11.461-15.147l.184-.663c.514-1.873.957-3.71 1.36-5.378c.412-1.67.752-3.123 1.086-4.245l.092-.297l.15-.472l.035-.125a1.21 1.21 0 0 0-.785-1.396c-.58-.2-1.235.067-1.494.626l-.049.124l-.171.471c-.581 1.631-1.13 3.164-1.63 4.57l-.213.594l-.043.128c-3.372 9.507-4.92 13.932-7.887 14.072l-.147.004h-.192c-3.921 0-7.585-15.897-8.977-21.874c-.197-.857-.378-1.67-.557-2.4l-.107-.428h25.28c.375 0 .75-.075 1.1-.223l.207-.099l.028-.021l.037-.022l.042-.021l.129-.086l.064-.043q.065-.04.129-.092l.064-.057l.166-.143c.426-.398.729-.933.862-1.486c.31-1.465-.613-2.91-2.04-3.282l-.166-.038h-.129c-.1-.015-.19-.03-.284-.037l-.144-.006l-.386-.043c-8.247-.593-16.713-.858-24.757-1.03l-2.002-.041l-.021-.065q-.502-1.892-1.024-3.777l-.263-.94l-.132-.47l-.267-.935l-.257-.89c-3.841-13.175-8.538-24.824-14.554-24.824M492.93 37.707c10.926 0 19.067 7.734 19.067 19.539c0 1.22-.064 2.42-.257 3.62h-28.15c.878 4.478 3.835 7.97 9.898 7.97c3.106 0 5.27-.964 6.47-2.87h11.569c-2.078 7.348-9.255 12.361-18.275 12.361c-12.298 0-20.589-8.848-20.589-20.267c0-11.805 8.227-20.353 20.268-20.353M360.57 25.259v13.647h13.798v9.341H360.57V61.81c0 4.306 2.636 6.299 6.706 6.299c2.078 0 4.306-.472 6.47-1.029l1.414 9.491c-4.627 1.436-6.705 1.757-10.283 1.757c-9.256 0-15.319-6.534-15.319-16.432V48.247h-8.055v-9.34h8.055V25.258zM392 38.906v20.032c0 6.063 3.042 9.341 8.227 9.341c2.785 0 5.827-1.671 8.377-4.777V38.928H419.7l-.021 38.2h-11.098v-2.722c-3.106 2.464-6.62 3.9-10.926 3.9c-10.048 0-16.754-7.263-16.754-18.34v-21.06zm74.75-18.424v56.645h-11.1V74.9c-2.956 1.907-6.534 3.021-10.84 3.021c-10.541 0-19.068-8.698-19.068-19.946c0-11.098 8.527-19.86 19.068-19.86c4.306 0 7.905 1.114 10.84 3.02V20.483zM334.86 38.928v38.22h-11.097v-38.22zM154.02 22.58l23.288 54.568h-12.212l-4.22-10.455H136.3l-4.22 10.455h-12.276l23.373-54.568zm75.885 15.147c9.32 0 16.646 7.263 16.646 18.425v20.974h-11.097v-20.03c0-6.063-2.957-9.341-8.142-9.341c-2.313 0-4.863 1.05-7.177 4.22c.193 1.371.3 2.764.322 4.157v20.974H209.38V57.074c0-6.063-2.956-9.34-8.205-9.34c-2.164 0-4.542 1.285-6.792 4.306v25.045h-11.097V38.928h11.097v2.314c2.4-2.228 4.95-3.514 9.427-3.514c4.863 0 9.17 1.907 12.212 5.42c4.07-3.749 7.905-5.42 13.883-5.42m82.719-17.246v56.645h-11.098V20.482zm134.009 27.037c-5.828 0-9.898 4.863-9.898 10.455c0 5.656 4.07 10.605 9.898 10.605c3.278.022 6.556-1.093 9.02-4.456V51.91c-2.464-3.278-5.742-4.392-9.02-4.392m-172.166-.064c-3.278 0-6.534 1.114-9.02 4.477v12.212c2.486 3.278 5.742 4.392 9.02 4.392c5.763-.021 9.898-4.885 9.898-10.476c0-5.656-4.156-10.605-9.898-10.605M148.513 36.357l-7.97 19.86h16.111zm344.48 10.54c-5.334 0-8.29 3.107-9.34 7.414h17.31c-.642-4.778-3.513-7.413-7.97-7.413M46.02 23.396c.365 0 .707.215 1.007.6c.729 1.157 2.014 3.75 3.92 9.491c1.308 3.942 2.722 8.848 4.221 14.547c-4.749-.071-9.527-.128-14.212-.182l-2.798-.032l-2.828-.021c3.192-12.47 7.07-21.917 9.92-24.146c.235-.15.492-.257.77-.257m283.272-4.499c3.664 0 6.62 2.785 6.62 6.535c0 3.663-2.956 6.384-6.62 6.384c-3.75 0-6.706-2.7-6.706-6.384c0-3.75 2.957-6.535 6.706-6.535" class="">
 </path>
 </svg>
 <svg xmlns="http://www.w3.org/2000/svg" width="96" height="30" viewBox="0 0 512 58" style="color: rgb(255, 255, 255); width: 96px; height: 30px;" class="w-[96px] h-[30px]" aria-hidden="true" role="img" data-icon="logos:airbnb" data-logos="anthropic" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <path fill="#ffffff" d="M499.297 37.878c-2.064 5.4-6.192 8.497-11.829 8.497c-9.368 0-15.084-6.67-15.084-17.55c0-11.037 5.716-17.708 15.084-17.708c5.637 0 9.765 3.097 11.83 8.497h12.623C508.824 7.703 499.536 0 487.468 0c-16.037 0-27.39 11.911-27.39 28.825c0 16.755 11.353 28.667 27.39 28.667c12.147 0 21.436-7.782 24.532-19.614zM423.39.97l22.163 55.588h12.153L435.544.97zm-25.634 24.697h-14.695V11.69h14.695c5.878 0 8.976 2.382 8.976 6.988s-3.098 6.988-8.976 6.988M398.312.97h-27.167v55.588h11.916v-20.17h15.251c12.63 0 20.336-6.671 20.336-17.71c0-11.037-7.705-17.708-20.336-17.708m-65.535 45.405c-9.367 0-15.083-6.67-15.083-17.55c0-11.037 5.716-17.708 15.083-17.708c9.288 0 14.924 6.67 14.924 17.708c0 10.88-5.636 17.55-14.924 17.55m0-46.375c-16.036 0-27.388 11.911-27.388 28.825c0 16.755 11.352 28.667 27.388 28.667c15.956 0 27.23-11.912 27.23-28.667C360.006 11.911 348.732 0 332.776 0m-72.068 11.69h14.691c5.877 0 8.974 2.145 8.974 6.195s-3.097 6.194-8.974 6.194h-14.691zm35.577 6.195c0-10.483-7.703-16.915-20.33-16.915h-27.16v55.588h11.913V34.799h13.261l11.913 21.759h13.183l-13.19-23.416c6.62-2.545 10.41-7.905 10.41-15.257m-74.095 5.241h-26.2V.97h-11.909v55.588h11.91V33.846h26.2v22.712h11.908V.97H222.19zM125.296 11.69h18.659v44.868h11.91V11.69h18.658V.97h-49.227zm-21.034 28.191L79.253.971H65.756v55.587h11.512V17.646l25.01 38.912h13.496V.97h-11.512zM20.93 34.56l7.582-19.534l7.583 19.535zM22.158.97L0 56.558h12.39l4.532-11.674h23.182l4.53 11.674h12.39L34.867.97z" class=""></path>
 </svg>
<!-- Duplicated Set for Loop -->
 <svg xmlns="http://www.w3.org/2000/svg" width="124" height="28" viewBox="0 0 512 90" style="color: rgb(255, 255, 255); width: 124px; height: 28px;" class="w-[124px] h-[28px]" aria-hidden="true" role="img" data-icon="logos:vercel" data-logos="airbrake" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <g fill="#ffffff" class="">
 <path fill-opacity=".6" d="m33.83 8.897l6.176 18.062l-10.965 31.634a78.3 78.3 0 0 0 13.112 1.02a83 83 0 0 0 9.038-.475l3.768 11.744c-4.066.411-8.5.709-12.75.709a122 122 0 0 1-16.88-1.219l-6.254 18.332H0L29.835 8.897z">
 </path>
 <path d="M481.258 26.959c19.21 0 30.742 8.96 30.742 31.57c0 2.833-.078 5.907-.15 6.311h-44.227c-.078 9.102 7.664 13.076 19.741 13.076c8.132 0 14.613-1.898 18.983-3.188l.708 11.815c-3.62 1.353-11.453 3.322-22.149 3.322c-21.2.029-35.671-7.777-35.671-31.407c0-15.271 6.028-25.457 18.232-29.537v24.791h26.527c.07-11-4.144-15.753-13.26-15.753c-4.25 0-7.388 1.02-9.57 3.195V27.908a50.7 50.7 0 0 1 10.094-.95M201.561 2.309v56.22c0 12.042 2.487 19.415 13.26 19.415s14.089-7.402 14.089-19.415s-3.315-19.422-14.089-19.422c-4.519 0-7.536 1.289-9.57 3.669v-11.95c3.464-2.174 8.14-3.598 14.543-3.598c16.277 0 26.895 9.3 26.895 31.23c0 21.958-10.625 31.167-27.044 31.167c-10.172 0-16.05-3.542-19.366-8.082l-.828 7.132h-15.442V13.99h-7.841V2.31zm131.161 25.11c10.32 0 16.2 3.599 19.437 8.146l.906-7.473h15.371l.021 60.583h-17.56V58.53c0-12.042-2.485-19.422-13.259-19.422s-14.089 7.402-14.089 19.422s3.315 19.387 14.089 19.387c4.526 0 7.537-1.29 9.57-3.662V86.07c-3.464 2.167-8.21 3.541-14.542 3.541c-16.42 0-26.917-9.165-26.917-31.095s10.476-31.096 26.973-31.096M55.306 8.897l29.835 79.778H65.173l-27.2-79.778zm57.318 19.21V76.98h7.083v11.694H95.093V39.801h-7.834V28.106zm57.247-1.084a24.4 24.4 0 0 1 5.015.474l-.227 13.855c-1.417-.142-3.315-.276-4.958-.276c-5.2 0-8.89 1.225-11.454 3.124c-5.669 4.193-5.871 11.983-5.879 16.243v28.232H134.88V39.801h-7.842V28.106h23.283l1.133 9.712c3.167-6.177 9.039-10.795 18.417-10.795m127.003 0a24.4 24.4 0 0 1 5.05.474l-.227 13.855c-1.416-.142-3.314-.276-4.958-.276c-5.199 0-8.89 1.225-11.453 3.124c-5.663 4.193-5.865 11.983-5.872 16.243v28.232h-17.496V39.801h-7.841V28.106h23.282l1.134 9.712c3.166-6.177 9.038-10.795 18.38-10.795M402.59 2.309v86.366h-17.55V13.99h-7.834V2.31zm42.288 25.77l-21.491 28.275l24.19 32.321h-20.57l-23.134-32.009l21.171-28.588zM103.076 0c5.425 0 9.42 3.542 9.42 8.422s-3.995 8.415-9.42 8.415c-5.426 0-9.414-3.528-9.414-8.415h-.021C93.662 3.542 97.65 0 103.076 0" class="">
 </path>
 </g>
 </svg><svg xmlns="http://www.w3.org/2000/svg" width="124" height="28" viewBox="0 0 512 107" style="color: rgb(255, 255, 255); width: 124px; height: 28px" class="w-[124px] h-[28px]" aria-hidden="true" role="img" data-icon="logos:vercel" data-logos="amplitude" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <path fill="#ffffff" d="M53.346 0c29.459 0 53.347 23.888 53.347 53.346c0 29.459-23.888 53.347-53.347 53.347C23.888 106.693 0 82.826 0 53.346S23.888 0 53.346 0M276.31 38.135c10.54-.021 18.982 8.677 18.982 19.925c0 11.098-8.463 19.86-18.982 19.86c-4.306 0-7.906-1.114-10.862-3.02v20.652H254.35V38.928h11.098v2.228c2.956-1.907 6.534-3.02 10.862-3.02M46.298 16.304c-6.577.021-12.533 10.605-17.654 31.43c-3.258-.04-6.274-.095-9.11-.137l-.938-.014h-.471c-.386-.021-.771 0-1.157.043a3.7 3.7 0 0 0-3.02 3.642a3.73 3.73 0 0 0 2.958 3.63l.19.034l.043.043h9.834a240 240 0 0 0-2.123 10.76l-.255 1.494l-.3 1.736v.085c0 .836.429 1.607 1.136 2.057a2.457 2.457 0 0 0 3.29-.612l.095-.138l.064.065l4.82-15.447h23.224c1.778 6.727 3.621 13.647 6.063 20.16c1.284 3.43 4.243 11.35 9.182 11.666l.266.01h.065c6.142 0 9.372-7.737 11.461-15.147l.184-.663c.514-1.873.957-3.71 1.36-5.378c.412-1.67.752-3.123 1.086-4.245l.092-.297l.15-.472l.035-.125a1.21 1.21 0 0 0-.785-1.396c-.58-.2-1.235.067-1.494.626l-.049.124l-.171.471c-.581 1.631-1.13 3.164-1.63 4.57l-.213.594l-.043.128c-3.372 9.507-4.92 13.932-7.887 14.072l-.147.004h-.192c-3.921 0-7.585-15.897-8.977-21.874c-.197-.857-.378-1.67-.557-2.4l-.107-.428h25.28c.375 0 .75-.075 1.1-.223l.207-.099l.028-.021l.037-.022l.042-.021l.129-.086l.064-.043q.065-.04.129-.092l.064-.057l.166-.143c.426-.398.729-.933.862-1.486c.31-1.465-.613-2.91-2.04-3.282l-.166-.038h-.129c-.1-.015-.19-.03-.284-.037l-.144-.006l-.386-.043c-8.247-.593-16.713-.858-24.757-1.03l-2.002-.041l-.021-.065q-.502-1.892-1.024-3.777l-.263-.94l-.132-.47l-.267-.935l-.257-.89c-3.841-13.175-8.538-24.824-14.554-24.824M492.93 37.707c10.926 0 19.067 7.734 19.067 19.539c0 1.22-.064 2.42-.257 3.62h-28.15c.878 4.478 3.835 7.97 9.898 7.97c3.106 0 5.27-.964 6.47-2.87h11.569c-2.078 7.348-9.255 12.361-18.275 12.361c-12.298 0-20.589-8.848-20.589-20.267c0-11.805 8.227-20.353 20.268-20.353M360.57 25.259v13.647h13.798v9.341H360.57V61.81c0 4.306 2.636 6.299 6.706 6.299c2.078 0 4.306-.472 6.47-1.029l1.414 9.491c-4.627 1.436-6.705 1.757-10.283 1.757c-9.256 0-15.319-6.534-15.319-16.432V48.247h-8.055v-9.34h8.055V25.258zM392 38.906v20.032c0 6.063 3.042 9.341 8.227 9.341c2.785 0 5.827-1.671 8.377-4.777V38.928H419.7l-.021 38.2h-11.098v-2.722c-3.106 2.464-6.62 3.9-10.926 3.9c-10.048 0-16.754-7.263-16.754-18.34v-21.06zm74.75-18.424v56.645h-11.1V74.9c-2.956 1.907-6.534 3.021-10.84 3.021c-10.541 0-19.068-8.698-19.068-19.946c0-11.098 8.527-19.86 19.068-19.86c4.306 0 7.905 1.114 10.84 3.02V20.483zM334.86 38.928v38.22h-11.097v-38.22zM154.02 22.58l23.288 54.568h-12.212l-4.22-10.455H136.3l-4.22 10.455h-12.276l23.373-54.568zm75.885 15.147c9.32 0 16.646 7.263 16.646 18.425v20.974h-11.097v-20.03c0-6.063-2.957-9.341-8.142-9.341c-2.313 0-4.863 1.05-7.177 4.22c.193 1.371.3 2.764.322 4.157v20.974H209.38V57.074c0-6.063-2.956-9.34-8.205-9.34c-2.164 0-4.542 1.285-6.792 4.306v25.045h-11.097V38.928h11.097v2.314c2.4-2.228 4.95-3.514 9.427-3.514c4.863 0 9.17 1.907 12.212 5.42c4.07-3.749 7.905-5.42 13.883-5.42m82.719-17.246v56.645h-11.098V20.482zm134.009 27.037c-5.828 0-9.898 4.863-9.898 10.455c0 5.656 4.07 10.605 9.898 10.605c3.278.022 6.556-1.093 9.02-4.456V51.91c-2.464-3.278-5.742-4.392-9.02-4.392m-172.166-.064c-3.278 0-6.534 1.114-9.02 4.477v12.212c2.486 3.278 5.742 4.392 9.02 4.392c5.763-.021 9.898-4.885 9.898-10.476c0-5.656-4.156-10.605-9.898-10.605M148.513 36.357l-7.97 19.86h16.111zm344.48 10.54c-5.334 0-8.29 3.107-9.34 7.414h17.31c-.642-4.778-3.513-7.413-7.97-7.413M46.02 23.396c.365 0 .707.215 1.007.6c.729 1.157 2.014 3.75 3.92 9.491c1.308 3.942 2.722 8.848 4.221 14.547c-4.749-.071-9.527-.128-14.212-.182l-2.798-.032l-2.828-.021c3.192-12.47 7.07-21.917 9.92-24.146c.235-.15.492-.257.77-.257m283.272-4.499c3.664 0 6.62 2.785 6.62 6.535c0 3.663-2.956 6.384-6.62 6.384c-3.75 0-6.706-2.7-6.706-6.384c0-3.75 2.957-6.535 6.706-6.535" class="">
 </path>
 </svg>
 <svg xmlns="http://www.w3.org/2000/svg" width="96" height="30" viewBox="0 0 512 58" style="color: rgb(255, 255, 255); width: 96px; height: 30px;" class="w-[96px] h-[30px]" aria-hidden="true" role="img" data-icon="logos:airbnb" data-logos="anthropic" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
 <path fill="#ffffff" d="M499.297 37.878c-2.064 5.4-6.192 8.497-11.829 8.497c-9.368 0-15.084-6.67-15.084-17.55c0-11.037 5.716-17.708 15.084-17.708c5.637 0 9.765 3.097 11.83 8.497h12.623C508.824 7.703 499.536 0 487.468 0c-16.037 0-27.39 11.911-27.39 28.825c0 16.755 11.353 28.667 27.39 28.667c12.147 0 21.436-7.782 24.532-19.614zM423.39.97l22.163 55.588h12.153L435.544.97zm-25.634 24.697h-14.695V11.69h14.695c5.878 0 8.976 2.382 8.976 6.988s-3.098 6.988-8.976 6.988M398.312.97h-27.167v55.588h11.916v-20.17h15.251c12.63 0 20.336-6.671 20.336-17.71c0-11.037-7.705-17.708-20.336-17.708m-65.535 45.405c-9.367 0-15.083-6.67-15.083-17.55c0-11.037 5.716-17.708 15.083-17.708c9.288 0 14.924 6.67 14.924 17.708c0 10.88-5.636 17.55-14.924 17.55m0-46.375c-16.036 0-27.388 11.911-27.388 28.825c0 16.755 11.352 28.667 27.388 28.667c15.956 0 27.23-11.912 27.23-28.667C360.006 11.911 348.732 0 332.776 0m-72.068 11.69h14.691c5.877 0 8.974 2.145 8.974 6.195s-3.097 6.194-8.974 6.194h-14.691zm35.577 6.195c0-10.483-7.703-16.915-20.33-16.915h-27.16v55.588h11.913V34.799h13.261l11.913 21.759h13.183l-13.19-23.416c6.62-2.545 10.41-7.905 10.41-15.257m-74.095 5.241h-26.2V.97h-11.909v55.588h11.91V33.846h26.2v22.712h11.908V.97H222.19zM125.296 11.69h18.659v44.868h11.91V11.69h18.658V.97h-49.227zm-21.034 28.191L79.253.971H65.756v55.587h11.512V17.646l25.01 38.912h13.496V.97h-11.512zM20.93 34.56l7.582-19.534l7.583 19.535zM22.158.97L0 56.558h12.39l4.532-11.674h23.182l4.53 11.674h12.39L34.867.97z" class=""></path>
 </svg>
 </div>
 </div>
<!-- Trusted By Label -->
 <div class="flex items-center gap-3 text-xs font-mono shrink-0 relative z-10 bg-[#030303] pl-4 lg:bg-transparent lg:pl-0 text-white/30">
</div>
 </div>
 </section>
</main>
<!-- Footer / Logos -->
 <footer class="lg:px-12 flex flex-col z-10 overflow-hidden bg-[#030303] w-full border-t pt-12 pr-6 pb-12 pl-6 relative items-center border-white/5">
<!-- Background Grid -->
 <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:100px_200px] [mask-image:linear-gradient(to_bottom,transparent,black_20%)] pointer-events-none">
 </div>
<div class="w-full max-w-7xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8 relative z-10">
<!-- Brand Column -->
 <div class="lg:col-span-3 flex flex-col gap-8">
 <div class="flex items-center gap-3">
 <span class="text-2xl tracking-tight font-instrument-inter text-white" style="">Vision</span>
 </div>
 <p class="text-sm leading-relaxed max-w-[280px] font-light text-white/40" style="">
 Engineering the bedrock of the programmable economy. Secure, scalable, and instant.
 </p>
 <!-- Monotone Socials -->
 <div class="flex gap-5 mt-4">
 <a href="#" class="transition-colors text-white/30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="ri:twitter-x-fill">
 <path fill="currentColor" d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z">
 </path>
 </svg></a>
 <a href="#" class="transition-colors text-white/30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="ri:github-fill">
 <path fill="currentColor" d="M12.001 2c-5.525 0-10 4.475-10 10a9.99 9.99 0 0 0 6.837 9.488c.5.087.688-.213.688-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.337 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.687c-.1-.25-.45-1.275.1-2.65c0 0 .837-.263 2.75 1.024a9.3 9.3 0 0 1 2.5-.337c.85 0 1.7.112 2.5.337c1.913-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.02 10.02 0 0 0 22 12c0-5.525-4.475-10-10-10">
 </path>
 </svg></a>
 <a href="#" class="transition-colors text-white/30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="ri:linkedin-fill">
 <path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z">
 </path>
 </svg></a>
 <a href="#" class="transition-colors text-white/30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="ri:discord-fill">
 <path fill="currentColor" d="M19.303 5.337A17.3 17.3 0 0 0 14.963 4c-.191.329-.403.775-.552 1.125a16.6 16.6 0 0 0-4.808 0C9.454 4.775 9.23 4.329 9.05 4a17 17 0 0 0-4.342 1.337C1.961 9.391 1.218 13.35 1.59 17.255a17.7 17.7 0 0 0 5.318 2.664a13 13 0 0 0 1.136-1.836c-.627-.234-1.22-.52-1.794-.86c.149-.106.297-.223.435-.34c3.46 1.582 7.207 1.582 10.624 0c.149.117.287.234.435.34c-.573.34-1.167.626-1.793.86a13 13 0 0 0 1.135 1.836a17.6 17.6 0 0 0 5.318-2.664c.457-4.52-.722-8.448-3.1-11.918M8.52 14.846c-1.04 0-1.889-.945-1.889-2.101s.828-2.102 1.89-2.102c1.05 0 1.91.945 1.888 2.102c0 1.156-.838 2.1-1.889 2.1m6.974 0c-1.04 0-1.89-.945-1.89-2.101s.828-2.102 1.89-2.102c1.05 0 1.91.945 1.889 2.102c0 1.156-.828 2.1-1.89 2.1">
 </path>
 </svg></a>
 </div>
 </div>
<!-- Navigation Links -->
 <div class="lg:col-span-2 flex flex-col gap-6 pt-2">
 <h4 class="font-medium text-sm tracking-wide text-white" style="">Protocol</h4>
 <ul class="flex flex-col gap-3.5">
 <li class=""><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Documentation</a>
 </li>
 <li><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">API
 Reference</a></li>
 <li><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Governance</a>
 </li>
 <li><a href="#" class="flex items-center gap-2 hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">
 System Status
 <span class="relative flex h-1.5 w-1.5">
 <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-emerald-400"></span>
 <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
 </span>
 </a></li>
 </ul>
 </div>
<div class="lg:col-span-2 flex flex-col gap-6 pt-2">
 <h4 class="font-medium text-sm tracking-wide text-white" style="">Company</h4>
 <ul class="flex flex-col gap-3.5">
 <li class=""><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Philosophy</a>
 </li>
 <li><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Careers</a></li>
 <li><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Press
 Kit</a></li>
 <li><a href="#" class="hover:text-brand-sky text-sm transition-colors font-light text-white/40" style="">Legal</a></li>
 </ul>
 </div>
<!-- Large Action Buttons -->
 <div class="lg:col-span-5 flex flex-col sm:flex-row lg:flex-row gap-4 lg:gap-4 mt-8 lg:mt-0">
 <!-- Contact Sales -->
 <a href="#" class="flex-1 group relative p-7 rounded-2xl border bg-white/[0.02] hover:bg-white/[0.05] transition-all duration-300 flex flex-col justify-between h-36 lg:h-40 overflow-hidden border-white/10 hover:border-white/20">
 <div class="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
 </div>
<div class="flex justify-between items-start relative z-10">
 <span class="font-medium text-sm tracking-wide text-white" style="">Contact Sales</span>
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class="iconify group-hover:text-white group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 iconify--solar text-white/20">
 <path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd"></path>
 <path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5"></path>
 </svg>
 </div>
 <div class="relative z-10 flex items-end justify-between">
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:wallet-money-bold-duotone" class="iconify text-brand-sky/60 w-8 h-8 group-hover:scale-110 transition-transform duration-300 iconify--solar">
 <path fill="currentColor" d="M4.892 9.614c0-.402.323-.728.722-.728H9.47c.4 0 .723.326.723.728a.726.726 0 0 1-.723.729H5.614a.726.726 0 0 1-.722-.729">
 </path>
 <path fill="currentColor" fill-rule="evenodd" d="M21.188 10.004q-.094-.005-.2-.004h-2.773C15.944 10 14 11.736 14 14s1.944 4 4.215 4h2.773q.106.001.2-.004c.923-.056 1.739-.757 1.808-1.737c.004-.064.004-.133.004-.197v-4.124c0-.064 0-.133-.004-.197c-.069-.98-.885-1.68-1.808-1.737m-3.217 5.063c.584 0 1.058-.478 1.058-1.067c0-.59-.474-1.067-1.058-1.067s-1.06.478-1.06 1.067c0 .59.475 1.067 1.06 1.067" clip-rule="evenodd"></path>
 <path fill="currentColor" d="M21.14 10.002c0-1.181-.044-2.448-.798-3.355a4 4 0 0 0-.233-.256c-.749-.748-1.698-1.08-2.87-1.238C16.099 5 14.644 5 12.806 5h-2.112C8.856 5 7.4 5 6.26 5.153c-1.172.158-2.121.49-2.87 1.238c-.748.749-1.08 1.698-1.238 2.87C2 10.401 2 11.856 2 13.694v.112c0 1.838 0 3.294.153 4.433c.158 1.172.49 2.121 1.238 2.87c.749.748 1.698 1.08 2.87 1.238c1.14.153 2.595.153 4.433.153h2.112c1.838 0 3.294 0 4.433-.153c1.172-.158 2.121-.49 2.87-1.238q.305-.308.526-.66c.45-.72.504-1.602.504-2.45l-.15.001h-2.774C15.944 18 14 16.264 14 14s1.944-4 4.215-4h2.773q.079 0 .151.002" opacity=".5"></path>
 <path fill="currentColor" d="M10.101 2.572L8 3.992l-1.733 1.16C7.405 5 8.859 5 10.694 5h2.112c1.838 0 3.294 0 4.433.153q.344.045.662.114L16 4l-2.113-1.428a3.42 3.42 0 0 0-3.786 0">
 </path>
 </svg>
 </div>
 </a>
<!-- Help Center -->
 <a href="#" class="flex-1 group relative p-7 rounded-2xl border bg-white/[0.02] hover:bg-white/[0.05] transition-all duration-300 flex flex-col justify-between h-36 lg:h-40 overflow-hidden border-white/10 hover:border-white/20">
 <div class="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
 </div>
<div class="flex justify-between items-start relative z-10">
 <span class="font-medium text-sm tracking-wide text-white" style="">Help Center</span>
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-bold-duotone" class="iconify group-hover:text-white group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-300 iconify--solar text-white/20">
 <path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd"></path>
 <path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5"></path>
 </svg>
 </div>
 <div class="relative z-10 flex items-end justify-between">
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:headphones-round-sound-bold-duotone" class="iconify text-brand-sky/60 w-8 h-8 group-hover:scale-110 transition-transform duration-300 iconify--solar">
 <path fill="currentColor" d="M2 12.124C2 6.533 6.477 2 12 2s10 4.533 10 10.124v5.243c0 .817 0 1.378-.143 1.87a3.52 3.52 0 0 1-1.847 2.188c-.458.22-1.004.307-1.801.434l-.13.02a13 13 0 0 1-.727.105c-.209.02-.422.027-.64-.016a2.1 2.1 0 0 1-1.561-1.35a2.2 2.2 0 0 1-.116-.639c-.012-.204-.012-.452-.012-.742v-4.173c0-.425 0-.791.097-1.105a2.1 2.1 0 0 1 1.528-1.43c.316-.073.677-.044 1.096-.01l.093.007l.11.01c.783.062 1.32.104 1.775.275q.481.181.883.487v-1.174c0-4.811-3.853-8.711-8.605-8.711s-8.605 3.9-8.605 8.711v1.174c.267-.203.563-.368.883-.487c.455-.17.992-.213 1.775-.276l.11-.009l.093-.007c.42-.034.78-.063 1.096.01a2.1 2.1 0 0 1 1.528 1.43c.098.314.097.68.097 1.105v4.172c0 .291 0 .54-.012.743c-.012.213-.04.427-.116.638a2.1 2.1 0 0 1-1.56 1.35a2.2 2.2 0 0 1-.641.017c-.201-.02-.444-.059-.727-.104l-.13-.02c-.797-.128-1.344-.215-1.801-.436a3.52 3.52 0 0 1-1.847-2.188c-.118-.405-.139-.857-.142-1.461L2 17.58z">
 </path>
 <path fill="currentColor" fill-rule="evenodd" d="M12 5.75a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75m3 1.5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75m-6 0a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0V8A.75.75 0 0 1 9 7.25" clip-rule="evenodd" opacity=".5"></path>
 </svg>
 </div>
 </a>
 </div>
 </div>
<!-- Bottom Bar -->
 <div class="w-full max-w-7xl mt-20 pt-8 border-t flex flex-col md:flex-row justify-between items-center gap-6 relative z-10 border-white/5">
 <span class="text-xs font-mono tracking-wide text-white/20" style="">© 2024 Aura Financial Technologies. All rights reserved.</span>
<div class="flex items-center gap-8">
 <div class="flex items-center gap-2 grayscale opacity-30 hover:opacity-100 transition-opacity duration-300">
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="2.4em" height="1em" viewBox="0 0 512 214" data-icon="logos:stripe" class="iconify h-5 w-auto iconify--logos">
 <path fill="#635BFF" d="M512 110.08c0-36.409-17.636-65.138-51.342-65.138c-33.85 0-54.33 28.73-54.33 64.854c0 42.808 24.179 64.426 58.88 64.426c16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823c-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658m-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756c8.675 0 17.92 6.685 17.92 22.756zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537l.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96c25.458 0 48.64-20.48 48.64-65.564c-.142-41.245-23.609-63.716-48.498-63.716m-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968c12.942 0 21.902 14.506 21.902 33.137c0 19.058-8.818 33.28-21.902 33.28M241.493 36.551l35.698-7.68V0l-35.698 7.538zm0 10.809h35.698v124.444h-35.698zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524m-71.112-41.386l-34.702 7.395l-.142 113.92c0 21.05 15.787 36.551 36.836 36.551c11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022zM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68c10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92c0 6.541-5.688 8.675-13.653 8.675c-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106c29.582 0 49.92-14.648 49.92-40.106c-.142-42.382-54.329-34.845-54.329-50.774">
 </path>
 </svg>
 </div>
 <div class="flex items-center gap-2 grayscale opacity-30 hover:opacity-100 transition-opacity duration-300">
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="2.25em" height="1em" viewBox="0 0 256 114" data-icon="logos:visaelectron">
 </svg></div></div></div></footer></body></html>