generated from Nicholai/astro-template
565 lines
37 KiB
HTML
565 lines
37 KiB
HTML
<html lang="en"><head><meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pro Finance - Invest for the Future</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
/* Custom scrollbar to keep it sleek */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }
|
|
</style></head>
|
|
<body class="bg-white text-neutral-900 antialiased selection:bg-[#ccf32f] selection:text-black">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="sticky top-0 z-50 w-full bg-white/80 backdrop-blur-md border-b border-neutral-100">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-4 h-4 rounded-full bg-[#ccf32f]"></div>
|
|
<span class="text-lg font-medium tracking-tight">Pro Finance</span>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-8 text-base font-medium text-neutral-500">
|
|
<a href="#" class="hover:text-black transition-colors">About Us</a>
|
|
<a href="#" class="hover:text-black transition-colors">Catalog</a>
|
|
<a href="#" class="hover:text-black transition-colors">Price</a>
|
|
<a href="#" class="hover:text-black transition-colors">Help</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="#" class="hidden sm:block text-base font-medium hover:text-neutral-600 transition-colors">Log In</a>
|
|
<a href="#" class="bg-black text-white text-sm font-medium px-5 py-2.5 rounded-full hover:bg-neutral-800 transition-colors flex items-center gap-2">
|
|
<i data-lucide="apple" class="w-4 h-4 fill-current"></i>
|
|
<span>Download App</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="w-full overflow-hidden">
|
|
|
|
<!-- Hero Section -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-4">
|
|
<div class="relative bg-[#ccf32f] rounded-[2.5rem] p-8 md:p-16 overflow-hidden min-h-[600px] md:min-h-[700px] flex flex-col md:block">
|
|
|
|
<!-- Hero Content -->
|
|
<div class="relative z-10 max-w-xl mt-8 md:mt-16">
|
|
<h1 class="text-5xl md:text-7xl font-medium tracking-tight leading-[1.1] mb-6">
|
|
Invest for <br>
|
|
the Future
|
|
<span class="inline-block relative top-[-20px]">
|
|
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-black/80"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path></svg>
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl font-normal text-neutral-800 mb-10 max-w-md leading-relaxed">
|
|
Work with all the necessary information and tools to boost money flow from your capital investment using ProFinance!
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
|
<button class="bg-black text-white text-base font-medium px-7 py-3.5 rounded-full hover:bg-neutral-800 transition-transform hover:scale-105 flex items-center gap-2">
|
|
<i data-lucide="apple" class="w-5 h-5 fill-current"></i>
|
|
Download App
|
|
</button>
|
|
<a href="#" class="text-base font-medium flex items-center gap-2 group">
|
|
Find Out More
|
|
<i data-lucide="arrow-down" class="w-4 h-4 group-hover:translate-y-1 transition-transform"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Decorative Arrow -->
|
|
<div class="absolute right-0 top-1/4 hidden md:block">
|
|
<svg width="120" height="120" viewBox="0 0 100 100" fill="none" stroke="black" stroke-width="1.5">
|
|
<path d="M10,10 Q50,10 50,50 T90,90" stroke-linecap="round"></path>
|
|
<path d="M80,90 L90,90 L90,80" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Phones Mockup (CSS Only) -->
|
|
<div class="relative md:absolute md:top-12 md:-right-20 mt-12 md:mt-0 flex justify-center md:block transform scale-90 md:scale-100">
|
|
|
|
<!-- Back Phone -->
|
|
<div class="absolute top-0 -left-20 md:-left-32 w-[280px] h-[580px] bg-white rounded-[3rem] border-[8px] border-white shadow-2xl rotate-[-6deg] overflow-hidden hidden lg:block opacity-90 z-0">
|
|
<!-- Header -->
|
|
<div class="px-6 py-6 bg-neutral-50 border-b border-neutral-100">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-xl font-medium tracking-tight">Market</span>
|
|
<i data-lucide="sliders-horizontal" class="w-5 h-5 text-neutral-400"></i>
|
|
</div>
|
|
<div class="w-full bg-white h-10 rounded-xl border border-neutral-200 flex items-center px-3 gap-2">
|
|
<i data-lucide="search" class="w-4 h-4 text-neutral-400"></i>
|
|
<span class="text-sm text-neutral-400">Find stocks...</span>
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4 space-y-4">
|
|
<div class="bg-black text-white p-4 rounded-2xl">
|
|
<span class="text-xs text-neutral-400 uppercase">Dividend Strategy</span>
|
|
<div class="flex justify-between items-end mt-2">
|
|
<span class="text-2xl font-medium tracking-tight">+6.48%</span>
|
|
<div class="flex -space-x-2">
|
|
<div class="w-6 h-6 rounded-full bg-blue-400"></div>
|
|
<div class="w-6 h-6 rounded-full bg-red-400"></div>
|
|
<div class="w-6 h-6 rounded-full bg-white text-[8px] flex items-center justify-center text-black font-bold">+2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- List Items -->
|
|
<div class="flex items-center justify-between p-3 bg-neutral-50 rounded-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center border border-neutral-100"><i data-lucide="apple" class="w-5 h-5 fill-current"></i></div>
|
|
<div>
|
|
<p class="text-sm font-medium">Apple Inc</p>
|
|
<p class="text-xs text-neutral-500">$132.15</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm font-medium text-green-600">+1.2%</span>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 bg-neutral-50 rounded-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white"><i data-lucide="music" class="w-5 h-5"></i></div>
|
|
<div>
|
|
<p class="text-sm font-medium">Spotify</p>
|
|
<p class="text-xs text-neutral-500">$292.92</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm font-medium text-green-600">+2.4%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Front Phone -->
|
|
<div class="relative w-[300px] h-[600px] bg-black rounded-[3.5rem] border-[10px] border-black shadow-2xl z-10 overflow-hidden">
|
|
<!-- Notch area -->
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-2xl z-20"></div>
|
|
|
|
<!-- Screen Content -->
|
|
<div class="w-full h-full bg-black text-white pt-10 px-6 flex flex-col">
|
|
<!-- Stock Header -->
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-black"><i data-lucide="apple" class="w-5 h-5 fill-current"></i></div>
|
|
<div>
|
|
<h3 class="text-lg font-medium leading-none">Apple Inc</h3>
|
|
<span class="text-xs text-neutral-500">AAPL</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-8 h-8 rounded-full border border-neutral-800 flex items-center justify-center">
|
|
<i data-lucide="star" class="w-4 h-4 text-neutral-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price -->
|
|
<div class="mb-6">
|
|
<h2 class="text-3xl font-medium tracking-tight">$132.15</h2>
|
|
<span class="text-green-400 text-sm font-medium">+1.25% (+$1.73)</span>
|
|
</div>
|
|
|
|
<!-- Chart Visualization -->
|
|
<div class="relative h-48 w-full mb-6">
|
|
<!-- Grid lines -->
|
|
<div class="absolute inset-0 grid grid-rows-4 gap-4 opacity-10">
|
|
<div class="border-t border-white w-full"></div>
|
|
<div class="border-t border-white w-full"></div>
|
|
<div class="border-t border-white w-full"></div>
|
|
<div class="border-t border-white w-full"></div>
|
|
</div>
|
|
<!-- Candles (Simulated with divs) -->
|
|
<div class="absolute bottom-0 left-0 right-0 h-full flex items-end justify-between px-2 gap-1">
|
|
<div class="w-2 h-[40%] bg-red-500 rounded-sm"></div>
|
|
<div class="w-2 h-[60%] bg-green-500 rounded-sm"></div>
|
|
<div class="w-2 h-[55%] bg-green-500 rounded-sm"></div>
|
|
<div class="w-2 h-[45%] bg-red-500 rounded-sm"></div>
|
|
<div class="w-2 h-[70%] bg-green-500 rounded-sm"></div>
|
|
<div class="w-2 h-[85%] bg-green-500 rounded-sm"></div>
|
|
<div class="w-2 h-[75%] bg-red-500 rounded-sm"></div>
|
|
<div class="w-2 h-[90%] bg-green-500 rounded-sm shadow-[0_0_10px_rgba(34,197,94,0.5)]"></div>
|
|
<div class="w-2 h-[60%] bg-green-500 opacity-30 rounded-sm"></div>
|
|
<div class="w-2 h-[40%] bg-red-500 opacity-30 rounded-sm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeframe Selector -->
|
|
<div class="flex justify-between bg-neutral-900 rounded-xl p-1 mb-6">
|
|
<button class="text-xs font-medium text-neutral-500 py-1.5 px-3">1H</button>
|
|
<button class="text-xs font-medium text-neutral-500 py-1.5 px-3">4H</button>
|
|
<button class="text-xs font-medium text-black bg-white rounded-lg py-1.5 px-3 shadow-sm">Day</button>
|
|
<button class="text-xs font-medium text-neutral-500 py-1.5 px-3">Week</button>
|
|
<button class="text-xs font-medium text-neutral-500 py-1.5 px-3">Month</button>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<p class="text-[10px] text-neutral-500 uppercase tracking-wider">Open</p>
|
|
<p class="text-sm font-medium">$130.42</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-[10px] text-neutral-500 uppercase tracking-wider">High</p>
|
|
<p class="text-sm font-medium">$133.00</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-auto pb-8 flex gap-3">
|
|
<button class="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-3 rounded-xl transition-colors">Sell</button>
|
|
<button class="flex-1 bg-[#ccf32f] hover:bg-[#bce325] text-black font-medium py-3 rounded-xl transition-colors">Buy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Split Section -->
|
|
<section class="max-w-7xl mx-auto px-6 py-24">
|
|
<h2 class="text-3xl md:text-5xl font-medium tracking-tight mb-16 max-w-lg">Get the Most Out <br> of Your Investments</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Card 1 -->
|
|
<div class="bg-neutral-50 rounded-[2rem] p-10 relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
|
|
<div class="relative z-10 max-w-sm">
|
|
<h3 class="text-xl font-medium mb-3">Unlimited Portfolio Accounts</h3>
|
|
<p class="text-lg text-neutral-500 mb-8 leading-relaxed">Manage all your financial assets from one place smoothly.</p>
|
|
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium hover:gap-3 transition-all">
|
|
Read More <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
<!-- Abstract Doodle -->
|
|
<div class="absolute -bottom-10 -right-10 w-48 h-48">
|
|
<div class="absolute bottom-0 right-0 w-32 h-32 bg-[#ccf32f] rounded-full mix-blend-multiply opacity-80"></div>
|
|
<div class="absolute bottom-4 right-16 w-24 h-40 bg-black rounded-full mix-blend-multiply opacity-90 rotate-12"></div>
|
|
<svg class="absolute bottom-10 right-4 w-20 h-20 text-black z-20" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10,50 C30,20 70,80 90,50"></path>
|
|
<circle cx="85" cy="45" r="5" fill="none"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="bg-neutral-50 rounded-[2rem] p-10 relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
|
|
<div class="relative z-10 max-w-sm">
|
|
<h3 class="text-xl font-medium mb-3">Full Analytics in Your App</h3>
|
|
<p class="text-lg text-neutral-500 mb-8 leading-relaxed">Analyze the results and try different strategies for more income.</p>
|
|
<a href="#" class="inline-flex items-center gap-2 text-sm font-medium hover:gap-3 transition-all">
|
|
Read More <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
<!-- Abstract Chart -->
|
|
<div class="absolute bottom-8 right-8 w-40 h-40">
|
|
<div class="absolute inset-0 border-[12px] border-red-400/20 rounded-full border-t-red-400 border-r-transparent rotate-45"></div>
|
|
<div class="absolute inset-0 border-[12px] border-[#ccf32f]/20 rounded-full border-l-[#ccf32f] border-b-transparent -rotate-12 scale-75"></div>
|
|
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-12 text-black" viewBox="0 0 100 50" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="0,50 20,40 40,45 60,10 80,20 100,5" stroke-linejoin="round" stroke-linecap="round"></polyline>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Advantages Section -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-24">
|
|
<h2 class="text-3xl md:text-5xl font-medium tracking-tight mb-6">Advantages</h2>
|
|
<p class="text-lg text-neutral-500 max-w-md mb-16 leading-relaxed">
|
|
We listen to our customers and work with them to improve the user experience of our platform.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
|
|
<!-- Item 1 -->
|
|
<div class="flex gap-6 items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-[#ccf32f] flex items-center justify-center">
|
|
<i data-lucide="zap" class="w-6 h-6 text-black"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-medium mb-2">Smooth Start</h3>
|
|
<p class="text-lg text-neutral-500 leading-relaxed mb-4">Without a visit to the office, we will set up your brokerage account in 5 minutes.</p>
|
|
<button class="bg-neutral-100 hover:bg-neutral-200 px-4 py-2 rounded-lg text-xs font-medium transition-colors">Open an Account</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2 -->
|
|
<div class="flex gap-6 items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-[#ccf32f]/40 flex items-center justify-center">
|
|
<i data-lucide="headset" class="w-6 h-6 text-black"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-medium mb-2">24/7 Support</h3>
|
|
<p class="text-lg text-neutral-500 leading-relaxed mb-4">Our support team is always available to answer questions and resolve any issues.</p>
|
|
<button class="bg-neutral-100 hover:bg-neutral-200 px-4 py-2 rounded-lg text-xs font-medium transition-colors">Ask a Question</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 -->
|
|
<div class="flex gap-6 items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-[#ccf32f]/40 flex items-center justify-center">
|
|
<i data-lucide="coins" class="w-6 h-6 text-black"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-medium mb-2">Low Commissions</h3>
|
|
<p class="text-lg text-neutral-500 leading-relaxed mb-4">We give you the best rate we can for any kind of transactions. No extra fees.</p>
|
|
<button class="bg-neutral-100 hover:bg-neutral-200 px-4 py-2 rounded-lg text-xs font-medium transition-colors">Explore Prices</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 4 -->
|
|
<div class="flex gap-6 items-start">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-[#ccf32f]/40 flex items-center justify-center">
|
|
<i data-lucide="check" class="w-6 h-6 text-black"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-medium mb-2">Invest Any Amount</h3>
|
|
<p class="text-lg text-neutral-500 leading-relaxed mb-4">You don't have to have large sums to start investing, start small.</p>
|
|
<button class="bg-neutral-100 hover:bg-neutral-200 px-4 py-2 rounded-lg text-xs font-medium transition-colors">Start Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-24 text-center">
|
|
<h3 class="text-2xl font-medium mb-2">Our Partners</h3>
|
|
<p class="text-neutral-500 mb-10 text-lg">The largest banks, funds and exchanges from <br> all over the world cooperate with us</p>
|
|
|
|
<div class="flex flex-wrap justify-center gap-8 md:gap-16 opacity-60 grayscale">
|
|
<!-- Simple SVG Logos -->
|
|
<div class="w-12 h-12 bg-neutral-100 rounded-full flex items-center justify-center p-3">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 22h20L12 2zm0 4l6 14H6l6-14z"></path></svg>
|
|
</div>
|
|
<div class="w-12 h-12 bg-neutral-100 rounded-full flex items-center justify-center p-3">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="8" cy="12" r="6"></circle><circle cx="16" cy="12" r="6" opacity="0.5"></circle></svg>
|
|
</div>
|
|
<div class="w-12 h-12 bg-neutral-100 rounded-full flex items-center justify-center p-3">
|
|
<span class="font-bold text-xs">CITI</span>
|
|
</div>
|
|
<div class="w-12 h-12 bg-neutral-100 rounded-full flex items-center justify-center p-3">
|
|
<span class="font-bold text-xs italic">VISA</span>
|
|
</div>
|
|
<div class="w-12 h-12 bg-neutral-100 rounded-full flex items-center justify-center p-3">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 12l10-10 10 10-10 10L2 12zm2 0l8 8 8-8-8-8-8 8z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dark Pulse Section -->
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 mb-24">
|
|
<div class="bg-black rounded-[2.5rem] p-8 md:p-20 relative overflow-hidden flex flex-col md:flex-row items-center justify-between min-h-[400px]">
|
|
|
|
<div class="relative z-10 w-full md:w-1/2">
|
|
<svg class="absolute -top-16 left-0 w-32 h-10 text-white/20" viewBox="0 0 100 20" fill="none" stroke="currentColor"><path d="M0,20 Q20,0 50,10 T100,20"></path></svg>
|
|
<h2 class="text-3xl md:text-5xl font-medium text-white tracking-tight mb-8 leading-tight">
|
|
Keep Your Finger on the <br>
|
|
Investment Market Pulse
|
|
</h2>
|
|
<button class="bg-white text-black text-sm font-medium px-6 py-3 rounded-full hover:bg-neutral-200 transition-colors flex items-center gap-2">
|
|
<i data-lucide="apple" class="w-4 h-4 fill-current"></i>
|
|
Download App
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Floating UI Card -->
|
|
<div class="relative z-10 mt-12 md:mt-0 w-full max-w-xs transform md:translate-x-10">
|
|
<div class="bg-white rounded-3xl p-5 shadow-2xl relative">
|
|
<div class="text-center mb-4">
|
|
<span class="text-xs text-neutral-400 uppercase tracking-widest">Total Balance</span>
|
|
<h3 class="text-3xl font-medium tracking-tight">$16,988.31</h3>
|
|
<span class="inline-block bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs font-semibold mt-1">+$1,247 23.8%</span>
|
|
</div>
|
|
<div class="bg-black rounded-xl p-4 mb-4">
|
|
<div class="flex justify-between items-center text-white mb-2">
|
|
<span class="text-xs font-medium">Brokerage Account</span>
|
|
<i data-lucide="more-horizontal" class="w-4 h-4 text-neutral-500"></i>
|
|
</div>
|
|
<div class="text-white text-lg font-medium">$5,738.70</div>
|
|
<div class="flex gap-2 mt-3">
|
|
<button class="flex-1 bg-neutral-800 text-white text-[10px] py-1.5 rounded-lg border border-neutral-700">Analytics</button>
|
|
<button class="flex-1 bg-neutral-800 text-white text-[10px] py-1.5 rounded-lg border border-neutral-700">Replenish</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-neutral-100 flex items-center justify-center"><i data-lucide="apple" class="w-3 h-3 fill-current"></i></div>
|
|
<span class="text-xs font-medium">Apple Inc</span>
|
|
</div>
|
|
<span class="text-xs font-medium text-green-600">+$188.25</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"><i data-lucide="wind" class="w-3 h-3"></i></div>
|
|
<span class="text-xs font-medium">Microsoft</span>
|
|
</div>
|
|
<span class="text-xs font-medium text-green-600">+$1,402.71</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Abstract -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black via-black to-neutral-900">
|
|
<div class="absolute right-0 top-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-neutral-800/30 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature: Real Time -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-32 flex flex-col md:flex-row items-center gap-16">
|
|
<div class="w-full md:w-1/2 relative">
|
|
<!-- Yellow Background Box -->
|
|
<div class="absolute -top-4 -left-4 w-full h-full bg-[#ccf32f] rounded-[2rem] transform -rotate-2"></div>
|
|
<!-- Dark Chart Card -->
|
|
<div class="relative bg-neutral-950 rounded-[2rem] p-6 text-white shadow-xl h-64 overflow-hidden flex flex-col justify-end">
|
|
<span class="absolute top-4 right-6 text-xs text-neutral-400 font-mono">135.76 <br> <span class="text-green-400">+1.25%</span></span>
|
|
<!-- CSS Chart -->
|
|
<svg viewBox="0 0 300 100" class="w-full h-full opacity-90 overflow-visible">
|
|
<defs>
|
|
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stop-color="#4ade80" stop-opacity="0.2"></stop>
|
|
<stop offset="100%" stop-color="#4ade80" stop-opacity="0"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M0,80 L20,70 L40,85 L60,60 L80,65 L100,40 L120,55 L140,30 L160,45 L180,20 L200,35 L220,15 L240,25 L300,5" fill="none" stroke="#e5e5e5" stroke-width="1"></path>
|
|
<path d="M0,80 L20,70 L40,85 L60,60 L80,65 L100,40 L120,55 L140,30 L160,45 L180,20 L200,35 L220,15 L240,25 L300,5 V100 H0 Z" fill="url(#gradient)"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2">
|
|
<h2 class="text-3xl md:text-5xl font-medium tracking-tight mb-6">Trade in Real Time</h2>
|
|
<p class="text-lg text-neutral-500 leading-relaxed">
|
|
No more waiting. Your orders are executed immediately, the price of your securities is updated every second and ProFinance always has the most relevant information.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature: Stonks -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-32 flex flex-col-reverse md:flex-row items-center gap-16">
|
|
<div class="w-full md:w-1/2">
|
|
<h2 class="text-3xl md:text-5xl font-medium tracking-tight mb-6">100,000+ <br> Stonks in Your App</h2>
|
|
<p class="text-lg text-neutral-500 leading-relaxed mb-6">
|
|
Trade through ProFinance and you'll gain access to thousands of financial markets from around the world, using a wide range of investment tools.
|
|
</p>
|
|
<p class="text-lg text-neutral-500 leading-relaxed">
|
|
We are sure you will find the paper that's right for your investment strategy.
|
|
</p>
|
|
<!-- Curly Line SVG connecting to next section -->
|
|
<div class="mt-8 hidden md:block">
|
|
<svg width="200" height="100" viewBox="0 0 200 100" fill="none" stroke="black" stroke-width="1">
|
|
<path d="M10,10 Q100,100 190,50"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full md:w-1/2 relative h-[400px]">
|
|
<!-- Yellow Circle Background -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[350px] h-[350px] bg-[#ccf32f] rounded-full opacity-80"></div>
|
|
|
|
<!-- Floating Cards -->
|
|
<div class="absolute top-10 left-10 bg-white p-3 rounded-xl shadow-lg flex items-center gap-3 w-48 animate-[bounce_3s_infinite]">
|
|
<div class="w-8 h-8 rounded-full bg-black flex items-center justify-center"><i data-lucide="apple" class="w-4 h-4 text-white fill-current"></i></div>
|
|
<div>
|
|
<p class="text-xs font-semibold">Apple Inc</p>
|
|
<p class="text-[10px] text-neutral-500">AAPL</p>
|
|
</div>
|
|
<div class="ml-auto text-xs font-semibold">$1,882.03</div>
|
|
</div>
|
|
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-3 rounded-xl shadow-lg flex items-center gap-3 w-56 z-10">
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"><i data-lucide="layout-grid" class="w-4 h-4 text-white"></i></div>
|
|
<div>
|
|
<p class="text-xs font-semibold">Microsoft corp</p>
|
|
<p class="text-[10px] text-neutral-500">MSFT</p>
|
|
</div>
|
|
<div class="ml-auto text-right">
|
|
<p class="text-xs font-semibold">$1,402.71</p>
|
|
<p class="text-[10px] text-red-500">-3.2%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-20 right-10 bg-white p-3 rounded-xl shadow-lg flex items-center gap-3 w-48 animate-[bounce_4s_infinite]">
|
|
<div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center"><i data-lucide="box" class="w-4 h-4 text-blue-600"></i></div>
|
|
<div>
|
|
<p class="text-xs font-semibold">Dropbox Inc</p>
|
|
<p class="text-[10px] text-neutral-500">DBX</p>
|
|
</div>
|
|
<div class="ml-auto text-right">
|
|
<p class="text-xs font-semibold">$669.12</p>
|
|
<p class="text-[10px] text-green-500">+11.7%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bottom CTA -->
|
|
<section class="max-w-7xl mx-auto px-6 mb-24 text-center">
|
|
<h2 class="text-3xl md:text-5xl font-medium tracking-tight mb-8">Get the App for Free <br> and Start Now</h2>
|
|
<button class="bg-black text-white text-base font-medium px-8 py-4 rounded-full hover:bg-neutral-800 transition-colors inline-flex items-center gap-2">
|
|
<i data-lucide="apple" class="w-5 h-5 fill-current"></i>
|
|
Download App
|
|
</button>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-black text-white pt-20 pb-10 rounded-t-[3rem] mt-10">
|
|
<div class="max-w-7xl mx-auto px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-neutral-800 pb-16">
|
|
<!-- Brand -->
|
|
<div class="col-span-1">
|
|
<div class="flex items-center gap-2 mb-8">
|
|
<div class="w-4 h-4 rounded-full bg-[#ccf32f]"></div>
|
|
<span class="text-lg font-medium">Pro Finance</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links 1 -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-white mb-6">Resources</h4>
|
|
<ul class="space-y-4 text-sm text-neutral-400">
|
|
<li><a href="#" class="hover:text-white transition-colors">Stocks & Founds</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Learn</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Help & Support</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Links 2 -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-white mb-6">Company</h4>
|
|
<ul class="space-y-4 text-sm text-neutral-400">
|
|
<li><a href="#" class="hover:text-white transition-colors">About</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Privacy</a></li>
|
|
<li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Newsletter -->
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-white mb-6">Subscribe to News</h4>
|
|
<div class="relative">
|
|
<input type="email" placeholder="Your e-mail" class="w-full bg-neutral-900 border border-neutral-800 rounded-full py-3 pl-5 pr-12 text-sm text-white focus:outline-none focus:border-[#ccf32f]">
|
|
<button class="absolute right-2 top-1.5 w-9 h-9 bg-[#ccf32f] rounded-full flex items-center justify-center text-black hover:scale-105 transition-transform">
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center pt-8 text-neutral-500 text-sm">
|
|
<p>© 2024 Pro Finance Inc.</p>
|
|
<div class="flex gap-4">
|
|
<a href="#" class="hover:text-white transition-colors"><i data-lucide="facebook" class="w-4 h-4"></i></a>
|
|
<a href="#" class="hover:text-white transition-colors"><i data-lucide="twitter" class="w-4 h-4"></i></a>
|
|
<a href="#" class="hover:text-white transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
|
|
</body></html> |