ModelReef clone - v0 by Vercel

```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ModelReef</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/font/font.css" rel="stylesheet"> <link href="assets/css/style.css" rel="stylesheet"> <link href="assets/css/responsive.css" rel="stylesheet"></head><body> <div class="main"> <header id="header" class="header"> <div class="container"> <nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="#"> <img src="assets/images/brand-logo.svg" width="317" height="38" alt="ModelReef"> </a> <div class="navbar-right-side"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Use Cases </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">LBO modeling</a></li> <li><a class="dropdown-item" href="#">Budgeting</a></li> <li><a class="dropdown-item" href="#">Three Statement Models</a></li> <li><a class="dropdown-item" href="#">Business Valuation</a></li> <li><a class="dropdown-item" href="#">Investment Screening</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Use as </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">LBO modeling</a></li> <li><a class="dropdown-item" href="#">Budgeting</a></li> <li><a class="dropdown-item" href="#">Three Statement Models</a></li> <li><a class="dropdown-item" href="#">Business Valuation</a></li> <li><a class="dropdown-item" href="#">Investment Screening</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sign In</a> </li> </ul> </div> <div> <a href="#" class="primary-btn">Get Started <span class="arrow-icon"></span> </a> </div> </div> </nav> </div> </header>  <section id="section1" class="hero-section"> <div class="container"> <div class="hero-section-wrapper animate-text"> <h1 class="page-title">When growth is on the line, don’t wing it.</h1> <p class="dec">No more ‘what ifs.’ Just clear answers. Enter fast, accurate financial modeling that drives clear, data-driven decisions.</p> <a href="/" class="primary-btn">Discover How <span class="arrow-icon"></span> </a> </div> <picture class="hero-section-img"> <img src="assets/images/dashboard-img.webp" width="1503" height="719" alt="Dashboard image"> </picture> </div> </section>  <section id="section2" class="pt-100 pb-100"> <div class="container"> <h2 class="section-title animate-text">Confidence starts <span>with knowing your numbers</span></h2> <div class="card-main"> <div class="card-wrap"> <span class="hover-img"></span> <div class="collapse collapse multi-collapse" id="multiCollapseExample1"> <div class="card-second-content"> <h3 class="card-title">Financial Analyst</h3> <p><b class="d-block">Ditch the manual financial modeling.</b>IRR, LBO, valuations & more, instantly.</p> <p><b class="d-block">Less admin, more analysis.</b>Get home sooner while focusing on what drives results.</p> <p><b class="d-block">Never miss a metric.</b>Automated cashflow waterfalls, expense trackers, staffing costs, tax & more.</p> <p><b class="d-block">Work smarter, not harder.</b>Create stellar deliverables with barely any legwork.</p> <button class="primary-btn">Find out more <span class="arrow-icon"></span> </button> </div> </div> <div class="card-first-content"> <h3 class="card-title">Financial Analyst</h3> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> <div class="card-wrap"> <span class="hover-img"></span> <div class="collapse collapse multi-collapse" id="multiCollapseExample2"> <div class="card-second-content"> <h3 class="card-title">Financial Analyst</h3> <p><b class="d-block">Ditch the manual financial modeling.</b>IRR, LBO, valuations & more, instantly.</p> <p><b class="d-block">Less admin, more analysis.</b>Get home sooner while focusing on what drives results.</p> <p><b class="d-block">Never miss a metric.</b>Automated cashflow waterfalls, expense trackers, staffing costs, tax & more.</p> <p><b class="d-block">Work smarter, not harder.</b>Create stellar deliverables with barely any legwork.</p> <button class="primary-btn">Find out more <span class="arrow-icon"></span> </button> </div> </div> <div class="card-first-content"> <h3 class="card-title">Financial Analyst</h3> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> <div class="card-wrap"> <span class="hover-img"></span> <div class="collapse collapse multi-collapse" id="multiCollapseExample3"> <div class="card-second-content"> <h3 class="card-title">Financial Analyst</h3> <p><b class="d-block">Ditch the manual financial modeling.</b>IRR, LBO, valuations & more, instantly.</p> <p><b class="d-block">Less admin, more analysis.</b>Get home sooner while focusing on what drives results.</p> <p><b class="d-block">Never miss a metric.</b>Automated cashflow waterfalls, expense trackers, staffing costs, tax & more.</p> <p><b class="d-block">Work smarter, not harder.</b>Create stellar deliverables with barely any legwork.</p> <button class="primary-btn">Find out more <span class="arrow-icon"></span> </button> </div> </div> <div class="card-first-content"> <h3 class="card-title">Financial Analyst</h3> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample3" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> </div> </div> </section> <section id="section3" class=""> <div class="container"> <div class="spreadsheets-section"> <h2 class="section-title animate-text">Less spreadsheets, <span>more strategy. Better results.</span></h2> <div class="toggle-box-wrap"> <div class="toggle-box"> <picture class="toggle-box-img"> <img src="assets/images/better-resultes.png" width="200" height="200" alt="..."> </picture> <div> <h3 class="toggle-box-title">100x faster financial analysis</h3> <div class="collapse collapse multi-collapse" id="multiCollapseExample4"> <p class="toggle-box-dec">Our AI financial model generator delivers instant, investor-grade models with near zero gruntwork. Spend less time in spreadsheets, and more time making profit-driven moves</p> </div> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample4" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> <div class="toggle-box"> <picture class="toggle-box-img"> <img src="assets/images/better-resultes.png" width="200" height="200" alt="..."> </picture> <div> <h3 class="toggle-box-title">Move on high-ticket decisions faster</h3> <div class="collapse collapse multi-collapse" id="multiCollapseExample5"> <p class="toggle-box-dec">Use your finance model to validate funding rounds and acquisitions. Create data-backed projections instantly and beat the competition to move on opportunities.</p> </div> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample5" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> <div class="toggle-box"> <picture class="toggle-box-img"> <img src="assets/images/better-resultes.png" width="200" height="200" alt="..."> </picture> <div> <h3 class="toggle-box-title">Streamlined business budgeting</h3> <div class="collapse collapse multi-collapse" id="multiCollapseExample6"> <p class="toggle-box-dec">Model cashflow forecasts and revenue projections in real-time. Visualise the impacts of taxes and staffing costs. Get greater control over your expenses, and spot wastes before they spiral.</p> </div> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample6" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> <div class="toggle-box"> <picture class="toggle-box-img"> <img src="assets/images/better-resultes.png" width="200" height="200" alt="..."> </picture> <div> <h3 class="toggle-box-title">Formula-free & flexible</h3> <div class="collapse collapse multi-collapse" id="multiCollapseExample7"> <p class="toggle-box-dec">Build complex models without writing a single formula. Customise any formula to suit your needs, if detailed quantitative analysis is your style.</p> </div> <button class="toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample7" aria-expanded="false" aria-controls="multiCollapseExample"> <span class="plus-icon"></span> </button> </div> </div> </div> </div> </div> </section> <section id="section4" class="pt-100 pb-100 subscription-wrapper"> <div class="container"> <h2 class="section-title animate-text">Pick your perfect plan</h2> <div class="subscription-wrap"> <div class="subscription-card"> <div class="subscription-card-body"> <h3 class="card-title">Free</h3> <div class="plan-price"> <span class="currency">$</span> <div class="plan-price-wrap"> <span class="price">0</span> <span class="timeline">per user/<span>monthly</span></span> </div> </div> <p class="no-credit-card">No credit card required</p> <div class="available-features"> <div class="features-title">Features:</div> <ul class="features-list"> <li>Instant Financial Statements</li> <li>Instant Investment Analytics</li> <li>Limited Forecasting Power</li> <li>Limited Collaboration</li> </ul> </div> </div> <div class="subscription-card-footer"> <button class="select-plan-btn" type="button">Select Plan</button> <a href="/" class="link">Contact Sales</a> </div> </div> <div class="subscription-card"> <div class="subscription-card-body"> <h3 class="card-title">Standard</h3> <div class="plan-price"> <span class="currency">$</span> <div class="plan-price-wrap"> <span class="price">59</span> <span class="timeline">per user/<span>monthly</span></span> </div> </div> <select class="user-dropdown" id="inputGroupSelect01"> <option selected>5 Users</option> <option value="1">10 Users</option> <option value="2">15 Users</option> <option value="3">20 Users</option> <option value="4">Uncapped</option> </select> <div class="available-features"> <div class="features-title">Everything in Free, plus:</div> <ul class="features-list"> <li>Standard Valuation</li> <li>Standard Forecasting</li> <li>Standard Collaboration</li> </ul> </div> </div> <div class="subscription-card-footer"> <button class="select-plan-btn" type="button">Select Plan</button> <a href="/" class="link">Contact Sales</a> </div> </div> <div class="subscription-card"> <div class="most-popular"> <div class="subscription-card-body"> <h3 class="card-title">Professional</h3> <div class="popular-label">Most Popular</div> <div class="plan-price"> <span class="currency">$</span> <div class="plan-price-wrap"> <span class="price">99</span> <span class="timeline">per user/<span>monthly</span></span> </div> </div> <select class="user-dropdown" id="inputGroupSelect02"> <option selected>5 Users</option> <option value="1">10 Users</option> <option value="2">15 Users</option> <option value="3">20 Users</option> <option value="4">Uncapped</option> </select> <div class="available-features"> <div class="features-title">Everything in Standard, plus:</div> <ul class="features-list"> <li>Professional Valuation</li> <li>Professional Forecasting</li> <li>Professional Collaboration</li> <li>Professional Auditing</li> </ul> </div> </div> <div class="subscription-card-footer"> <button class="select-plan-btn" type="button">Select Plan</button> <a href="/" class="link">Contact Sales</a> </div> </div> </div> <div class="subscription-card"> <div class="subscription-card-body"> <h3 class="card-title">Enterprise</h3> <div class="plan-price"> <span class="lets-talk">Let’s Talk</span> </div> <div class="available-features"> <div class="features-title">Everything in Professional, plus:</div> <ul class="features-list"> <li>Customised Financial Formulas</li> <li>Multiple Teams and Workspaces</li> <li>Firewall and IP integration</li> <li>Custom Server Hosting</li> </ul> </div> </div> <div class="subscription-card-footer"> <button class="select-plan-btn" type="button">Contact Sales</button> </div> </div> </div> </div> </section> <section id="section5" class="cta pb-100"> <div class="container"> <a href="/" class="cta-wrap"> <h2 class="section-title animate-text">Clarity starts here. <span>Model your next move.</span></h2> <span class="cta-btn"> <img src="assets/images/icons/right-arrow.svg" width="56" height="40" alt="right-arrow"> </span> </a> </div> </section> <section id="section6" class="faq-section"> <div class="container"> <div class="faq-wrap"> <h2 class="section-title animate-text">Frequently Asked Questions</h2> <div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Is my data secure in Model Reef? </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> What does Model Reef do? </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Can my team collaborate in real-time? </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour"> How does Model Reef save me time? </button> </h2> <div id="flush-collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> </div> </div> </div> </section> <section id="section7" class="pt-100 pb-100 brand-section"> <div class="container"> <div class="brand-wrap"> <div class="brand-logos"> <picture> <img src="assets/images/icons/amazon.svg" width="217" height="65" alt="Amazon"> </picture> <picture> <img src="assets/images/icons/digital-dilemma.svg" width="193" height="70" alt="Digital Dilemma"> </picture> <picture> <img src="assets/images/icons/stripe.svg" width="150" height="62" alt="Stripe"> </picture> <picture> <img src="assets/images/icons/commonwealth-bank.svg" width="200" height="69" alt="Commonwealth Bank"> </picture> <picture> <img src="assets/images/icons/bounce-pay.svg" width="228" height="37" alt="BouncePay"> </picture> </div> <div class="brand-logos"> <picture> <img src="assets/images/icons/amazon.svg" width="217" height="65" alt="Amazon"> </picture> <picture> <img src="assets/images/icons/digital-dilemma.svg" width="193" height="70" alt="Digital Dilemma"> </picture> <picture> <img src="assets/images/icons/stripe.svg" width="150" height="62" alt="Stripe"> </picture> <picture> <img src="assets/images/icons/commonwealth-bank.svg" width="200" height="69" alt="Commonwealth Bank"> </picture> <picture> <img src="assets/images/icons/bounce-pay.svg" width="228" height="37" alt="BouncePay"> </picture> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <picture class="footer-brand"> <img src="assets/images/brand-logo.svg" width="317" height="38" alt="ModelReef"> </picture> <div class="footer-wrap"> <div class="footer-nav"> <div class="footer-title">General</div> <ul class="footer-menu-list"> <li><a class="footer-menu-link" href="/">About Us</a></li> <li><a class="footer-menu-link" href="/">Security</a></li> <li><a class="footer-menu-link" href="/">Terms and Conditions</a></li> <li><a class="footer-menu-link" href="/">Privacy Policy</a></li> <li><a class="footer-menu-link" href="/">About Beta</a></li> </ul> </div> <div class="footer-nav"> <div class="footer-title">Use Cases</div> <ul class="footer-menu-list"> <li><a class="footer-menu-link" href="/">Three Statement</a></li> <li><a class="footer-menu-link" href="/">Business Valuation</a></li> <li><a class="footer-menu-link" href="/">Discounted Cashflow</a></li> <li><a class="footer-menu-link" href="/">Investment Screening</a></li> <li><a class="footer-menu-link" href="/">Business Casing</a></li> <li><a class="footer-menu-link" href="/">Scenario Analysis</a></li> <li><a class="footer-menu-link" href="/">Lending</a></li> <li><a class="footer-menu-link" href="/">Cashflow Forecasting</a></li> <li><a class="footer-menu-link" href="/">Stock Valuation</a></li> <li><a class="footer-menu-link" href="/">Budgeting</a></li> </ul> </div> <div class="footer-nav"> <div class="footer-title">Resources</div> <ul class="footer-menu-list mb-30"> <li><a class="footer-menu-link" href="/">Blogs</a></li> <li><a class="footer-menu-link" href="/">Help</a></li> </ul> <div class="footer-title">Contact</div> <ul class="footer-menu-list"> <li><a class="footer-menu-link" href="/">Sales</a></li> <li><a class="footer-menu-link" href="/">Support</a></li> <li><a class="footer-menu-link" href="/">Press</a></li> </ul> </div> <div class="footer-nav"> <div class="footer-title">Plans</div> <ul class="footer-menu-list mb-30"> <li><a class="footer-menu-link" href="/">Pricing</a></li> <li><a class="footer-menu-link" href="/">Funds and Companies</a></li> <li><a class="footer-menu-link" href="/">Professional</a></li> </ul> <div class="footer-title">Legal</div> <ul class="footer-menu-list"> <li><a class="footer-menu-link" href="/">Privacy Policy</a></li> <li><a class="footer-menu-link" href="/">Terms & Conditions</a></li> </ul> </div> </div> </div> <div class="copyright"> <div class="container"> <p>© 2025 Copyright Modelreef. All Rights Reserved</p> </div> </div> </footer> </div> <script src="assets/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js" integrity="sha512-P2IDYZfqSwjcSjX0BKeNhwRUH8zRPGlgcWl5n6gBLzdi4Y5/0O4zaXrtO4K9TZK6Hn1BenYpKowuCavNandERg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="assets/js/script.js"></script></body></html>```Smooth animation in GSAP in html project

Show full message

62d ago

Animation Features

Technical Improvements

Key Animation Highlights

Animation Features

Technical Improvements

Key Animation Highlights