Hugging Face's logo

Spaces:
HLCOD
/
jijenga-landing
Running

App Files Community
1
jijenga-landing / index.html
HLCOD's picture
HLCOD
Add 2 files
eb97a1a verified
raw
history blame contribute delete
48.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jijenga | Transform Your Finances with Data-Driven Insights</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #10B981;
--primary-dark: #047857;
--black: #1F2937;
--dark-gray: #374151;
--medium-gray: #6B7280;
--light-gray: #E5E7EB;
--white: #F9FAFB;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Manrope', sans-serif;
color: var(--black);
background-color: var(--white);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background-color: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
header.scrolled {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo {
display: flex;
align-items: center;
font-weight: 800;
font-size: 24px;
color: var(--black);
text-decoration: none;
}
.logo i {
color: var(--primary-color);
margin-right: 10px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 30px;
}
nav ul li a {
text-decoration: none;
color: var(--dark-gray);
font-weight: 600;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: var(--primary-color);
}
.nav-cta {
background-color: var(--primary-color);
color: white !important;
padding: 10px 20px;
border-radius: 6px;
transition: all 0.3s ease;
}
.nav-cta:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 24px;
color: var(--dark-gray);
cursor: pointer;
}
/* Hero Section */
.hero {
height: 100vh;
min-height: 800px;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(--white) 0%, #f0fdf4 100%);
padding-top: 80px;
}
.hero-content {
display: flex;
align-items: center;
}
.hero-text {
flex: 1;
padding-right: 50px;
}
.hero-text h1 {
font-size: 56px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 24px;
color: var(--black);
}
.hero-text p {
font-size: 20px;
color: var(--medium-gray);
margin-bottom: 40px;
max-width: 600px;
}
.hero-cta {
display: flex;
gap: 20px;
}
.btn {
padding: 15px 30px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.btn-primary {
background-color: var(--primary-color);
color: white;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.btn-secondary {
background-color: transparent;
color: var(--dark-gray);
border: 2px solid var(--light-gray);
}
.btn-secondary:hover {
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-3px);
}
.hero-image {
flex: 1;
position: relative;
height: 600px;
}
.dashboard-preview {
position: absolute;
border-radius: 12px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.dashboard-1 {
top: 0;
left: 0;
width: 450px;
z-index: 3;
transform: rotate(-5deg);
}
.dashboard-2 {
top: 60px;
left: 150px;
width: 430px;
z-index: 2;
filter: brightness(0.95);
transform: rotate(2deg);
}
.dashboard-3 {
top: 120px;
left: 300px;
width: 410px;
z-index: 1;
filter: brightness(0.9);
transform: rotate(8deg);
}
.hero-image:hover .dashboard-1 {
transform: rotate(0deg);
}
.hero-image:hover .dashboard-2 {
transform: rotate(0deg);
}
.hero-image:hover .dashboard-3 {
transform: rotate(0deg);
}
/* Features Section */
.section {
padding: 100px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 42px;
font-weight: 800;
margin-bottom: 16px;
color: var(--black);
}
.section-title p {
font-size: 18px;
color: var(--medium-gray);
max-width: 700px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.feature-card {
background-color: white;
border-radius: 12px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
text-align: center;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 80px;
height: 80px;
background-color: rgba(16, 185, 129, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
color: var(--primary-color);
font-size: 32px;
}
.feature-card h3 {
font-size: 24px;
margin-bottom: 16px;
color: var(--black);
}
.feature-card p {
color: var(--medium-gray);
}
/* Process Section */
.process-container {
background-color: var(--primary-color);
border-radius: 16px;
padding: 80px;
margin-top: 80px;
color: white;
position: relative;
overflow: hidden;
}
.process-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="25" cy="25" r="4" fill="white" fill-opacity="0.1"/><circle cx="75" cy="75" r="4" fill="white" fill-opacity="0.1"/><circle cx="25" cy="75" r="4" fill="white" fill-opacity="0.1"/><circle cx="75" cy="25" r="4" fill="white" fill-opacity="0.1"/></svg>');
opacity: 0.3;
}
.process-title {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.process-title h2 {
font-size: 42px;
margin-bottom: 16px;
}
.process-title p {
font-size: 18px;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}
.process-steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
}
.step {
text-align: center;
flex: 1;
max-width: 300px;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background-color: white;
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
margin: 0 auto 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.step h3 {
font-size: 22px;
margin-bottom: 16px;
}
.step p {
opacity: 0.9;
font-size: 16px;
}
.step-arrow {
position: absolute;
top: 30px;
right: -60px;
color: white;
font-size: 24px;
opacity: 0.5;
}
/* Security Section */
.security-container {
display: flex;
align-items: center;
gap: 60px;
margin-top: 60px;
}
.security-image {
flex: 1;
}
.security-image img {
width: 100%;
max-width: 500px;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.security-content {
flex: 1;
}
.security-content h2 {
font-size: 42px;
margin-bottom: 24px;
color: var(--black);
}
.security-features {
margin-top: 40px;
}
.security-feature {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
}
.security-feature-icon {
width: 50px;
height: 50px;
background-color: rgba(16, 185, 129, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
color: var(--primary-color);
font-size: 20px;
}
.security-feature-text h3 {
font-size: 20px;
margin-bottom: 8px;
color: var(--black);
}
.security-feature-text p {
color: var(--medium-gray);
}
/* Testimonials */
.testimonials-slider {
position: relative;
padding: 40px 0;
}
.testimonials {
display: flex;
overflow: hidden;
}
.testimonial-card {
min-width: 100%;
padding: 40px;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.5s ease;
}
.testimonial-content {
font-size: 18px;
line-height: 1.8;
color: var(--medium-gray);
margin-bottom: 30px;
position: relative;
}
.testimonial-content::before {
content: '"';
font-size: 80px;
position: absolute;
top: -20px;
left: -20px;
color: rgba(16, 185, 129, 0.1);
font-family: serif;
line-height: 1;
}
.testimonial-author {
display: flex;
align-items: center;
}
.testimonial-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 20px;
}
.author-info h4 {
font-size: 18px;
margin-bottom: 5px;
color: var(--black);
}
.author-info p {
color: var(--medium-gray);
font-size: 14px;
}
.testimonial-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.testimonial-nav button {
background-color: var(--primary-color);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-nav button:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
/* Pricing */
.pricing-plans {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 60px;
}
.pricing-card {
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
flex: 1;
max-width: 350px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card.popular {
border: 2px solid var(--primary-color);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.2);
transform: translateY(-10px);
}
.popular-badge {
position: absolute;
top: 20px;
right: -30px;
background-color: var(--primary-color);
color: white;
padding: 5px 30px;
font-size: 14px;
transform: rotate(45deg);
}
.pricing-card h3 {
font-size: 24px;
margin-bottom: 16px;
color: var(--black);
}
.price {
font-size: 48px;
font-weight: 800;
margin-bottom: 20px;
color: var(--primary-color);
}
.price span {
font-size: 16px;
font-weight: normal;
color: var(--medium-gray);
}
.pricing-features {
margin-bottom: 40px;
}
.pricing-features li {
display: flex;
align-items: center;
margin-bottom: 15px;
color: var(--medium-gray);
}
.pricing-features li i {
color: var(--primary-color);
margin-right: 10px;
}
.pricing-cta {
width: 100%;
text-align: center;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
padding: 100px 0;
color: white;
text-align: center;
margin-top: 60px;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="2" fill="white" fill-opacity="0.2"/><circle cx="30" cy="30" r="2" fill="white" fill-opacity="0.2"/><circle cx="50" cy="50" r="2" fill="white" fill-opacity="0.2"/><circle cx="70" cy="70" r="2" fill="white" fill-opacity="0.2"/><circle cx="90" cy="90" r="2" fill="white" fill-opacity="0.2"/><circle cx="90" cy="10" r="2" fill="white" fill-opacity="0.2"/><circle cx="70" cy="30" r="2" fill="white" fill-opacity="0.2"/><circle cx="50" cy="50" r="2" fill="white" fill-opacity="0.2"/><circle cx="30" cy="70" r="2" fill="white" fill-opacity="0.2"/><circle cx="10" cy="90" r="2" fill="white" fill-opacity="0.2"/></svg>');
background-size: 80px 80px;
opacity: 0.8;
}
.cta-container {
position: relative;
z-index: 2;
}
.cta-container h2 {
font-size: 42px;
margin-bottom: 24px;
}
.cta-container p {
font-size: 18px;
opacity: 0.9;
max-width: 700px;
margin: 0 auto 40px;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.btn-white {
background-color: white;
color: var(--primary-color);
}
.btn-white:hover {
background-color: rgba(255, 255, 255, 0.9);
transform: translateY(-3px);
}
.btn-outline-white {
background-color: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-outline-white:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
}
/* Footer */
footer {
background-color: var(--black);
color: white;
padding: 80px 0 40px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 60px;
}
.footer-column h4 {
font-size: 18px;
margin-bottom: 24px;
color: white;
position: relative;
padding-bottom: 10px;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-color);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 12px;
}
.footer-column ul li a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: white;
}
.footer-logo {
font-size: 24px;
font-weight: 800;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.footer-logo i {
color: var(--primary-color);
margin-right: 10px;
}
.footer-social {
display: flex;
gap: 20px;
margin-top: 30px;
}
.footer-social a {
color: white;
background-color: rgba(255, 255, 255, 0.1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.footer-social a:hover {
background-color: var(--primary-color);
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.8s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.hero-text h1 {
font-size: 48px;
}
.hero-image {
height: 500px;
}
.dashboard-1 {
width: 380px;
}
.dashboard-2 {
width: 360px;
left: 120px;
}
.dashboard-3 {
width: 340px;
left: 240px;
}
}
@media (max-width: 768px) {
.header-container {
padding: 0 20px;
}
nav {
position: fixed;
top: 80px;
left: 0;
width: 100%;
background-color: white;
padding: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-150%);
transition: transform 0.3s ease;
z-index: 999;
}
nav.active {
transform: translateY(0);
}
nav ul {
flex-direction: column;
}
nav ul li {
margin: 0 0 15px 0;
}
.mobile-menu-btn {
display: block;
}
.hero {
height: auto;
min-height: auto;
padding: 100px 0;
}
.hero-content {
flex-direction: column;
}
.hero-text {
padding-right: 0;
margin-bottom: 60px;
text-align: center;
}
.hero-cta {
justify-content: center;
}
.hero-text h1 {
font-size: 40px;
}
.hero-image {
height: 400px;
}
.dashboard-1, .dashboard-2, .dashboard-3 {
width: 300px;
}
.dashboard-2 {
left: 100px;
}
.dashboard-3 {
left: 200px;
}
.process-container {
padding: 60px 30px;
}
.process-steps {
flex-direction: column;
align-items: center;
}
.step {
margin-bottom: 60px;
max-width: 100%;
}
.step-arrow {
display: none;
}
.security-container {
flex-direction: column;
}
.pricing-plans {
flex-direction: column;
align-items: center;
}
.pricing-card {
max-width: 400px;
width: 100%;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.hero-text h1 {
font-size: 32px;
}
.hero-text p {
font-size: 18px;
}
.section-title h2, .process-title h2, .security-content h2, .cta-container h2 {
font-size: 32px;
}
.section-title p, .process-title p, .cta-container p {
font-size: 16px;
}
.hero-cta {
flex-direction: column;
gap: 15px;
}
.hero-image {
height: 300px;
}
.dashboard-1, .dashboard-2, .dashboard-3 {
width: 250px;
}
.dashboard-2 {
left: 80px;
}
.dashboard-3 {
left: 160px;
}
.process-container {
padding: 40px 20px;
margin-top: 40px;
}
.price {
font-size: 36px;
}
}
</style>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="header-container container">
<a href="#" class="logo">
<i class="fas fa-chart-line"></i>
Jijenga
</a>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<nav id="mainNav">
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#" class="nav-cta">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content container">
<div class="hero-text fade-in">
<h1>Transform Your Finances with Data-Driven Insights</h1>
<p>Upload your statements, and let Jijenga reveal the magic behind your personal finance. Get predictive insights and analytics with bulletproof security.</p>
<div class="hero-cta">
<a href="#" class="btn btn-primary">Get Started</a>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="hero-image fade-in delay-1">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZGFzaGJvYXJkfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" alt="Jijenga Dashboard" class="dashboard-preview dashboard-1">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZGFzaGJvYXJkfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" alt="Jijenga Analytics" class="dashboard-preview dashboard-2">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZGFzaGJvYXJkfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60" alt="Jijenga Insights" class="dashboard-preview dashboard-3">
</div>
</div>
</section>
<!-- Features Section -->
<section class="section" id="features">
<div class="container">
<div class="section-title fade-in">
<h2>Why Jijenga?</h2>
<p>Powerful features designed to give you complete control and understanding of your financial health</p>
</div>
<div class="features-grid">
<div class="feature-card fade-in delay-1">
<div class="feature-icon">
<i class="fas fa-brain"></i>
</div>
<h3>Intelligent Analytics</h3>
<p>Harness models that turn raw statements into actionable insights. Our AI identifies patterns and opportunities you might miss.</p>
</div>
<div class="feature-card fade-in delay-2">
<div class="feature-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Predictive Power</h3>
<p>Plan ahead with AI-driven forecasts. Visualize potential financial futures based on your current spending and saving patterns.</p>
</div>
<div class="feature-card fade-in delay-3">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Unmatched Security</h3>
<p>Military-grade encryption keeps your data safe. We prioritize your privacy with bank-level security measures.</p>
</div>
<div class="feature-card fade-in delay-1">
<div class="feature-icon">
<i class="fas fa-magic"></i>
</div>
<h3>Smart Automation</h3>
<p>Automatic categorization and tracking of all transactions. Set it once and let Jijenga do the heavy lifting.</p>
</div>
<div class="feature-card fade-in delay-2">
<div class="feature-icon">
<i class="fas fa-bullseye"></i>
</div>
<h3>Goal Tracking</h3>
<p>Set financial targets and track your progress with visual, easy-to-understand metrics and projections.</p>
</div>
<div class="feature-card fade-in delay-3">
<div class="feature-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3>Personalized Advice</h3>
<p>Receive tailored recommendations to optimize your spending, saving, and investing based on your unique situation.</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="section" id="how-it-works">
<div class="container">
<div class="process-container">
<div class="process-title">
<h2>How Jijenga Works</h2>
<p>Get powerful financial insights in just three simple steps</p>
</div>
<div class="process-steps">
<div class="step fade-in">
<div class="step-number">1</div>
<h3>Upload Securely</h3>
<p>Easily upload your bank statements, credit card bills, and investment reports through our encrypted portal.</p>
</div>
<div class="step-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="step fade-in delay-1">
<div class="step-number">2</div>
<h3>AI Processing</h3>
<p>Our algorithms analyze and categorize every transaction while maintaining the highest security standards.</p>
</div>
<div class="step-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="step fade-in delay-2">
<div class="step-number">3</div>
<h3>Receive Insights</h3>
<p>Get personalized dashboards, spending analysis, predictive forecasts, and actionable advice tailored to you.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Security Section -->
<section class="section" id="security">
<div class="container">
<div class="security-container">
<div class="security-image fade-in">
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8c2VjdXJpdHl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="Security Illustration">
</div>
<div class="security-content fade-in delay-1">
<h2>Your Data, Fully Protected</h2>
<p>At Jijenga, we understand that financial data is personal and sensitive. That's why we've implemented state-of-the-art security measures to ensure your information is always safe.</p>
<div class="security-features">
<div class="security-feature">
<div class="security-feature-icon">
<i class="fas fa-lock"></i>
</div>
<div class="security-feature-text">
<h3>Bank-Level Encryption</h3>
<p>All data is encrypted both in transit and at rest using AES-256 encryption, the same standard used by financial institutions.</p>
</div>
</div>
<div class="security-feature">
<div class="security-feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="security-feature-text">
<h3>Compliance Certified</h3>
<p>We meet or exceed all industry regulations including GDPR and SOC 2 Type II compliance for data security and privacy.</p>
</div>
</div>
<div class="security-feature">
<div class="security-feature-icon">
<i class="fas fa-user-shield"></i>
</div>
<div class="security-feature-text">
<h3>Zero Data Selling</h3>
<p>We never sell or share your data with third parties. Your financial information remains yours alone.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="section" id="testimonials">
<div class="container">
<div class="section-title fade-in">
<h2>Trusted by Thousands</h2>
<p>Don't just take our word for it. Here's what our users say about their experience with Jijenga.</p>
</div>
<div class="testimonials-slider fade-in delay-1">
<div class="testimonials" id="testimonialsContainer">
<div class="testimonial-card">
<div class="testimonial-content">
Jijenga completely transformed how I manage my finances. The predictive analytics helped me identify potential savings I never would have noticed. I've increased my savings rate by 30% in just three months!
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah J.">
<div class="author-info">
<h4>Sarah J.</h4>
<p>Marketing Director, San Francisco</p>
</div>
</div>
</div>
</div>
<div class="testimonial-nav">
<button id="testimonialPrev"><i class="fas fa-chevron-left"></i></button>
<button id="testimonialNext"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="section" id="pricing">
<div class="container">
<div class="section-title fade-in">
<h2>Simple, Transparent Pricing</h2>
<p>Choose the plan that fits your financial management needs. Start small and upgrade anytime.</p>
</div>
<div class="pricing-plans">
<div class="pricing-card fade-in">
<h3>Starter</h3>
<div class="price">$9<span>/month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> Basic financial analysis</li>
<li><i class="fas fa-check"></i> 3 statement uploads/month</li>
<li><i class="fas fa-check"></i> Spending categorization</li>
<li><i class="fas fa-check"></i> 6-month data history</li>
<li><i class="fas fa-times"></i> Predictive analytics</li>
<li><i class="fas fa-times"></i> Advanced reporting</li>
</ul>
<a href="#" class="btn btn-secondary pricing-cta">Get Started</a>
</div>
<div class="pricing-card popular fade-in delay-1">
<div class="popular-badge">Most Popular</div>
<h3>Professional</h3>
<div class="price">$19<span>/month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> All Starter features</li>
<li><i class="fas fa-check"></i> Unlimited statements</li>
<li><i class="fas fa-check"></i> Predictive analytics</li>
<li><i class="fas fa-check"></i> 3-year data history</li>
<li><i class="fas fa-check"></i> Advanced reporting</li>
<li><i class="fas fa-check"></i> Goal tracking</li>
</ul>
<a href="#" class="btn btn-primary pricing-cta">Get Started</a>
</div>
<div class="pricing-card fade-in delay-2">
<h3>Premium</h3>
<div class="price">$29<span>/month</span></div>
<ul class="pricing-features">
<li><i class="fas fa-check"></i> All Professional features</li>
<li><i class="fas fa-check"></i> Unlimited data history</li>
<li><i class="fas fa-check"></i> Priority support</li>
<li><i class="fas fa-check"></i> Tax optimization</li>
<li><i class="fas fa-check"></i> 1-on-1 financial review</li>
<li><i class="fas fa-check"></i> Investment analysis</li>
</ul>
<a href="#" class="btn btn-secondary pricing-cta">Get Started</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="cta-container container fade-in">
<h2>Ready to unlock your financial potential?</h2>
<p>Join thousands of users who have transformed their financial lives with Jijenga's powerful analytics platform.</p>
<div class="cta-buttons">
<a href="#" class="btn btn-white">Sign Up Now</a>
<a href="#" class="btn btn-outline-white">Schedule a Demo</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content container">
<div class="footer-column">
<div class="footer-logo">
<i class="fas fa-chart-line"></i>
Jijenga
</div>
<p>Empowering your financial journey through intelligent analytics and predictive insights.</p>
<div class="footer-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Product</h4>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Webinars</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">API Docs</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Compliance</a></li>
</ul>
</div>
</div>
<div class="footer-bottom container">
<p>&copy; 2023 Jijenga, Inc. All rights reserved.</p>
</div>
</footer>
<script>
// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mainNav = document.getElementById('mainNav');
mobileMenuBtn.addEventListener('click', () => {
mainNav.classList.toggle('active');
mobileMenuBtn.innerHTML = mainNav.classList.contains('active')
? '<i class="fas fa-times"></i>'
: '<i class="fas fa-bars"></i>';
});
// Header Scroll Effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Testimonial Slider
const testimonialsContainer = document.getElementById('testimonialsContainer');
const testimonialPrev = document.getElementById('testimonialPrev');
const testimonialNext = document.getElementById('testimonialNext');
const testimonials = [
{
content: "Jijenga completely transformed how I manage my finances. The predictive analytics helped me identify potential savings I never would have noticed. I've increased my savings rate by 30% in just three months!",
name: "Sarah J.",
role: "Marketing Director, San Francisco",
image: "https://randomuser.me/api/portraits/women/45.jpg"
},
{
content: "As a small business owner, understanding my personal and business finances separately was always a challenge. Jijenga's categorization and insights have given me clarity like never before. Highly recommend!",
name: "Michael T.",
role: "Entrepreneur, New York",
image: "https://randomuser.me/api/portraits/men/32.jpg"
},
{
content: "The security features were what initially drew me to Jijenga, but the predictive spending algorithms kept me coming back. It's like having a financial advisor in my pocket at a fraction of the cost.",
name: "Priya K.",
role: "Software Engineer, Seattle",
image: "https://randomuser.me/api/portraits/women/68.jpg"
}
];
let currentTestimonial = 0;
function showTestimonial(index) {
const testimonial = testimonials[index];
testimonialsContainer.innerHTML = `
<div class="testimonial-card">
<div class="testimonial-content">${testimonial.content}</div>
<div class="testimonial-author">
<img src="${testimonial.image}" alt="${testimonial.name}">
<div class="author-info">
<h4>${testimonial.name}</h4>
<p>${testimonial.role}</p>
</div>
</div>
</div>
`;
}
testimonialPrev.addEventListener('click', () => {
currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
showTestimonial(currentTestimonial);
});
testimonialNext.addEventListener('click', () => {
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
showTestimonial(currentTestimonial);
});
// Initialize with first testimonial
showTestimonial(currentTestimonial);
// Animate elements on scroll
const fadeElements = document.querySelectorAll('.fade-in');
function checkScroll() {
fadeElements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementTop < windowHeight - 100) {
element.style.opacity = 1;
element.style.transform = 'translateY(0)';
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>