steven
4d30803b60
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
419 lines
14 KiB
HTML
419 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description"
|
|
content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality. ">
|
|
<meta name="author" content="Webpixels">
|
|
<title>about us Page</title>
|
|
|
|
<link type="text/css" href="../assets/vendor/icon/iconfont.css" rel="stylesheet">
|
|
<link type="text/css" href="../assets/css/style.css" rel="stylesheet">
|
|
<!-- Theme CSS -->
|
|
<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/academy.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body class="aifo-bg-primary">
|
|
<div id="nav-container"></div>
|
|
|
|
<main class="main" id="about_us">
|
|
<!-- banner start -->
|
|
<div class="academy-block-1">
|
|
<div class="container">
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<h1 class="hero-title" id="hero-title">Meet The<span class="text-orange">AIFO Team</span></h1>
|
|
<div class="hero-image-container">
|
|
|
|
<img src="../assets/images/demo/about_us.png" class="">
|
|
</div>
|
|
</div>
|
|
</section><!-- Empowering Section -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empowering Section -->
|
|
|
|
<section class="empowering-section">
|
|
<div class="container">
|
|
<h2 class="section-title" id="empowering-title">Empowering Your<br>
|
|
<span class="text-orange">Trading Journey</span>
|
|
</h2>
|
|
<p class="section-subtitle" id="empowering-subtitle">With Expertise And Innovation</p>
|
|
<p class="section-description" id="empowering-description">Here at AIFO, our team consists of experienced
|
|
traders and financial professionals who truly understand the markets. We're committed to supporting your
|
|
growth with clear rules, practical tools, and quality educational resources. Our goal is simple: to help you
|
|
become a more confident and consistent trader.</p>
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4 mb-lg-0">
|
|
<div class="info-card">
|
|
<div class="info-card-icon">
|
|
<img class="lazy-img" src="../assets/images/backgrounds/icon/icon-em-1.svg"
|
|
alt="AIFO preview thumbnail">
|
|
</div>
|
|
<h3 class="info-card-title" id="mission-title">Our <span class="text-orange">Mission</span></h3>
|
|
<p class="info-card-text" id="mission-text">
|
|
At our core, we are dedicated to empowering traders with transparent funding opportunities, intuitive
|
|
tools, and continuous learning support. We strive to make professional trading accessible to all by
|
|
removing traditional barriers and nurturing a community built on trust, growth, and shared success.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="info-card">
|
|
<div class="info-card-icon">
|
|
<img class="lazy-img" src="../assets/images/backgrounds/icon/icon-em-2.svg"
|
|
alt="AIFO preview thumbnail">
|
|
</div>
|
|
<h3 class="info-card-title" id="vision-title">Our <span class="text-orange">Vision</span></h3>
|
|
<p class="info-card-text" id="vision-text">
|
|
We envision a future where every trader, regardless of background or experience, can achieve financial
|
|
independence and trading mastery. Through innovation, education, and unwavering support, we aim to
|
|
become the most trusted and trader-centric platform in the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Section -->
|
|
<section class="team-section">
|
|
<div class="container">
|
|
<h2 class="section-title">
|
|
Meet The <span class="text-orange">Team</span><br>
|
|
Behind AIFO
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="team-carousel-wrapper js-marquee">
|
|
<div class="team-carousel">
|
|
<div class="team-image-container"><img src="../assets/images/demo/team-1.png"></div>
|
|
<div class="team-image-container"><img src="../assets/images/demo/team-2.png"></div>
|
|
<div class="team-image-container"><img src="../assets/images/demo/team-3.png"></div>
|
|
<!-- <div class="team-image-container"><img src="../assets/images/demo/team-3.png"></div> -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<section class="section" id="stories">
|
|
<div class="container container-narrow fade-in show" id="storiesBlock">
|
|
<h1 class="heading h1 fade-in show">Company <span class="text-orange">News</span> </h1>
|
|
<div class="growth-carousel mt-3">
|
|
<div class="d-flex align-items-center justify-content-between mb-7">
|
|
|
|
<div class="growth-controls">
|
|
<button class="btn growthPrev" id="growthPrev"></button>
|
|
<button class="btn growthNext" id="growthNext"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-wrapper">
|
|
|
|
|
|
<div class="gradient-left"></div>
|
|
<div class="gradient-right"></div>
|
|
|
|
|
|
<div class="carousel-container-1">
|
|
<div class="carousel-track" style="transform: translateX(-642px);">
|
|
<!-- Page 1 -->
|
|
<div class="carousel-item fade-in show">
|
|
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Torem ipsum</h2>
|
|
<p class="fade-in show">“ I've been trading for years, and this is by far the best experience I've had
|
|
with a prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 2 -->
|
|
<div class="carousel-item fade-in show">
|
|
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Torem ipsum</h2>
|
|
<p class="fade-in show">“ I've been trading for years, and this is by far the best experience I've had
|
|
with a prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 3 -->
|
|
<div class="carousel-item fade-in show">
|
|
<img class="left-img" src="../assets/images/demo/new_1.png" alt="">
|
|
<div class="content">
|
|
<h2>Torem ipsum</h2>
|
|
<p class="fade-in">“ I've been trading for years, and this is by far the best experience I've had with a
|
|
prop firm.” .</p>
|
|
<!-- <button class="btn-watch">▶ Watch On YouTube</button> -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="dots">
|
|
<div class="dot"></div>
|
|
<div class="dot active"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="section-10" class="slice slice-lg d-flex align-items-center">
|
|
<div class="bg-orange-light"></div>
|
|
<div class="container">
|
|
<div class="mb-md text-center fade-in">
|
|
<h1 class="heading h1">Join <img src="../assets/images/backgrounds/Frame 1000008381.png" alt="Funded Trading"
|
|
class="tx-img floating-img"></h1>
|
|
<h1 class="heading h1"> <img src="../assets/images/backgrounds/Frame 1000008386.png" alt="Funded Trading"
|
|
class="zfj-img floating-img"><span class="text-orange">Our Community</span></h1>
|
|
<div class="fluid-paragraph text-center mt-4">
|
|
<p class="lead lh-180">
|
|
Join a <span class="text-orange">supportive network</span> of traders where you can <br>share insights,
|
|
learn together, and celebrate <br>every step of your journey.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center ">
|
|
<div class="col-auto">
|
|
<div class="hero-buttons d-flex flex-wrap justify-content-center fade-in">
|
|
<a href="#" class="btn btn-start-challenge d-flex align-items-center justify-content-center"><img
|
|
src="../assets/images/backgrounds/btn-icon-1.png" alt="Funded Trading"> Join Discord</a>
|
|
<a href="#" class="btn btn-free-trial">
|
|
<span class="btn-join-telegram-icon"></span>
|
|
<!--<img src="../assets/images/backgrounds/btn-icon-2.png" alt="Funded Trading" class="floating-img"> -->
|
|
Join Telegram
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div id="footer-container"></div>
|
|
|
|
<!-- Core -->
|
|
<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>
|
|
<!-- FontAwesome 5 -->
|
|
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
|
<!-- Page plugins -->
|
|
<script src="../assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
|
|
<script src="../assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
|
|
<script src="../assets/vendor/input-mask/input-mask.min.js"></script>
|
|
<script src="../assets/vendor/nouislider/js/nouislider.min.js"></script>
|
|
<script src="../assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
|
|
<!-- Theme JS -->
|
|
<script src="../assets/js/theme.js"></script>
|
|
<!-- Top code bar behavior -->
|
|
|
|
<script src="/js/layout.js"></script>
|
|
</body>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
function setupFadeInObserver(selector = ".carousel-item") {
|
|
const items = document.querySelectorAll(selector);
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries, obs) => {
|
|
entries.forEach(entry => {
|
|
// if (entry.isIntersecting) {
|
|
entry.target.classList.add("fade-in");
|
|
entry.target.classList.add("show");
|
|
obs.unobserve(entry.target);
|
|
// }
|
|
});
|
|
},
|
|
{
|
|
root: document.querySelector(".carousel-container-1"),
|
|
threshold: 0.5
|
|
}
|
|
);
|
|
|
|
items.forEach(item => observer.observe(item));
|
|
}
|
|
|
|
/* ===========================================================
|
|
Initialization
|
|
=========================================================== */
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
|
|
|
|
const carousel = new Carousel({
|
|
container: ".carousel-container-1",
|
|
prev: "growthPrev",
|
|
next: "growthNext",
|
|
dots: ".dots"
|
|
});
|
|
|
|
setTimeout(() => {
|
|
carousel.goTo(0);
|
|
}, 50);
|
|
|
|
|
|
|
|
setupFadeInObserver(".carousel-item");
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
(function ($) {
|
|
|
|
$.fn.aifoMarquee = function () {
|
|
|
|
return this.each(function () {
|
|
|
|
const $wrapper = $(this);
|
|
const $track = $wrapper.find('.team-carousel');
|
|
const originalHTML = $track.html();
|
|
const originalCount = $track.children().length;
|
|
|
|
/* ===== autoplay rule by count ===== */
|
|
const isMobile = !matchMedia('(hover: hover)').matches;
|
|
let autoPlayEnabled = false;
|
|
|
|
if (isMobile) {
|
|
autoPlayEnabled = originalCount > 2;
|
|
} else {
|
|
autoPlayEnabled = originalCount >= 3;
|
|
}
|
|
|
|
if (!autoPlayEnabled && originalCount <= 1) return;
|
|
|
|
/* ===== clone until enough ===== */
|
|
while ($track[0].scrollWidth < window.innerWidth * 2) {
|
|
$track.append(originalHTML);
|
|
}
|
|
|
|
/* one full logical loop width */
|
|
const loopWidth = $track[0].scrollWidth / ($track.children().length / originalCount);
|
|
|
|
/* ===== state ===== */
|
|
let position = 0;
|
|
let speed = 0.6;
|
|
let baseSpeed = 0.6;
|
|
let targetSpeed = baseSpeed;
|
|
|
|
let isDragging = false;
|
|
let isInView = false;
|
|
|
|
let lastX = 0, lastTime = 0, velocity = 0;
|
|
|
|
/* Disable native img drag */
|
|
$wrapper.find('img').on('dragstart', e => {
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
|
|
/* Hover ease (PC only) */
|
|
if (!isMobile) {
|
|
$wrapper.on('mouseenter',()=>targetSpeed=0)
|
|
.on('mouseleave',()=>targetSpeed=baseSpeed);
|
|
}
|
|
|
|
/* Drag start */
|
|
$wrapper.on('mousedown touchstart', e => {
|
|
if (e.type === 'mousedown' && e.which !== 1) return;
|
|
e.preventDefault();
|
|
|
|
isDragging = true;
|
|
targetSpeed = 0;
|
|
|
|
lastX = e.pageX || e.originalEvent.touches[0].pageX;
|
|
lastTime = Date.now();
|
|
velocity = 0;
|
|
|
|
$wrapper.addClass('dragging');
|
|
});
|
|
|
|
/* Drag move */
|
|
$(document).on('mousemove touchmove', e => {
|
|
if (!isDragging) return;
|
|
|
|
const x = e.pageX || e.originalEvent.touches[0].pageX;
|
|
const dx = x - lastX;
|
|
const dt = Date.now() - lastTime || 16;
|
|
|
|
velocity = dx / dt * 16;
|
|
position += dx;
|
|
|
|
lastX = x;
|
|
lastTime = Date.now();
|
|
});
|
|
|
|
/* Drag end */
|
|
$(document).on('mouseup touchend touchcancel', () => {
|
|
if (!isDragging) return;
|
|
|
|
isDragging = false;
|
|
speed = Math.min(8, Math.max(Math.abs(velocity), baseSpeed));
|
|
speed *= velocity < 0 ? -1 : 1;
|
|
targetSpeed = baseSpeed;
|
|
|
|
$wrapper.removeClass('dragging');
|
|
});
|
|
|
|
/* viewport observer */
|
|
const observer = new IntersectionObserver(entries=>{
|
|
entries.forEach(e=>{
|
|
if (e.isIntersecting) {
|
|
isInView = true;
|
|
requestAnimationFrame(loop);
|
|
} else {
|
|
isInView = false;
|
|
}
|
|
});
|
|
},{threshold:.3});
|
|
observer.observe(this);
|
|
|
|
/* loop */
|
|
function loop() {
|
|
if (isInView && !isDragging && autoPlayEnabled) {
|
|
position -= speed;
|
|
speed += (targetSpeed - speed) * 0.08;
|
|
}
|
|
|
|
position = ((position % loopWidth) + loopWidth) % loopWidth;
|
|
position -= loopWidth;
|
|
|
|
$track.css('transform',`translateX(${position}px)`);
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
})(jQuery);
|
|
|
|
$(function(){
|
|
$('.js-marquee').aifoMarquee();
|
|
});
|
|
</script>
|
|
|
|
|
|
</html> |