steven/aifo-portal-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 4page

Browse Source
This commit is contained in:
Steven.yang
2026-07-02 18:15:06 +08:00
parent 4d30803b60
commit 296db4a164
53 changed files with 5271 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+132 -48
View File
@@ -10,6 +10,7 @@
<link href="./assets/css/style.css" rel="stylesheet">
<link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
<link type="text/css" href="./assets/css/index.css" rel="stylesheet">
<link type="text/css" href="./assets/css/modules/home-hero-carousel.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
onerror="this.onerror=null;this.href='/assets/flag-icons.min.css';">
</head>
@@ -58,62 +59,144 @@
<main class="main" id="homepage">
<!-- banner start -->
<!-- <img
src="./assets/images/backgrounds/20251203-153844.webp"
class="hero-bg"
alt=""
fetchpriority="high"
loading="eager"
decoding="async"
> -->
<img
src="./assets/images/banner/20260702-151441.png"
class="hero-bg"
alt=""
fetchpriority="high"
loading="eager"
decoding="async"
>
<!-- \assets\images\banner -->
<!-- banner start (Figma hero carousel) -->
<div class="block-1" id="block-1">
<!-- Home hero carousel — from Serena/Figma HeroCarousel (3 slides, autoplay + dots) -->
<section
id="section-1"
class="home-hero-carousel"
data-home-hero-carousel
aria-roledescription="carousel"
aria-label="Homepage hero"
>
<div class="home-hero-carousel__glow" aria-hidden="true"></div>
<section id="section-1" class="funded-trading-hero spotlight parallax bg-cover bg-size--cover" >
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<!-- Icons -->
<h1 class="hero-title fade-in">
<span class="line1 fade-in"><img src="./assets/images/backgrounds/img-02.png" alt="Funded Trading" class="hero-img floating-img"> Your First Step</span>
<span class="line2 fade-in">Toward <span class="text-primary-orange">Funded Trading</span></span>
<div class="home-hero-carousel__inner">
<div class="home-hero-carousel__viewport">
<article class="home-hero-carousel__slide is-active" data-home-hero-slide aria-hidden="false">
<div class="home-hero-carousel__slide-grid">
<div class="home-hero-carousel__content">
<div class="home-hero-carousel__copy">
<div class="home-hero-carousel__heading-group">
<span class="home-hero-carousel__badge">
<img src="./assets/images/banner/logo-1-icon.svg" alt="" class="home-hero-carousel__badge-icon" width="20" height="20" decoding="async" aria-hidden="true">
Forex . Gold . Crypto
</span>
<h1 class="home-hero-carousel__title">
Your Trading Journey <span class="text-primary-orange">Starts With AIFO</span>
</h1>
<div class="banner-contain d-flex align-items-center justify-content-center flex-wrap mt-6">
<img src="./assets/images/backgrounds/img-03.png" alt="" class="img-fluid img-fluid-l me-5 floating-img fade-in" >
<div class="text-center mx-4 fade-in">
<div class="mb-3">
<div class="banner-desc fade-in">
Join thousands of traders who started with AIFO and discover the
<span class="text-primary-orange">capital</span>,
<span class="text-primary-orange">tools</span>, and
<span class="text-primary-orange">expert </span><br><span class="text-primary-orange">guidance</span> you need to grow and thrive.
</div>
</div>
<div class="trustpilot text-primary d-flex align-items-center justify-content-center gap-2 flex-wrap fade-in">
<span>Rated Excellent </span>
<span class="pd-lr-1"><img src="./assets/images/backgrounds/img-05.png" alt="Star" class="star-icon"></span>
<span class="pd-lr-1 underline-text"> 43,636 reviews on</span>
<span><a href="https://www.trustpilot.com/" target="_blank"><img src="./assets/images/backgrounds/Frame 427320868.svg" alt="Star" class="star-icon" ></a></span>
</div>
</div>
<img src="./assets/images/backgrounds/img-h-04.png" alt="" class="img-fluid img-fluid-r ms-5 floating-img fade-in">
</div>
<!-- Buttons -->
<div class="hero-buttons center-buttons fade-in">
<a href="#" class="btn btn-start-challenge">Start Challenge</a>
<a href="#" class="btn btn-free-trial">
Free Trial
<span class="btn-arrow">›</span>
</a>
</div>
</div>
<p class="home-hero-carousel__desc">Join thousands of traders who started with AIFO and discover the capital, tools, and expert guidance you need to grow and thrive.</p>
</div>
<div class="home-hero-carousel__actions">
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--primary">Start Challenge</a>
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--ghost">
Learn To Trade
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
<a href="#" class="home-hero-carousel__ai-coach">
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="48" height="48" decoding="async">AI Coach
</a>
</div>
</div>
</section>
<div class="home-hero-carousel__visual">
<img src="./assets/images/home-hero-carousel/slide-1.png" alt="AIFO trading globe" width="520" height="477" decoding="async">
</div>
</div>
</article>
<article class="home-hero-carousel__slide" data-home-hero-slide aria-hidden="true">
<div class="home-hero-carousel__slide-grid">
<div class="home-hero-carousel__content">
<div class="home-hero-carousel__copy">
<div class="home-hero-carousel__heading-group">
<span class="home-hero-carousel__badge">
<img src="./assets/images/banner/login-2-icon.svg" alt="" class="home-hero-carousel__badge-icon" width="20" height="20" decoding="async" aria-hidden="true">
Real-time Market Analysis
</span>
<h2 class="home-hero-carousel__title">
Meet <span class="text-primary-orange">AIFO Intelligence</span>
</h2>
</div>
<p class="home-hero-carousel__desc">Begin using Prop Trading's very first AI Coach, designed to help you conduct complex market analysis and guide you toward becoming a funded trader.</p>
</div>
<div class="home-hero-carousel__actions">
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--primary">Try For Free</a>
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--ghost home-hero-carousel__btn--ai-coach">
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="45" height="45" decoding="async" aria-hidden="true">
AI Coach
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
<div class="home-hero-carousel__visual">
<img src="./assets/images/home-hero-carousel/slide-2.png" alt="AIFO AI Coach" width="520" height="477" decoding="async">
</div>
</div>
</article>
<article class="home-hero-carousel__slide" data-home-hero-slide aria-hidden="true">
<div class="home-hero-carousel__slide-grid">
<div class="home-hero-carousel__content">
<div class="home-hero-carousel__copy">
<div class="home-hero-carousel__heading-group">
<span class="home-hero-carousel__badge">
<img src="./assets/images/banner/login-3-icon.svg" alt="" class="home-hero-carousel__badge-icon" width="20" height="20" decoding="async" aria-hidden="true">
Become a Funded Trader
</span>
<h2 class="home-hero-carousel__title">
<span class="text-primary-orange">Flexible Challenges</span> Made For You
</h2>
</div>
<p class="home-hero-carousel__desc">We offer a wide variety of different challenge types, from the traditional 1-step, 2-step, and 3-step challenges to our instant-access and Lite challenges, designed to suit your experience and goals.</p>
</div>
<div class="home-hero-carousel__actions">
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--primary">
Choose Your Challenge
</a>
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--ghost home-hero-carousel__btn--ai-coach">
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="45" height="45" decoding="async" aria-hidden="true">
AI Coach
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
<div class="home-hero-carousel__visual">
<img src="./assets/images/home-hero-carousel/slide-3.png" alt="AIFO flexible challenges dashboard" width="520" height="477" decoding="async">
</div>
</div>
</article>
</div>
<div class="home-hero-carousel__dots" role="tablist" aria-label="Choose slide">
<button type="button" class="home-hero-carousel__dot is-active" role="tab" aria-selected="true" aria-label="Go to slide 1" data-home-hero-dot="0"></button>
<button type="button" class="home-hero-carousel__dot" role="tab" aria-selected="false" aria-label="Go to slide 2" data-home-hero-dot="1"></button>
<button type="button" class="home-hero-carousel__dot" role="tab" aria-selected="false" aria-label="Go to slide 3" data-home-hero-dot="2"></button>
</div>
</div>
</section>
<!-- Number Statistics Section -->
<section id="section-2" class="fade-in">
<section id="section-2" class="fade-in" style="display: none;">
<div class="container">
<div class="row justify-content-center text-center">
@@ -1192,6 +1275,7 @@
<script src="./assets/vendor/jquery/jquery-3.7.1.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<script src="/js/home-hero-carousel.js"></script>
<!-- FontAwesome 5 -->
<script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->