Add landing page, redesign emails, and return updated task on completion
- Integrate landing page into Go app (served at root /) - Add STATIC_DIR config for static file serving - Redesign all email templates with modern dark theme styling - Add app icon to email headers - Return updated task with kanban_column in completion response - Update task DTO to include kanban column for client-side state updates 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Trey t
1082
static/css/style.css
Normal file
1082
static/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
26
static/images/favicon.svg
Normal file
26
static/images/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/images/icon.png
Normal file
BIN
static/images/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 464 KiB |
366
static/index.html
Normal file
366
static/index.html
Normal file
@@ -0,0 +1,366 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Casera - Home Maintenance & Property Management App</title>
|
||||
<meta name="description" content="Never miss home maintenance again. Manage properties, tasks, contractors, and costs all in one place. Free for iOS and Android.">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="Casera - Home Maintenance Made Simple">
|
||||
<meta property="og:description" content="Manage properties, tasks, and costs all in one place.">
|
||||
<meta property="og:image" content="images/og-image.png">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Casera - Home Maintenance Made Simple">
|
||||
<meta name="twitter:description" content="Manage properties, tasks, and costs all in one place.">
|
||||
|
||||
<!-- Fonts -->
|
||||
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav" id="nav">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="nav-logo">
|
||||
<span class="logo-text">Casera</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-links" id="nav-links">
|
||||
<a href="#features" class="nav-link">Features</a>
|
||||
<a href="#platforms" class="nav-link">Platforms</a>
|
||||
<a href="#" class="nav-link">Support</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-cta">
|
||||
<a href="#download" class="btn btn-primary btn-sm">Download</a>
|
||||
</div>
|
||||
|
||||
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container hero-container">
|
||||
<div class="hero-content">
|
||||
<span class="hero-badge">Property Management Made Simple</span>
|
||||
<h1 class="hero-title">Never miss home maintenance again</h1>
|
||||
<p class="hero-subtitle">Manage properties, tasks, and costs all in one place. Track maintenance, organize contractors, and keep your home running smoothly.</p>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a href="#" class="btn btn-primary btn-lg">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
Download for iOS
|
||||
</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
|
||||
</svg>
|
||||
Download for Android
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="hero-trust">Free to download • No credit card required</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>App Screenshot</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature Highlights -->
|
||||
<section class="highlights">
|
||||
<div class="container">
|
||||
<div class="highlights-grid">
|
||||
<div class="highlight-card">
|
||||
<div class="highlight-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="highlight-title">Unlimited Properties</h3>
|
||||
<p class="highlight-desc">Manage homes, rentals, and investments</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-card">
|
||||
<div class="highlight-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="highlight-title">Smart Scheduling</h3>
|
||||
<p class="highlight-desc">Recurring tasks that never slip</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-card">
|
||||
<div class="highlight-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="1" x2="12" y2="23"></line>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="highlight-title">Cost Tracking</h3>
|
||||
<p class="highlight-desc">Know exactly what you spend</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<!-- Feature 1 -->
|
||||
<div class="feature feature-left">
|
||||
<div class="feature-content">
|
||||
<h2 class="feature-title">All your properties in one place</h2>
|
||||
<p class="feature-desc">Manage unlimited residential and commercial properties. Track details like bedrooms, bathrooms, square footage, and more. Perfect for homeowners, landlords, and property managers.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>Properties Screen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="feature feature-right">
|
||||
<div class="feature-content">
|
||||
<h2 class="feature-title">Never forget maintenance again</h2>
|
||||
<p class="feature-desc">Create one-time or recurring tasks. Organize by category — plumbing, electrical, HVAC, landscaping. Get reminders before things break. View everything in a visual kanban board.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>Tasks Screen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="feature feature-left">
|
||||
<div class="feature-content">
|
||||
<h2 class="feature-title">Your trusted pros, organized</h2>
|
||||
<p class="feature-desc">Keep a directory of service providers with contact info, specialties, ratings, and work history. Quickly call, email, or get directions to any contractor. Never lose a business card again.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>Contractors Screen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="feature feature-right">
|
||||
<div class="feature-content">
|
||||
<h2 class="feature-title">Important records, always accessible</h2>
|
||||
<p class="feature-desc">Store warranties, manuals, and maintenance records. Track expiration dates and get alerts before warranties expire. Generate PDF reports for insurance claims or property sales.</p>
|
||||
</div>
|
||||
<div class="feature-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>Documents Screen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Platform Section -->
|
||||
<section class="platforms" id="platforms">
|
||||
<div class="container">
|
||||
<div class="platforms-content">
|
||||
<h2 class="section-title">Beautiful on every device</h2>
|
||||
<p class="section-subtitle">Available for iPhone, iPad, and Android. Your data syncs seamlessly across all your devices.</p>
|
||||
</div>
|
||||
|
||||
<div class="platforms-visual">
|
||||
<div class="device-showcase">
|
||||
<div class="phone-mockup phone-ios">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>iOS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="device-label">iPhone</span>
|
||||
</div>
|
||||
|
||||
<div class="phone-mockup phone-android">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="placeholder-content">
|
||||
<span>Android</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="device-label">Android</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section (Hidden until real testimonials) -->
|
||||
<!--
|
||||
<section class="testimonials">
|
||||
<div class="container">
|
||||
<h2 class="section-title">What people are saying</h2>
|
||||
|
||||
<div class="testimonials-grid">
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"Finally, an app that makes home maintenance simple. I've tried dozens of apps, but Casera is the only one that stuck."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-avatar"></div>
|
||||
<div class="author-info">
|
||||
<span class="author-name">Placeholder Name</span>
|
||||
<span class="author-title">Homeowner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"As a landlord with multiple properties, Casera has been a game changer. Everything I need is in one place."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-avatar"></div>
|
||||
<div class="author-info">
|
||||
<span class="author-name">Placeholder Name</span>
|
||||
<span class="author-title">Property Manager</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<p class="testimonial-quote">"The recurring task feature alone is worth it. I never forget to change HVAC filters or schedule seasonal maintenance anymore."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-avatar"></div>
|
||||
<div class="author-info">
|
||||
<span class="author-name">Placeholder Name</span>
|
||||
<span class="author-title">First-time Homeowner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<!-- Final CTA Section -->
|
||||
<section class="cta" id="download">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">Take control of your home</h2>
|
||||
<p class="cta-subtitle">Join homeowners who never miss maintenance again.</p>
|
||||
|
||||
<div class="cta-buttons">
|
||||
<a href="#" class="btn btn-white btn-lg">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
Download for iOS
|
||||
</a>
|
||||
<a href="#" class="btn btn-outline-white btn-lg">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
|
||||
</svg>
|
||||
Download for Android
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="cta-trust">Free download • Works offline • Your data stays private</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="logo-text">Casera</span>
|
||||
<p class="footer-tagline">Never miss home maintenance again.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<div class="footer-column">
|
||||
<h4>Product</h4>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#platforms">Platforms</a>
|
||||
<a href="#download">Download</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Support</h4>
|
||||
<a href="#">Help Center</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p class="copyright">© 2024 Casera. All rights reserved.</p>
|
||||
<p class="made-by">Made with care</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
82
static/js/main.js
Normal file
82
static/js/main.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Casera Landing Page JavaScript
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mobile Navigation Toggle
|
||||
const navToggle = document.getElementById('nav-toggle');
|
||||
const navLinks = document.getElementById('nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
navLinks.classList.toggle('active');
|
||||
navToggle.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navLinks.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navLinks.classList.remove('active');
|
||||
navToggle.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth Scroll for Anchor Links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
|
||||
if (target) {
|
||||
const navHeight = document.querySelector('.nav').offsetHeight;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll Animation Observer
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.feature, .highlight-card, .testimonial-card, .platforms-content').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Nav Background on Scroll
|
||||
const nav = document.querySelector('.nav');
|
||||
let lastScroll = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 50) {
|
||||
nav.style.boxShadow = 'var(--shadow-md)';
|
||||
} else {
|
||||
nav.style.boxShadow = 'none';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user