custom1/link_accounts.html

612 lines
39 KiB
HTML

SafeValue must use [property]=binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Accounts</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-wrapper">
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="app-form"><h1>Unlock Your Financial Potential</h1><h2>Your Journey to Financial Empowerment</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></input></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></input></div></div><div class="form-group full-width"><label>Your Email Address</label><input id="email" type="email" placeholder="Your best email for updates"></input></div><h2>Your Contact Details</h2><div class="form-group full-width"><label>Mobile Phone Number</label><input id="phone" type="tel" placeholder="Your best contact number"></input></div><h2>Your Financial Aspirations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Briefly share your financial goals, what you hope to achieve with us, or why you're excited about AI-driven financial insights."></textarea></div><button type="submit">Start Your Financial Transformation</button></div>
<section class="linked-accounts-section">
<div class="container">
<header class="section-header">
<h2 class="section-title">Linked Accounts</h2>
<button class="add-account-button">Link New Account</button>
</header>
<div class="account-list-summary">
<p class="summary-text">Total linked accounts: <span class="summary-value">[X]</span></p>
<p class="summary-text">Total balance across accounts: <span class="summary-value">$X,XXX,XXX.XX</span></p>
</div>
<div class="account-list-grid">
<!-- Account Card 1 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-bank-logo-1.png" alt="Bank Logo" class="bank-logo">
<h3 class="account-institution">Apex Bank Corp</h3>
</div>
<div class="account-details">
<p class="account-name">Primary Checking (****1234)</p>
<p class="account-type">Checking Account</p>
<p class="account-balance">$12,345.67</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Account Card 2 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-bank-logo-2.png" alt="Bank Logo" class="bank-logo">
<h3 class="account-institution">Global Credit Union</h3>
</div>
<div class="account-details">
<p class="account-name">Savings for Travel (****5678)</p>
<p class="account-type">Savings Account</p>
<p class="account-balance">$5,432.10</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Account Card 3 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-investment-logo.png" alt="Investment Firm Logo" class="bank-logo">
<h3 class="account-institution">Horizon Investments</h3>
</div>
<div class="account-details">
<p class="account-name">Retirement Portfolio</p>
<p class="account-type">Brokerage Account</p>
<p class="account-balance">$123,456.78</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Placeholder for adding more accounts -->
<div class="account-card add-new-placeholder">
<button class="add-account-button-large">
<span class="icon">+</span>
<span>Link Another Account</span>
</button>
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troubleshooting Guide - Financial App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<a href="/" class="logo">FinTrackAI</a>
<nav aria-label="Main Navigation">
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Accounts</a></li>
<li><a href="#">Savings</a></li>
<li><a href="#">Advice</a></li>
<li><a href="#" aria-current="page">Help</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero-section" aria-labelledby="troubleshooting-hero-title">
<h1 id="troubleshooting-hero-title">How Can We Help You Today?</h1>
<p>Find answers to common questions about linking accounts, tracking expenses, investment advice, and more.</p>
</section>
<section class="search-bar" aria-labelledby="search-troubleshooting">
<h2 id="search-troubleshooting" class="sr-only">Search Troubleshooting Articles</h2> <!-- SR-only for accessibility -->
<input type="search" placeholder="Search for a problem or question..." aria-label="Search troubleshooting articles">
</section>
<section class="categories-section" aria-labelledby="troubleshooting-categories-title">
<h2 id="troubleshooting-categories-title" class="sr-only">Troubleshooting Categories</h2>
<div class="categories-grid">
<article class="category-card">
<h3>Account Linking Issues</h3>
<p>Problems connecting your bank or investment accounts via Plaid.</p>
</article>
<article class="category-card">
<h3>Expense Tracking</h3>
<p>Trouble with transactions, categorization, or missing data.</p>
</article>
<article class="category-card">
<h3>Savings & Forecasting</h3>
<p>Questions about savings goals, forecasts, or budget alerts.</p>
</article>
<article class="category-card">
<h3>AI Investment Advice</h3>
<p>Concerns or questions about AI-driven recommendations.</p>
</article>
<article class="category-card">
<h3>Security & Privacy</h3>
<p>Information on data security, privacy, and account protection.</p>
</article>
<article class="category-card">
<h3>Technical Problems</h3>
<p>App performance, error messages, or general bugs.</p>
</article>
</div>
</section>
<section class="faq-section" aria-labelledby="faq-title">
<h2 id="faq-title">Frequently Asked Questions</h2>
<div class="faq-list">
<div class="faq-item">
<h3 class="faq-question" id="faq1-question" role="button" aria-expanded="false" aria-controls="faq1-answer" tabindex="0">
My bank account isn't linking. What should I do?
</h3>
<div class="faq-answer" id="faq1-answer" aria-hidden="true" role="region" aria-labelledby="faq1-question">
<p>First, ensure your internet connection is stable. Then, double-check your banking credentials. If the issue persists, your bank might be experiencing temporary issues or require re-authentication. Try again after some time, or contact our support if it continues.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq2-question" role="button" aria-expanded="false" aria-controls="faq2-answer" tabindex="0">
How often is my financial data updated?
</h3>
<div class="faq-answer" id="faq2-answer" aria-hidden="true" role="region" aria-labelledby="faq2-question">
<p>Your financial data is typically updated multiple times a day, usually every 24 hours or upon logging into your FinTrackAI account. Some institutions may have specific update schedules.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq3-question" role="button" aria-expanded="false" aria-controls="faq3-answer" tabindex="0">
Can I manually add or edit transactions?
</h3>
<div class="faq-answer" id="faq3-answer" aria-hidden="true" role="region" aria-labelledby="faq3-question">
<p>Yes, you can manually add transactions that are not automatically imported. You can also edit existing transaction categories and add notes to help with better expense tracking.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq4-question" role="button" aria-expanded="false" aria-controls="faq4-answer" tabindex="0">
How does the AI investment advice work?
</h3>
<div class="faq-answer" id="faq4-answer" aria-hidden="true" role="region" aria-labelledby="faq4-question">
<p>Our AI analyzes your linked accounts, spending habits, financial goals, and risk tolerance to provide personalized investment recommendations. It leverages market data and financial models to suggest portfolio adjustments or savings strategies.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq5-question" role="button" aria-expanded="false" aria-controls="faq5-answer" tabindex="0">
Is my financial data secure?
</h3>
<div class="faq-answer" id="faq5-answer" aria-hidden="true" role="region" aria-labelledby="faq5-question">
<p>Absolutely. We use industry-standard encryption protocols (like AES-256) and security measures (like multi-factor authentication) to protect your data. We partner with reputable services like Plaid, which also adhere to strict security compliance.</p>
</div>
</div>
</div>
</section>
<section class="contact-support" aria-labelledby="contact-support-title">
<h2 id="contact-support-title">Still Need Help?</h2>
<p>If you can't find an answer to your question, our support team is ready to assist you.</p>
<a href="#" class="contact-button">Contact Support</a>
</section>
</main>
<footer>
<p>&copy; 2024 FinTrackAI. All rights reserved.</p>
</footer>
<script>
// JavaScript for FAQ Accordion functionality
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
// Toggle 'active' class on the clicked item
item.classList.toggle('active');
// Update ARIA attributes for accessibility
const isExpanded = item.classList.contains('active');
question.setAttribute('aria-expanded', isExpanded);
item.querySelector('.faq-answer').setAttribute('aria-hidden', !isExpanded);
});
// Add keyboard accessibility for FAQ questions
question.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault(); // Prevent scrolling for spacebar
item.classList.toggle('active');
const isExpanded = item.classList.contains('active');
question.setAttribute('aria-expanded', isExpanded);
item.querySelector('.faq-answer').setAttribute('aria-hidden', !isExpanded);
}
});
});
});
</script>
</body>
</html>
<section id="security-assurance" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Your Financial Security: Our Top Priority</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
At [Your Company Name], safeguarding your sensitive financial data is at the core of everything we do. We employ robust security measures to ensure your information remains confidential and protected.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Security Feature 1: Bank-Grade Encryption -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-blue-200 rounded-full mx-auto mb-4 flex items-center justify-center text-blue-800 text-2xl font-bold">
&#x1F512;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Bank-Grade Encryption</h3>
<p class="text-gray-600">All your data is encrypted using AES-256 protocols, the same standard used by leading financial institutions.</p>
</div>
<!-- Security Feature 2: Regular Security Audits -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-green-200 rounded-full mx-auto mb-4 flex items-center justify-center text-green-800 text-2xl font-bold">
&#x1F50E;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Regular Security Audits</h3>
<p class="text-gray-600">We undergo frequent third-party security audits and penetration testing to identify and address vulnerabilities.</p>
</div>
<!-- Security Feature 3: Strict Data Privacy -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-purple-200 rounded-full mx-auto mb-4 flex items-center justify-center text-purple-800 text-2xl font-bold">
&#x1F4AD;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Strict Data Privacy</h3>
<p class="text-gray-600">Your personal and financial data is never shared or sold to third parties. Your privacy is paramount.</p>
</div>
<!-- Security Feature 4: Secure API Integrations (Plaid) -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-red-200 rounded-full mx-auto mb-4 flex items-center justify-center text-red-800 text-2xl font-bold">
&#x26A0;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Secure API Integrations</h3>
<p class="text-gray-600">We use secure, token-based API connections like Plaid, meaning we never directly store your bank login credentials.</p>
</div>
<!-- Security Feature 5: Multi-Factor Authentication (MFA) -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-orange-200 rounded-full mx-auto mb-4 flex items-center justify-center text-orange-800 text-2xl font-bold">
&#x1F511;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Multi-Factor Authentication (MFA)</h3>
<p class="text-gray-600">Enhance your account security with optional Multi-Factor Authentication for an extra layer of protection.</p>
</div>
<!-- Security Feature 6: Robust Infrastructure -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-teal-200 rounded-full mx-auto mb-4 flex items-center justify-center text-teal-800 text-2xl font-bold">
&#x1F4BB;
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Robust Infrastructure</h3>
<p class="text-gray-600">Our platform is built on secure, scalable cloud infrastructure with continuous monitoring and threat detection.</p>
</div>
</div>
<div class="text-center mt-12">
<p class="text-lg text-gray-600">
Have questions about our security practices? Visit our comprehensive <a href="#" class="text-blue-600 hover:underline font-medium">Security FAQ</a> page or <a href="#" class="text-blue-600 hover:underline font-medium">contact us</a> directly.
</p>
</div>
</div>
</section>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">WealthWise AI</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@relume.io">support@wealthwiseai.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">How It Works</a></li><li><a href="#">Security & Privacy</a></li><li><a href="#">Customer Stories</a></li></ul><ul><li><a href="#">About Us</a></li><li><a href="#">Support Center</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">For Developers</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 WealthWise AI. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">WealthPilot</div><ul class="nav-1-nav-links"><li><a href="home.html">Dashboard</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Features</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join Now</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
<div class="app-form"><h1>Unlock Your Financial Potential</h1><h2>Your Journey to Financial Empowerment</h2><div class="form-row"><div class="form-group"><label>Your First Name</label><input id="first-name" type="text" placeholder="Enter your first name"></div><div class="form-group"><label>Your Last Name</label><input id="last-name" type="text" placeholder="Enter your last name"></div></div><div class="form-group full-width"><label>Your Email Address</label><input id="email" type="email" placeholder="Your best email for updates"></div><h2>Your Contact Details</h2><div class="form-group full-width"><label>Mobile Phone Number</label><input id="phone" type="tel" placeholder="Your best contact number"></div><h2>Your Financial Aspirations</h2><div class="form-group full-width"><textarea id="cover-letter" placeholder="Briefly share your financial goals, what you hope to achieve with us, or why you're excited about AI-driven financial insights."></textarea></div><button type="submit">Start Your Financial Transformation</button></div>
<section class="linked-accounts-section">
<div class="container">
<header class="section-header">
<h2 class="section-title">Linked Accounts</h2>
<button class="add-account-button">Link New Account</button>
</header>
<div class="account-list-summary">
<p class="summary-text">Total linked accounts: <span class="summary-value">[X]</span></p>
<p class="summary-text">Total balance across accounts: <span class="summary-value">$X,XXX,XXX.XX</span></p>
</div>
<div class="account-list-grid">
<!-- Account Card 1 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-bank-logo-1.png" alt="Bank Logo" class="bank-logo">
<h3 class="account-institution">Apex Bank Corp</h3>
</div>
<div class="account-details">
<p class="account-name">Primary Checking (****1234)</p>
<p class="account-type">Checking Account</p>
<p class="account-balance">$12,345.67</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Account Card 2 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-bank-logo-2.png" alt="Bank Logo" class="bank-logo">
<h3 class="account-institution">Global Credit Union</h3>
</div>
<div class="account-details">
<p class="account-name">Savings for Travel (****5678)</p>
<p class="account-type">Savings Account</p>
<p class="account-balance">$5,432.10</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Account Card 3 -->
<div class="account-card">
<div class="account-header">
<img src="placeholder-investment-logo.png" alt="Investment Firm Logo" class="bank-logo">
<h3 class="account-institution">Horizon Investments</h3>
</div>
<div class="account-details">
<p class="account-name">Retirement Portfolio</p>
<p class="account-type">Brokerage Account</p>
<p class="account-balance">$123,456.78</p>
</div>
<div class="account-actions">
<button class="action-button">View Details</button>
<button class="action-button-danger">Unlink</button>
</div>
</div>
<!-- Placeholder for adding more accounts -->
<div class="account-card add-new-placeholder">
<button class="add-account-button-large">
<span class="icon">+</span>
<span>Link Another Account</span>
</button>
</div>
</div>
</div>
</section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troubleshooting Guide - Financial App</title>
<link rel="stylesheet" href="style.css" />
<header>
<a href="/" class="logo">FinTrackAI</a>
<nav aria-label="Main Navigation">
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Accounts</a></li>
<li><a href="#">Savings</a></li>
<li><a href="#">Advice</a></li>
<li><a href="#" aria-current="page">Help</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero-section" aria-labelledby="troubleshooting-hero-title">
<h1 id="troubleshooting-hero-title">How Can We Help You Today?</h1>
<p>Find answers to common questions about linking accounts, tracking expenses, investment advice, and more.</p>
</section>
<section class="search-bar" aria-labelledby="search-troubleshooting">
<h2 id="search-troubleshooting" class="sr-only">Search Troubleshooting Articles</h2> <!-- SR-only for accessibility -->
<input type="search" placeholder="Search for a problem or question..." aria-label="Search troubleshooting articles">
</section>
<section class="categories-section" aria-labelledby="troubleshooting-categories-title">
<h2 id="troubleshooting-categories-title" class="sr-only">Troubleshooting Categories</h2>
<div class="categories-grid">
<article class="category-card">
<h3>Account Linking Issues</h3>
<p>Problems connecting your bank or investment accounts via Plaid.</p>
</article>
<article class="category-card">
<h3>Expense Tracking</h3>
<p>Trouble with transactions, categorization, or missing data.</p>
</article>
<article class="category-card">
<h3>Savings &amp; Forecasting</h3>
<p>Questions about savings goals, forecasts, or budget alerts.</p>
</article>
<article class="category-card">
<h3>AI Investment Advice</h3>
<p>Concerns or questions about AI-driven recommendations.</p>
</article>
<article class="category-card">
<h3>Security &amp; Privacy</h3>
<p>Information on data security, privacy, and account protection.</p>
</article>
<article class="category-card">
<h3>Technical Problems</h3>
<p>App performance, error messages, or general bugs.</p>
</article>
</div>
</section>
<section class="faq-section" aria-labelledby="faq-title">
<h2 id="faq-title">Frequently Asked Questions</h2>
<div class="faq-list">
<div class="faq-item">
<h3 class="faq-question" id="faq1-question" role="button" aria-expanded="false" aria-controls="faq1-answer" tabindex="0">
My bank account isn't linking. What should I do?
</h3>
<div class="faq-answer" id="faq1-answer" aria-hidden="true" role="region" aria-labelledby="faq1-question">
<p>First, ensure your internet connection is stable. Then, double-check your banking credentials. If the issue persists, your bank might be experiencing temporary issues or require re-authentication. Try again after some time, or contact our support if it continues.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq2-question" role="button" aria-expanded="false" aria-controls="faq2-answer" tabindex="0">
How often is my financial data updated?
</h3>
<div class="faq-answer" id="faq2-answer" aria-hidden="true" role="region" aria-labelledby="faq2-question">
<p>Your financial data is typically updated multiple times a day, usually every 24 hours or upon logging into your FinTrackAI account. Some institutions may have specific update schedules.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq3-question" role="button" aria-expanded="false" aria-controls="faq3-answer" tabindex="0">
Can I manually add or edit transactions?
</h3>
<div class="faq-answer" id="faq3-answer" aria-hidden="true" role="region" aria-labelledby="faq3-question">
<p>Yes, you can manually add transactions that are not automatically imported. You can also edit existing transaction categories and add notes to help with better expense tracking.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq4-question" role="button" aria-expanded="false" aria-controls="faq4-answer" tabindex="0">
How does the AI investment advice work?
</h3>
<div class="faq-answer" id="faq4-answer" aria-hidden="true" role="region" aria-labelledby="faq4-question">
<p>Our AI analyzes your linked accounts, spending habits, financial goals, and risk tolerance to provide personalized investment recommendations. It leverages market data and financial models to suggest portfolio adjustments or savings strategies.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question" id="faq5-question" role="button" aria-expanded="false" aria-controls="faq5-answer" tabindex="0">
Is my financial data secure?
</h3>
<div class="faq-answer" id="faq5-answer" aria-hidden="true" role="region" aria-labelledby="faq5-question">
<p>Absolutely. We use industry-standard encryption protocols (like AES-256) and security measures (like multi-factor authentication) to protect your data. We partner with reputable services like Plaid, which also adhere to strict security compliance.</p>
</div>
</div>
</div>
</section>
<section class="contact-support" aria-labelledby="contact-support-title">
<h2 id="contact-support-title">Still Need Help?</h2>
<p>If you can't find an answer to your question, our support team is ready to assist you.</p>
<a href="#" class="contact-button">Contact Support</a>
</section>
</main>
<footer>
<p>© 2024 FinTrackAI. All rights reserved.</p>
</footer>
<script>
// JavaScript for FAQ Accordion functionality
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
question.addEventListener('click', () => {
// Toggle 'active' class on the clicked item
item.classList.toggle('active');
// Update ARIA attributes for accessibility
const isExpanded = item.classList.contains('active');
question.setAttribute('aria-expanded', isExpanded);
item.querySelector('.faq-answer').setAttribute('aria-hidden', !isExpanded);
});
// Add keyboard accessibility for FAQ questions
question.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault(); // Prevent scrolling for spacebar
item.classList.toggle('active');
const isExpanded = item.classList.contains('active');
question.setAttribute('aria-expanded', isExpanded);
item.querySelector('.faq-answer').setAttribute('aria-hidden', !isExpanded);
}
});
});
});
</script>
<section id="security-assurance" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Your Financial Security: Our Top Priority</h2>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
At [Your Company Name], safeguarding your sensitive financial data is at the core of everything we do. We employ robust security measures to ensure your information remains confidential and protected.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Security Feature 1: Bank-Grade Encryption -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-blue-200 rounded-full mx-auto mb-4 flex items-center justify-center text-blue-800 text-2xl font-bold">
🔒
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Bank-Grade Encryption</h3>
<p class="text-gray-600">All your data is encrypted using AES-256 protocols, the same standard used by leading financial institutions.</p>
</div>
<!-- Security Feature 2: Regular Security Audits -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-green-200 rounded-full mx-auto mb-4 flex items-center justify-center text-green-800 text-2xl font-bold">
🔎
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Regular Security Audits</h3>
<p class="text-gray-600">We undergo frequent third-party security audits and penetration testing to identify and address vulnerabilities.</p>
</div>
<!-- Security Feature 3: Strict Data Privacy -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-purple-200 rounded-full mx-auto mb-4 flex items-center justify-center text-purple-800 text-2xl font-bold">
💭
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Strict Data Privacy</h3>
<p class="text-gray-600">Your personal and financial data is never shared or sold to third parties. Your privacy is paramount.</p>
</div>
<!-- Security Feature 4: Secure API Integrations (Plaid) -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-red-200 rounded-full mx-auto mb-4 flex items-center justify-center text-red-800 text-2xl font-bold">
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Secure API Integrations</h3>
<p class="text-gray-600">We use secure, token-based API connections like Plaid, meaning we never directly store your bank login credentials.</p>
</div>
<!-- Security Feature 5: Multi-Factor Authentication (MFA) -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-orange-200 rounded-full mx-auto mb-4 flex items-center justify-center text-orange-800 text-2xl font-bold">
🔑
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Multi-Factor Authentication (MFA)</h3>
<p class="text-gray-600">Enhance your account security with optional Multi-Factor Authentication for an extra layer of protection.</p>
</div>
<!-- Security Feature 6: Robust Infrastructure -->
<div class="security-feature p-6 bg-white rounded-lg shadow-md text-center">
<div class="icon-placeholder w-16 h-16 bg-teal-200 rounded-full mx-auto mb-4 flex items-center justify-center text-teal-800 text-2xl font-bold">
💻
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Robust Infrastructure</h3>
<p class="text-gray-600">Our platform is built on secure, scalable cloud infrastructure with continuous monitoring and threat detection.</p>
</div>
</div>
<div class="text-center mt-12">
<p class="text-lg text-gray-600">
Have questions about our security practices? Visit our comprehensive <a href="#" class="text-blue-600 hover:underline font-medium">Security FAQ</a> page or <a href="#" class="text-blue-600 hover:underline font-medium">contact us</a> directly.
</p>
</div>
</div>
</section>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">WealthWise AI</h3><p><strong>Address:</strong><br><br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br><br><span>1800 123 4567</span><br><br><a href="mailto:info@relume.io">support@wealthwiseai.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">How It Works</a></li><li><a href="#">Security &amp; Privacy</a></li><li><a href="#">Customer Stories</a></li></ul><ul><li><a href="#">About Us</a></li><li><a href="#">Support Center</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">For Developers</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 WealthWise AI. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)