File size: 3,144 Bytes
5400cf3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import { useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import '../styles/AboutPage.css'
function AboutPage() {
const videoRef = useRef<HTMLVideoElement>(null)
const navigate = useNavigate()
useEffect(() => {
const hash = window.location.hash
if (hash === '#founders') {
const el = document.getElementById('founders-section')
el?.scrollIntoView({ behavior: 'smooth' })
}
const handleVisibility = () => {
if (videoRef.current) {
if (document.visibilityState === 'visible') {
videoRef.current.play().catch(() => {})
} else {
videoRef.current.pause()
}
}
}
document.addEventListener('visibilitychange', handleVisibility)
return () => {
document.removeEventListener('visibilitychange', handleVisibility)
}
}, [])
return (
<>
<video
ref={videoRef}
className="about-video"
autoPlay
loop
muted
playsInline
src="https://i.imgur.com/RCoLmZ9.mp4"
/>
{/* 🔼 Top navbar centered like on home screen */}
<div className="about-navbar-wrapper">
<div className="top-navbar">
<img
src="/Cropped_Image.png"
className="nav-logo"
alt="Logo"
onClick={() => navigate('/')}
/>
<span className="nav-link" onClick={() => navigate('/about')}>About</span>
<span className="nav-link" onClick={() => navigate('/about#founders')}>Founders</span>
</div>
</div>
<div className="about-page-scroll">
<section className="about-section" id="about-section">
<h1>About <span className="highlight">FinTrack</span></h1>
<p>
FinTrack is an intuitive, natural-language–powered stock strategy builder.
Just describe your idea — whether it’s backtesting a moving average crossover,
analyzing tech stocks, or deploying a momentum strategy — and our AI handles the rest.
</p>
</section>
<section className="founders-section" id="founders-section">
<h2>Founders</h2>
<p>Meet the team behind FinTrack:</p>
<ul>
<li><a href="https://www.linkedin.com/in/vishruthg/" target="_blank" rel="noopener noreferrer"><strong>Vishruth</strong></a> – Frontend</li>
<li><a href="https://www.linkedin.com/in/ronilmitra/" target="_blank" rel="noopener noreferrer"><strong>Ronil</strong></a> – Frontend</li>
<li><a href="https://www.linkedin.com/in/kalyan-archakam/" target="_blank" rel="noopener noreferrer"><strong>Kalyan</strong></a> – Backend</li>
<li><a href="https://www.linkedin.com/in/sudhanva-deshpande-81a94a280/" target="_blank" rel="noopener noreferrer"><strong>Sudhanva</strong></a> – Backend</li>
<li><a href="https://www.linkedin.com/in/navan-dendukuri-64a03b360/" target="_blank" rel="noopener noreferrer"><strong>Navan</strong></a> – Backend</li>
</ul>
</section>
</div>
</>
)
}
export default AboutPage
|