undefined / index.html
Snowrowe's picture
take the tier system out
4553046 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carroll AI - Smarter Deals with Patrick's Logic</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a365d',
secondary: '#d4af37',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Manrope', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="cpu" class="text-primary h-6 w-6"></i>
<span class="ml-2 text-xl font-bold text-gray-900">Carroll AI</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-medium">Home</a>
<a href="#features" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a>
<a href="#how-it-works" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">How It Works</a>
<a href="#signup" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Sign Up</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-gradient">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">Smarter Deals.</span>
<span class="block text-primary">Patrick's Logic.</span>
<span class="block">Your Edge.</span>
</h1>
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
Carroll AI is trained on Patrick Carroll's real intelligence—decades of dealmaking, insights, and hard-earned frameworks.
</p>
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div class="rounded-md shadow">
<a href="#signup" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary-700 md:py-4 md:text-lg md:px-10">
Get Access <i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
</div>
<div class="mt-12 flex justify-center">
<img src="http://static.photos/technology/1024x576/42" alt="AI Deal Analysis" class="rounded-lg shadow-xl w-full max-w-3xl">
</div>
</div>
</div>
<!-- Features Section -->
<div id="features" class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
AI-Powered Deal Intelligence
</p>
</div>
<div class="mt-10">
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
<div class="feature-card relative bg-white p-6 rounded-lg transition-all duration-300 ease-in-out">
<div class="absolute -top-6 left-6 rounded-md bg-primary p-3 text-white">
<i data-feather="file-text" class="h-6 w-6"></i>
</div>
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">AI Deal Reviews</h3>
<p class="mt-2 text-base text-gray-500">
Upload your deal. Get instant analysis grounded in Patrick's frameworks.
</p>
</div>
<div class="feature-card relative bg-white p-6 rounded-lg transition-all duration-300 ease-in-out">
<div class="absolute -top-6 left-6 rounded-md bg-primary p-3 text-white">
<i data-feather="trending-up" class="h-6 w-6"></i>
</div>
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Market Insights</h3>
<p class="mt-2 text-base text-gray-500">
Real-time reads on where the market is heading, backed by Carroll's track record.
</p>
</div>
<div class="feature-card relative bg-white p-6 rounded-lg transition-all duration-300 ease-in-out">
<div class="absolute -top-6 left-6 rounded-md bg-primary p-3 text-white">
<i data-feather="tool" class="h-6 w-6"></i>
</div>
<h3 class="mt-8 text-lg leading-6 font-medium text-gray-900">Investor Tools</h3>
<p class="mt-2 text-base text-gray-500">
Frameworks, calculators, and benchmarks that cut the noise and get you to clarity fast.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- How It Works Section -->
<div id="how-it-works" class="py-12 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-primary font-semibold tracking-wide uppercase">Process</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
How Carroll AI Works
</p>
</div>
<div class="mt-10">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-between">
<div class="flex items-center">
<span class="relative flex h-8 w-8 items-center justify-center rounded-full bg-primary">
<span class="text-white">1</span>
</span>
</div>
<div class="flex items-center">
<span class="relative flex h-8 w-8 items-center justify-center rounded-full bg-primary">
<span class="text-white">2</span>
</span>
</div>
<div class="flex items-center">
<span class="relative flex h-8 w-8 items-center justify-center rounded-full bg-primary">
<span class="text-white">3</span>
</span>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 gap-8 sm:grid-cols-3">
<div class="pt-6">
<div class="flow-root bg-white rounded-lg px-6 pb-8 h-full">
<div class="-mt-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
<i data-feather="upload"></i>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">One-Click Access</h3>
<p class="mt-5 text-base text-gray-500">
Enter your deal or question through our intuitive interface.
</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root bg-white rounded-lg px-6 pb-8 h-full">
<div class="-mt-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
<i data-feather="cpu"></i>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Carroll Logic Applied</h3>
<p class="mt-5 text-base text-gray-500">
AI trained on Patrick's insights processes and analyzes your input.
</p>
</div>
</div>
</div>
<div class="pt-6">
<div class="flow-root bg-white rounded-lg px-6 pb-8 h-full">
<div class="-mt-6">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white">
<i data-feather="dollar-sign"></i>
</div>
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Investor Ready</h3>
<p class="mt-5 text-base text-gray-500">
Get actionable takeaways you can use today in your own deals.
</p>
</div>
</div>
</div>
</div>
<div class="mt-10 text-center">
<a href="#signup" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-700">
Try Carroll AI <i data-feather="arrow-right" class="ml-2"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Sign Up Section -->
<div id="signup" class="py-12 bg-primary">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="text-3xl font-extrabold text-white">
Unlock Carroll AI Today
</h2>
<p class="mt-3 text-lg text-primary-100">
Choose your tier, sign your consent forms, and get instant access to the platform.
</p>
<div class="mt-8 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check" class="h-6 w-6 text-secondary"></i>
</div>
<p class="ml-3 text-base text-primary-100">
AI-powered deal analysis
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check" class="h-6 w-6 text-secondary"></i>
</div>
<p class="ml-3 text-base text-primary-100">
Patrick Carroll's proven frameworks
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<i data-feather="check" class="h-6 w-6 text-secondary"></i>
</div>
<p class="ml-3 text-base text-primary-100">
Exclusive investor tools
</p>
</div>
</div>
</div>
<div class="mt-12 lg:mt-0 lg:col-span-7">
<form class="space-y-6" action="#" method="POST">
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
<div>
<label for="first-name" class="block text-sm font-medium text-white">First name</label>
<div class="mt-1">
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-secondary focus:border-secondary border-gray-300 rounded-md">
</div>
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-white">Last name</label>
<div class="mt-1">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="py-3 px-4 block w-full shadow-sm focus:ring-secondary focus:border-secondary border-gray-300 rounded-md">
</div>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-white">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-secondary focus:border-secondary border-gray-300 rounded-md">
</div>
</div>
<div>
<label class="block text-sm font-medium text-white">Are you an accredited investor?</label>
<div class="mt-2">
<div class="flex items-center">
<input id="accredited-yes" name="accredited" type="radio" class="focus:ring-secondary h-4 w-4 text-primary border-gray-300">
<label for="accredited-yes" class="ml-3 block text-sm font-medium text-white">Yes</label>
</div>
<div class="flex items-center mt-2">
<input id="accredited-no" name="accredited" type="radio" class="focus:ring-secondary h-4 w-4 text-primary border-gray-300">
<label for="accredited-no" class="ml-3 block text-sm font-medium text-white">No</label>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="consent" name="consent" type="checkbox" class="focus:ring-secondary h-4 w-4 text-primary border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="consent" class="font-medium text-white">I acknowledge this is for educational purposes only</label>
</div>
</div>
<div class="mt-5">
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-secondary hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
Get Started Now
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8 xl:col-span-1">
<div class="flex items-center">
<i data-feather="cpu" class="text-white h-6 w-6"></i>
<span class="ml-2 text-xl font-bold text-white">Carroll AI</span>
</div>
<p class="text-gray-300 text-sm">
Carroll AI is an educational tool. It does not provide financial advice or commit capital. All insights are for educational purposes only.
</p>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Navigation</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">Home</a>
</li>
<li>
<a href="#features" class="text-base text-gray-400 hover:text-white">Features</a>
</li>
<li>
<a href="#how-it-works" class="text-base text-gray-400 hover:text-white">How It Works</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">Terms & Conditions</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">Privacy Policy</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Membership</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#signup" class="text-base text-gray-400 hover:text-white">Get Started</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8">
<p class="text-base text-gray-400 text-center">
&copy; 2023 Carroll AI. All rights reserved.
</p>
</div>
</div>
</footer>
<script>
feather.replace();
// Mobile menu toggle functionality would go here
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', function() {
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !expanded);
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
});
</script>
</body>
</html>