芝麻web文件管理V1.00

编辑当前文件:/home/paymbalq/tamela.org/index1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tamela Health - AI-Assisted Maternal Care</title>
    <style>
        :root {
            --primary-color: #292E75;
            --secondary-color: #D86735;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --gray-color: #6c757d;
            --white-color: #ffffff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            line-height: 1.6;
            color: var(--dark-color);
            background-color: var(--light-color);
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header Styles */
        header {
            background-color: var(--white-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }
        
        .logo {
            max-width: 180px;
            height: auto;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
        }
        
        .nav-item {
            margin-left: 2rem;
        }
        
        .nav-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-link:hover {
            color: var(--secondary-color);
        }
        
        .hamburger {
            display: none;
            cursor: pointer;
        }
        
        .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            transition: all 0.3s ease;
            background-color: var(--primary-color);
        }
        
        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-color) 0%, rgba(41, 46, 117, 0.8) 100%);
            color: var(--white-color);
            padding: 8rem 0 5rem;
            text-align: center;
        }
        
        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: var(--secondary-color);
            color: var(--white-color);
        }
        
        .btn-primary:hover {
            background-color: #c45526;
            transform: translateY(-3px);
        }
        
        /* Problem Section */
        .problem {
            padding: 5rem 0;
            background-color: var(--white-color);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: var(--primary-color);
        }
        
        .section-title h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        
        .section-title .divider {
            width: 80px;
            height: 4px;
            background-color: var(--secondary-color);
            margin: 0 auto;
        }
        
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 2rem;
        }
        
        .stat-box {
            flex: 0 0 calc(33.33% - 2rem);
            text-align: center;
            padding: 1.5rem;
            margin: 1rem;
            background-color: var(--light-color);
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary-color);
            margin-bottom: 0.5rem;
        }
        
        .stat-text {
            color: var(--gray-color);
            font-size: 1rem;
        }
        
        /* Solution Section */
        .solution {
            padding: 5rem 0;
            background-color: #f0f2ff;
        }
        
        .solution-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
        }
        
        .solution-image {
            flex: 1;
            min-width: 300px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .solution-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .solution-text {
            flex: 1;
            min-width: 300px;
        }
        
        .solution-text h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
        
        .solution-text ul {
            list-style-type: none;
            margin-top: 1.5rem;
        }
        
        .solution-text li {
            margin-bottom: 0.8rem;
            position: relative;
            padding-left: 1.5rem;
        }
        
        .solution-text li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--secondary-color);
        }
        
        /* Impact Section */
        .impact {
            padding: 5rem 0;
            background-color: var(--white-color);
        }
        
        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background-color: var(--primary-color);
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -2px;
        }
        
        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            left: 50%;
        }
        
        .timeline-content {
            padding: 20px;
            background-color: var(--light-color);
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        
        .timeline-content h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .timeline-content p {
            margin-bottom: 0;
        }
        
        .timeline-item::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: var(--secondary-color);
            border-radius: 50%;
            top: 15px;
            z-index: 1;
        }
        
        .left::after {
            right: -10px;
        }
        
        .right::after {
            left: -10px;
        }
        
        /* Team Section */
        .team {
            padding: 5rem 0;
            background-color: #f0f2ff;
        }
        
        .team-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .team-member {
            flex: 0 0 calc(33.33% - 2rem);
            min-width: 250px;
            text-align: center;
        }
        
        .team-photo {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 1rem;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--primary-color);
        }
        
        .team-photo img {
            width: 100%;
            height: auto;
        }
        
        .team-name {
            color: var(--primary-color);
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
        
        .team-role {
            color: var(--secondary-color);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .team-bio {
            font-size: 0.9rem;
            color: var(--gray-color);
        }
        
        /* Contact Section */
        .contact {
            padding: 5rem 0;
            background-color: var(--white-color);
        }
        
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem;
            background-color: var(--light-color);
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-control {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        .btn-submit {
            background-color: var(--primary-color);
            color: var(--white-color);
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            width: 100%;
        }
        
        .btn-submit:hover {
            background-color: #232867;
            transform: translateY(-3px);
        }
        
        /* Footer */
        footer {
            background-color: var(--primary-color);
            color: var(--white-color);
            padding: 3rem 0 1.5rem;
        }
        
        .footer-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .footer-column {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-title {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .footer-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: var(--secondary-color);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--white-color);
        }
        
        .contact-info p {
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
        }
        
        .social-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .social-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white-color);
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .social-icon:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* Responsive Styles */
        @media (max-width: 991px) {
            .timeline::after {
                left: 31px;
            }
            
            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }
            
            .timeline-item.right {
                left: 0;
            }
            
            .timeline-item.left::after,
            .timeline-item.right::after {
                left: 22px;
            }
        }
        
        @media (max-width: 768px) {
            .hamburger {
                display: block;
            }
            
            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active .bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }
            
            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
            
            .nav-menu {
                position: absolute;
                left: -100%;
                top: 70px;
                gap: 0;
                flex-direction: column;
                background-color: var(--white-color);
                width: 100%;
                text-align: center;
                transition: 0.3s;
                box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
                padding: 2rem 0;
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .nav-item {
                margin: 1.5rem 0;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .stat-box {
                flex: 0 0 calc(100% - 2rem);
            }
        }
        
        @media (max-width: 576px) {
            .hero {
                padding: 7rem 0 4rem;
            }
            
            .section-title h2 {
                font-size: 1.5rem;
            }
            
            .team-member {
                flex: 0 0 100%;
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">
                    <img src="images/Tamela Logo-Main-Transparent.png" alt="Tamela Health Logo">
                </a>
                <ul class="nav-menu">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#problem" class="nav-link">Problem</a></li>
                    <li class="nav-item"><a href="#solution" class="nav-link">Solution</a></li>
                    <li class="nav-item"><a href="#impact" class="nav-link">Impact</a></li>
                    <li class="nav-item"><a href="#team" class="nav-link">Team</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>AI-Powered Solutions for Maternal & Infant Health</h1>
                <p>Tamela provides real-time analysis of ultrasound scans and CTG graphs, helping healthcare professionals detect pregnancy complications early and save lives.</p>
                <a href="#contact" class="btn btn-primary">Partner With Us</a>
            </div>
        </div>
    </section>

<section id="problem" class="problem">
        <div class="container">
            <div class="section-title">
                <h2>The Challenge We're Addressing</h2>
                <div class="divider"></div>
            </div>
            <p>Maternal and fetal mortality remain critical healthcare challenges, with about 2 million children and over 250,000 mothers dying during childbirth in Africa every year. This is due to heavy workloads for radiologists and obstetricians, with almost 50 million babies born yearly. Many pregnancy complications are often missed or diagnosed late due to manual ultrasound interpretation and resource constraints.</p>
            
            <div class="stats-container">
                <div class="stat-box">
                    <div class="stat-number">2M+</div>
                    <div class="stat-text">Children lost during childbirth in Africa annually</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">250K+</div>
                    <div class="stat-text">Mothers die during childbirth in Africa annually</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number">50M+</div>
                    <div class="stat-text">Babies born yearly in Africa</div>
                </div>
            </div>
        </div>
    </section>

<section id="solution" class="solution">
        <div class="container">
            <div class="section-title">
                <h2>Our AI-Powered Solution</h2>
                <div class="divider"></div>
            </div>
            <div class="solution-content">
                <div class="solution-image">
                    <img src="images/solution-image.jpg" alt="Tamela AI Solution for Ultrasound Analysis">
                </div>
                <div class="solution-text">
                    <h3>Advanced Diagnostic Support for Healthcare Professionals</h3>
                    <p>Tamela provides real-time analysis of ultrasound scans and CTG graphs, helping healthcare professionals evaluate key pregnancy health indicators. Our AI models analyze diagnostic planes, fetal anatomy, orientation, placenta localisation, and liquor volume, among other parameters, to ensure early detection of potential risks.</p>
                    <ul>
                        <li>Real-time analysis of ultrasound scans</li>
                        <li>Early detection of potential complications</li>
                        <li>Seamless integration with existing hospital workflows</li>
                        <li>Supports healthcare professionals without disrupting standard processes</li>
                        <li>Improves maternal and infant health outcomes</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

<section id="impact" class="impact">
        <div class="container">
            <div class="section-title">
                <h2>Our Impact Vision</h2>
                <div class="divider"></div>
            </div>
            <div class="timeline">
                <div class="timeline-item left">
                    <div class="timeline-content">
                        <h3>One Year</h3>
                        <p>Assist 10,000 pregnancies, reducing maternal-fetal complications through early detection.</p>
                    </div>
                </div>
                <div class="timeline-item right">
                    <div class="timeline-content">
                        <h3>Five Years</h3>
                        <p>Target 500,000+ pregnancies across Africa, significantly lowering maternal and infant mortality rates.</p>
                    </div>
                </div>
                <div class="timeline-item left">
                    <div class="timeline-content">
                        <h3>Key Measures</h3>
                        <p>Lives saved, reduced misdiagnosis rates, improved pregnancy outcomes, and revenue growth from hospital partnerships.</p>
                    </div>
                </div>
                <div class="timeline-item right">
                    <div class="timeline-content">
                        <h3>Market Size</h3>
                        <p>Global Mother and Child Healthcare Market valued at USD 723.67 Billion in 2023.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="team" class="team">
        <div class="container">
            <div class="section-title">
                <h2>Our Team</h2>
                <div class="divider"></div>
            </div>
            <p>Our team combines expertise in AI, healthcare, and business strategy to enhance maternal-fetal care.</p>
            <div class="team-container">
                <div class="team-member">
                    <div class="team-photo">AA</div>
                    <h3 class="team-name">Adewunmi Adeagbo</h3>
                    <p class="team-role">CEO & Founder</p>
                    <p class="team-bio">Seasoned entrepreneur and Techstars alum with a passion for healthcare innovation.</p>
                </div>
                <div class="team-member">
                    <div class="team-photo">AE</div>
                    <h3 class="team-name">Dr. Ayomide Esan</h3>
                    <p class="team-role">Chief Medical Officer</p>
                    <p class="team-bio">Gynecologist committed to improving maternal health outcomes in Africa.</p>
                </div>
                <div class="team-member">
                    <div class="team-photo">OA</div>
                    <h3 class="team-name">Dr. Oyebanke Abejirin</h3>
                    <p class="team-role">Strategy Lead</p>
                    <p class="team-bio">Development economist ensuring scalability and impact of our solutions.</p>
                </div>
                <div class="team-member">
                    <div class="team-photo">SO</div>
                    <h3 class="team-name">Samson Owoka</h3>
                    <p class="team-role">Product Lead</p>
                    <p class="team-bio">Drives product innovation with a focus on user experience and clinical efficiency.</p>
                </div>
                <div class="team-member">
                    <div class="team-photo">OA</div>
                    <h3 class="team-name">Olugbenga Abejirin</h3>
                    <p class="team-role">AI Development Lead</p>
                    <p class="team-bio">Leads our AI development team with expertise in medical imaging analysis.</p>
                </div>
                <div class="team-member">
                    <div class="team-photo">DS</div>
                    <h3 class="team-name">Prof. Daniel Zewdneh Solomon</h3>
                    <p class="team-role">Advisor</p>
                    <p class="team-bio">Consultant Radiologist and Professor of Pediatric Radiology.</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
                <div class="divider"></div>
            </div>
            <div class="contact-form">
                <form id="contactForm">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <select class="form-control">
                            <option value="" disabled selected>I am a...</option>
                            <option value="Healthcare Provider">Healthcare Provider</option>
                            <option value="Hospital Administrator">Hospital Administrator</option>
                            <option value="Investor">Investor</option>
                            <option value="NGO">NGO</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" placeholder="Your Message" required></textarea>
                    </div>
                    <button type="submit" class="btn-submit">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3 class="footer-title">About Tamela</h3>
                    <p>Tamela Health is an AI-driven solution addressing critical challenges in maternal and infant healthcare. We empower medical staff to make timely and accurate decisions.</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon">f</a>
                        <a href="#" class="social-icon">in</a>
                        <a href="#" class="social-icon">t</a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3 class="footer-title">Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#problem">Problem</a></li>
                        <li><a href="#solution">Solution</a></li>
                        <li><a href="#impact">Impact</a></li>
                        <li><a href="#team">Team</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3 class="footer-title">Contact Info</h3>
                    <div class="contact-info">
                        <p>Email: dewunmi.adeagbo@tamela.org</p>
                        <p>Phone: +234 703 608 0117</p>
                        <p>Website: tamela.org</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2025 Tamela Health. All rights reserved.</p>
            </div>
        </div>
    </footer>