marcogll/TaxHacker_s23
1
0
Fork 0
mirror of https://github.com/marcogll/TaxHacker_s23.git synced 2026-01-13 13:25:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add more colors to cards

Browse Source
This commit is contained in:
Vasily Zubarev
2025-07-23 11:07:51 +02:00
parent 8897134901
commit 9305deda86
7 changed files with 404 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(app)/transactions/[transactionId]/page.tsx
View File

@@ -11,8 +11,8 @@ import { getFilesByTransactionId } from "@/models/files"
import { getProjects } from "@/models/projects"
import { getSettings } from "@/models/settings"
import { getTransactionById } from "@/models/transactions"
import { notFound } from "next/navigation"
import Link from "next/link"
import { notFound } from "next/navigation"
export default async function TransactionPage({ params }: { params: Promise<{ transactionId: string }> }) {
const { transactionId } = await params
@@ -32,7 +32,7 @@ export default async function TransactionPage({ params }: { params: Promise<{ tr
return (
<div className="flex flex-wrap flex-row items-start justify-center gap-4 max-w-6xl">
<Card className="w-full flex-1 flex flex-col flex-wrap justify-center items-start overflow-hidden">
<Card className="w-full flex-1 flex flex-col flex-wrap justify-center items-start overflow-hidden bg-gradient-to-br from-violet-50/80 via-indigo-50/80 to-white border-violet-200/60">
{incompleteFields.length > 0 && (
<div className="w-full flex flex-col gap-1 rounded-md bg-yellow-50 p-5">
<span>
@@ -47,7 +47,7 @@ export default async function TransactionPage({ params }: { params: Promise<{ tr
</span>
</div>
)}
<div className="w-full p-5 bg-accent">
<div className="w-full p-5">
<TransactionEditForm
transaction={transaction}
categories={categories}

35
app/(app)/unsorted/page.tsx
View File

@@ -38,29 +38,32 @@ export default async function UnsortedPage() {
{files.length > 1 && <AnalyzeAllButton />}
</header>
{config.selfHosted.isEnabled && !settings.openai_api_key && !settings.google_api_key && !settings.mistral_api_key && (
<Alert>
<Settings className="h-4 w-4 mt-2" />
<div className="flex flex-row justify-between pt-2">
<div className="flex flex-col">
<AlertTitle>LLM provider API Key is required for analyzing files</AlertTitle>
<AlertDescription>
Please set your LLM provider API key in the settings to use the analyze form.
</AlertDescription>
{config.selfHosted.isEnabled &&
!settings.openai_api_key &&
!settings.google_api_key &&
!settings.mistral_api_key && (
<Alert>
<Settings className="h-4 w-4 mt-2" />
<div className="flex flex-row justify-between pt-2">
<div className="flex flex-col">
<AlertTitle>LLM provider API Key is required for analyzing files</AlertTitle>
<AlertDescription>
Please set your LLM provider API key in the settings to use the analyze form.
</AlertDescription>
</div>
<Link href="/settings/llm">
<Button>Go to Settings</Button>
</Link>
</div>
<Link href="/settings/llm">
<Button>Go to Settings</Button>
</Link>
</div>
</Alert>
)}
</Alert>
)}
<main className="flex flex-col gap-5">
{files.map((file) => (
<Card
key={file.id}
id={file.id}
className="flex flex-row flex-wrap md:flex-nowrap justify-center items-start gap-5 p-5 bg-accent"
className="flex flex-row flex-wrap md:flex-nowrap justify-center items-start gap-5 p-5 bg-gradient-to-br from-violet-50/80 via-indigo-50/80 to-white border-violet-200/60 rounded-2xl"
>
<div className="w-full max-w-[500px]">
<Card>

375
app/landing/landing.tsx
View File

@@ -6,23 +6,32 @@ import Link from "next/link"
export default function LandingPage() {
return (
<div className="min-h-screen flex flex-col bg-[#FAFAFA]">
<header className="py-6 px-4 md:px-8 bg-white/80 backdrop-blur-md shadow-sm fixed w-full z-10">
<div className="min-h-screen flex flex-col bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
<header className="py-6 px-4 md:px-8 bg-white/90 backdrop-blur-xl shadow-lg border-b border-gradient-to-r from-pink-200 to-indigo-200 fixed w-full z-50">
<div className="max-w-7xl mx-auto flex justify-between items-center">
<Link href="/" className="flex items-center gap-2">
<Image src="/logo/256.png" alt="Logo" width={32} height={32} className="h-8" />
<Link href="/" className="flex items-center gap-2 group">
<div className="relative">
<Image
src="/logo/256.png"
alt="Logo"
width={32}
height={32}
className="h-8 group-hover:scale-110 transition-transform duration-300"
/>
<div className="absolute inset-0 bg-gradient-to-r from-pink-600 to-indigo-600 rounded-full opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300" />
</div>
<ColoredText className="text-2xl font-bold">TaxHacker</ColoredText>
</Link>
<div className="flex gap-1 md:gap-4 text-xs md:text-sm">
<Link
href="/enter"
className="font-medium px-4 py-2 rounded-full border border-gray-200 hover:bg-gray-50 transition-all"
className="font-medium px-4 py-2 rounded-full border-2 border-gradient-to-r from-pink-300 to-indigo-300 hover:from-pink-400 hover:to-indigo-400 bg-white/80 hover:bg-white transition-all duration-300 hover:scale-105"
>
Log In
</Link>
<Link
href="/cloud"
className="font-medium bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-4 py-2 rounded-full hover:opacity-90 transition-all"
className="font-medium bg-gradient-to-r from-pink-600 to-indigo-600 text-white px-4 py-2 rounded-full hover:from-pink-700 hover:to-indigo-700 transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl"
>
Sign Up
</Link>
@@ -31,35 +40,40 @@ export default function LandingPage() {
</header>
{/* Hero Section */}
<section className="pt-32 pb-16 px-8">
<div className="max-w-7xl mx-auto">
<section className="pt-32 pb-16 px-8 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 bg-gradient-to-br from-pink-100/50 via-purple-100/30 to-indigo-100/50" />
<div className="absolute top-20 left-10 w-72 h-72 bg-gradient-to-r from-pink-400 to-indigo-400 rounded-full opacity-10 blur-3xl animate-pulse" />
<div className="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-r from-indigo-400 to-pink-400 rounded-full opacity-10 blur-3xl animate-pulse" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-12">
<div className="inline-block px-4 py-2 rounded-full bg-purple-50 text-purple-600 text-sm font-medium mb-6">
<div className="inline-block px-6 py-3 rounded-full bg-gradient-to-r from-pink-600 to-indigo-600 text-white text-sm font-medium mb-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
🚀 Under Active Development
</div>
<h1 className="text-5xl font-bold tracking-tight sm:text-6xl mb-6 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent pb-2">
<h1 className="text-5xl font-bold tracking-tight sm:text-6xl mb-6 bg-gradient-to-r from-gray-900 via-pink-700 to-indigo-700 bg-clip-text text-transparent pb-2">
Let AI finally care about your taxes, scan your receipts and analyze your expenses
</h1>
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
<p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto font-medium">
A self-hosted accounting app crafted with love for freelancers and small businesses
</p>
<div className="flex gap-4 justify-center text-sm md:text-lg">
<Link
href="#start"
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-full hover:opacity-90 transition-all shadow-lg shadow-blue-500/20"
className="px-8 py-4 bg-gradient-to-r from-pink-600 to-indigo-600 text-white font-bold rounded-full hover:from-pink-700 hover:to-indigo-700 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-110 border-2 border-white/20"
>
Get Started
Get Started ✨
</Link>
<Link
href="mailto:me@vas3k.ru"
className="px-8 py-3 border border-gray-200 text-gray-700 font-medium rounded-full hover:bg-gray-50 transition-all"
className="px-8 py-4 border-2 border-gradient-to-r from-pink-300 to-indigo-300 text-gray-800 font-bold rounded-full hover:bg-gradient-to-r hover:from-pink-50 hover:to-indigo-50 transition-all duration-300 hover:scale-105 bg-white/80"
>
Contact Us
Contact Us 💌
</Link>
</div>
</div>
<div className="relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="absolute inset-0 bg-gradient-to-b from-blue-500/5 to-transparent z-10" />
<div className="relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-pink-200 to-indigo-200 hover:scale-105 transition-all duration-500 group">
<div className="absolute inset-0 bg-gradient-to-b from-pink-500/10 via-purple-500/10 to-indigo-500/10 z-10 group-hover:from-pink-500/20 group-hover:to-indigo-500/20 transition-all duration-500" />
<video className="w-full h-auto" autoPlay loop muted playsInline poster="/landing/title.webp">
<source src="/landing/video.mp4" type="video/mp4" />
<Image src="/landing/title.webp" alt="TaxHacker" width={1980} height={1224} priority />
@@ -69,133 +83,179 @@ export default function LandingPage() {
</section>
{/* Features Section */}
<section className="py-20 px-8">
<div className="max-w-7xl mx-auto">
<section className="py-20 px-8 relative">
<div className="absolute inset-0 bg-gradient-to-b from-white/50 to-indigo-50/50" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-16">
<h2 className="flex flex-col gap-3 mb-4 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
<span className="text-6xl font-semibold text-muted-foreground">F∗ck Taxes</span>
<span className="text-4xl font-bold">TaxHacker can save you time, money and nerves</span>
<h2 className="flex flex-col gap-3 mb-4">
<span className="text-6xl font-bold bg-gradient-to-r from-pink-600 to-indigo-600 bg-clip-text text-transparent">
F∗ck Taxes
</span>
<span className="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
TaxHacker can save you time, money and nerves
</span>
</h2>
</div>
{/* AI Scanner Feature */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-pink-50/30 to-indigo-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-pink-200 to-indigo-200 hover:shadow-2xl transition-all duration-500 group">
<div className="flex-1 min-w-60">
<div className="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-sm font-medium mb-4">
LLM-Powered
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold mb-4 shadow-lg">
🤖 LLM-Powered
</div>
<h3 className="text-2xl font-semibold mb-4">Analyze photos and invoices with AI</h3>
<ul className="space-y-3 text-gray-600">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-700 to-indigo-700 bg-clip-text text-transparent">
Analyze photos and invoices with AI
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-blue-600 mr-3 text-lg">✨</span>
Upload your receipts or invoices in PDF for automatic recognition
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-blue-600 mr-3 text-lg">✨</span>
Extract key information like dates, amounts, and vendors
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-blue-600 mr-3 text-lg">✨</span>
Works with any language, format and photo quality
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-blue-600 mr-3 text-lg">✨</span>
Automatically organize everything into a structured database
</li>
</ul>
</div>
<div className="flex-1 relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-blue-200 to-indigo-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/ai-scanner.webp" alt="AI Document Analyzer" width={1900} height={1524} />
</div>
</div>
{/* Multi-currency Feature */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100 flex-row-reverse">
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-green-50/30 to-emerald-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-green-200 to-emerald-200 hover:shadow-2xl transition-all duration-500 group flex-row-reverse">
<div className="flex-1 min-w-60">
<div className="inline-block px-3 py-1 rounded-full bg-green-50 text-green-600 text-sm font-medium mb-4">
Currency Converter
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-green-500 to-emerald-600 text-white text-sm font-bold mb-4 shadow-lg">
💱 Currency Converter
</div>
<h3 className="text-2xl font-semibold mb-4">Automatically convert currencies</h3>
<ul className="space-y-3 text-gray-600">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-green-700 to-emerald-700 bg-clip-text text-transparent">
Automatically convert currencies
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-green-600 mr-3 text-lg">💰</span>
Detects foreign currencies and coverts it to yours
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-green-600 mr-3 text-lg">💰</span>
Historical exchange rate lookup on a date of transaction
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-green-600 mr-3 text-lg">💰</span>
Support for 170+ world currencies
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-green-600 mr-3 text-lg">💰</span>
Even works with cryptocurrencies (BTC, ETH, LTC, etc.)
</li>
</ul>
</div>
<div className="flex-1 relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-green-200 to-emerald-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/multi-currency.webp" alt="Currency Converter" width={1400} height={1005} />
</div>
</div>
{/* Transaction Table Feature */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100 flex-row-reverse">
<div className="flex-1 relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-pink-50/30 to-rose-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-pink-200 to-rose-200 hover:shadow-2xl transition-all duration-500 group flex-row-reverse">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-pink-200 to-rose-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/transactions.webp" alt="Transactions Table" width={2000} height={1279} />
</div>
<div className="flex-1 min-w-60">
<div className="inline-block px-3 py-1 rounded-full bg-pink-50 text-pink-600 text-sm font-medium mb-4">
Filters
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-pink-500 to-rose-600 text-white text-sm font-bold mb-4 shadow-lg">
🔍 Filters
</div>
<h3 className="text-2xl font-semibold mb-4">Organize expenses and income</h3>
<ul className="space-y-3 text-gray-600">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-pink-700 to-rose-700 bg-clip-text text-transparent">
Organize expenses and income
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-pink-600 mr-3 text-lg">📊</span>
Add, edit and manage your transactions
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-pink-600 mr-3 text-lg">📊</span>
Filter by any column, category or date range
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-pink-600 mr-3 text-lg">📊</span>
Customize which columns to show in the table
</li>
<li className="flex items-center">
<span className="text-green-600 mr-2">✓</span>
<span className="text-pink-600 mr-3 text-lg">📊</span>
Import transactions from CSV
</li>
</ul>
</div>
</div>
{/* Invoice Generator */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-purple-50/30 to-indigo-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-purple-200 to-indigo-200 hover:shadow-2xl transition-all duration-500 group">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-purple-200 to-indigo-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/invoice-generator.webp" alt="Invoice Generator" width={1800} height={1081} />
</div>
<div className="flex-1 min-w-60">
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-sm font-bold mb-4 shadow-lg">
📋 Invoice Generator
</div>
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-700 to-indigo-700 bg-clip-text text-transparent">
Create custom invoices
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-3 text-lg">📄</span>
???
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-3 text-lg">📄</span>
???
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-3 text-lg">📄</span>
???
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-3 text-lg">📄</span>
???
</li>
</ul>
</div>
</div>
{/* Custom Fields & Categories */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="flex-1 relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-violet-50/30 to-purple-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-violet-200 to-purple-200 hover:shadow-2xl transition-all duration-500 group">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-violet-200 to-purple-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/custom-llm.webp" alt="Custom LLM promts" width={1800} height={1081} />
</div>
<div className="flex-1 min-w-60">
<div className="inline-block px-3 py-1 rounded-full bg-purple-50 text-purple-600 text-sm font-medium mb-4">
Customization
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-violet-500 to-purple-600 text-white text-sm font-bold mb-4 shadow-lg">
🎨 Customization
</div>
<h3 className="text-2xl font-semibold mb-4">Create custom LLM promts to extract anything</h3>
<ul className="space-y-3 text-gray-600">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-violet-700 to-purple-700 bg-clip-text text-transparent">
Create custom LLM promts to extract anything
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-2">✓</span>
<span className="text-violet-600 mr-3 text-lg">🔧</span>
Create custom fields and categories with your own LLM prompts
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">✓</span>
<span className="text-violet-600 mr-3 text-lg">🔧</span>
Extract any additional information you need
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">✓</span>
<span className="text-violet-600 mr-3 text-lg">🔧</span>
Automatically categorize by project or category
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">✓</span>
<span className="text-violet-600 mr-3 text-lg">🔧</span>
Ask AI to assess risk level or any other criteria
</li>
</ul>
@@ -203,30 +263,32 @@ export default function LandingPage() {
</div>
{/* Data Export */}
<div className="flex flex-wrap items-center gap-12 mb-20 bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100 flex-row-reverse">
<div className="flex-1 relative aspect-auto rounded-2xl overflow-hidden shadow-2xl ring-8 ring-gray-100 hover:scale-105 transition-all duration-300">
<div className="flex flex-wrap items-center gap-12 mb-20 bg-gradient-to-br from-white via-orange-50/30 to-amber-50/30 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-orange-200 to-amber-200 hover:shadow-2xl transition-all duration-500 group flex-row-reverse">
<div className="flex-1 relative aspect-auto rounded-3xl overflow-hidden shadow-2xl ring-4 ring-gradient-to-r from-orange-200 to-amber-200 hover:scale-105 transition-all duration-500">
<Image src="/landing/export.webp" alt="Export" width={1200} height={1081} />
</div>
<div className="flex-1 min-w-60">
<div className="inline-block px-3 py-1 rounded-full bg-orange-50 text-orange-600 text-sm font-medium mb-4">
Export
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-orange-500 to-amber-600 text-white text-sm font-bold mb-4 shadow-lg">
📦 Export
</div>
<h3 className="text-2xl font-semibold mb-4">Your Data — Your Rules</h3>
<ul className="space-y-3 text-gray-600">
<h3 className="text-2xl font-bold mb-4 bg-gradient-to-r from-orange-700 to-amber-700 bg-clip-text text-transparent">
Your Data — Your Rules
</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-orange-600 mr-2">✓</span>
<span className="text-orange-600 mr-3 text-lg">📤</span>
Flexible filters to export your data for tax prep
</li>
<li className="flex items-center">
<span className="text-orange-600 mr-2">✓</span>
<span className="text-orange-600 mr-3 text-lg">📤</span>
Full-text search across documents
</li>
<li className="flex items-center">
<span className="text-orange-600 mr-2">✓</span>
<span className="text-orange-600 mr-3 text-lg">📤</span>
Export to CSV with attached documents
</li>
<li className="flex items-center">
<span className="text-orange-600 mr-2">✓</span>
<span className="text-orange-600 mr-3 text-lg">📤</span>
Download full data archive to migrate to another service
</li>
</ul>
@@ -236,83 +298,84 @@ export default function LandingPage() {
</section>
{/* Deployment Options */}
<section id="start" className="py-20 px-8 bg-white scroll-mt-20">
<div className="max-w-7xl mx-auto">
<section
id="start"
className="py-20 px-8 bg-gradient-to-br from-white via-pink-50/20 to-indigo-50/20 scroll-mt-20 relative"
>
<div className="absolute inset-0 bg-gradient-to-r from-pink-100/20 to-indigo-100/20" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
<h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-pink-600 to-indigo-600 bg-clip-text text-transparent">
Choose Your Version of TaxHacker
</h2>
</div>
<div className="grid md:grid-cols-2 gap-16">
{/* Self-Hosted Version */}
<div className="bg-gradient-to-b from-white to-gray-50 p-8 rounded-2xl shadow-lg ring-1 ring-gray-100">
<div className="inline-block px-3 py-1 rounded-full bg-violet-50 text-violet-600 text-sm font-medium mb-4">
Use Your Own Server
<div className="bg-gradient-to-br from-white via-violet-50/50 to-indigo-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-violet-200 to-indigo-200 hover:shadow-2xl transition-all duration-500 hover:scale-105 group">
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-violet-500 to-indigo-600 text-white text-sm font-bold mb-4 shadow-lg">
🏠 Use Your Own Server
</div>
<h3 className="text-2xl font-semibold mb-4">
<h3 className="text-2xl font-bold mb-4">
<ColoredText>Self-Hosted Edition</ColoredText>
</h3>
<ul className="space-y-3 text-gray-600 mb-8">
<ul className="space-y-3 text-gray-700 mb-8">
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-indigo-600 mr-3 text-lg">🆓</span>
Free and open source
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-indigo-600 mr-3 text-lg">🔒</span>
Complete control over your data
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
<span className="text-indigo-600 mr-3 text-lg">🏗️</span>
Use at your own infrastructure
</li>
<li className="flex items-center">
<span className="text-blue-600 mr-2">✓</span>
Bring your own OpenAI keys
<span className="text-indigo-600 mr-3 text-lg">🔑</span>
Bring your own keys (OpenAI, Gemini, Mistral, etc.)
</li>
</ul>
<Link
href="https://github.com/vas3k/TaxHacker"
target="_blank"
className="block w-full text-center px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-full hover:opacity-90 transition-all shadow-lg shadow-blue-500/20"
className="block w-full text-center px-6 py-4 bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-bold rounded-full hover:from-violet-700 hover:to-indigo-700 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-110"
>
Free: Github + Docker Compose
Free: Github + Docker Compose 🐳
</Link>
</div>
{/* Cloud Version */}
<div className="bg-gradient-to-b from-white to-gray-50 p-8 rounded-2xl shadow-lg ring-1 ring-gray-100">
<div className="absolute top-4 right-4">
<span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Coming Soon</span>
<div className="bg-gradient-to-br from-white via-pink-50/50 to-purple-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-pink-200 to-purple-200 hover:shadow-2xl transition-all duration-500 hover:scale-105 group relative">
<div className="inline-block px-4 py-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white text-sm font-bold mb-4 shadow-lg">
☁️ We Host It For You
</div>
<div className="inline-block px-3 py-1 rounded-full bg-purple-50 text-purple-600 text-sm font-medium mb-4">
We Host It For You
</div>
<h3 className="text-2xl font-semibold mb-4">
<h3 className="text-2xl font-bold mb-4">
<ColoredText>Cloud Edition</ColoredText>
</h3>
<ul className="space-y-3 text-gray-600 mb-8">
<ul className="space-y-3 text-gray-700 mb-8">
<li className="flex items-center">
<span className="text-gray-400 mr-2">✓</span>
<span className="text-purple-600 mr-3 text-lg">🎯</span>
SaaS version for those who prefer less hassle
</li>
<li className="flex items-center">
<span className="text-gray-400 mr-2">✓</span>
<span className="text-purple-600 mr-3 text-lg">🤖</span>
We provide AI keys and storage
</li>
<li className="flex items-center">
<span className="text-gray-400 mr-2">✓</span>
<span className="text-purple-600 mr-3 text-lg">💳</span>
Yearly subscription plans
</li>
<li className="flex items-center">
<span className="text-gray-400 mr-2">✓</span>
<span className="text-purple-600 mr-3 text-lg">🚀</span>
Automatic updates and new features
</li>
</ul>
<Link
href="/cloud"
className="block w-full text-center px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-full hover:opacity-90 transition-all shadow-lg shadow-blue-500/20"
className="block w-full text-center px-6 py-4 bg-gradient-to-r from-pink-600 to-purple-600 text-white font-bold rounded-full hover:from-pink-700 hover:to-purple-700 transition-all duration-300 shadow-xl hover:shadow-2xl hover:scale-110"
>
Early Access: from €35/year
Early Access: from €35/year 💎
</Link>
</div>
</div>
@@ -320,105 +383,116 @@ export default function LandingPage() {
</section>
{/* Upcoming Features */}
<section className="py-20 px-8 bg-gradient-to-b from-white to-gray-50 mt-28">
<div className="max-w-7xl mx-auto">
<section className="py-20 px-8 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 mt-28 relative overflow-hidden">
<div className="absolute top-10 left-10 w-64 h-64 bg-gradient-to-r from-pink-400 to-indigo-400 rounded-full opacity-5 blur-3xl" />
<div className="absolute bottom-10 right-10 w-80 h-80 bg-gradient-to-r from-indigo-400 to-pink-400 rounded-full opacity-5 blur-3xl" />
<div className="max-w-7xl mx-auto relative z-10">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
<h2 className="text-3xl font-bold mb-4 bg-gradient-to-r from-pink-600 to-indigo-600 bg-clip-text text-transparent">
Upcoming Features
</h2>
<p className="text-gray-600 max-w-2xl mx-auto">
<p className="text-gray-700 max-w-2xl mx-auto font-medium">
We&apos;re a small, indie project constantly improving. Here&apos;s what we&apos;re working on next.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 mb-16">
{/* AI Improvements */}
<div className="bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="bg-gradient-to-br from-white via-purple-50/50 to-indigo-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-purple-200 to-indigo-200 hover:shadow-2xl transition-all duration-500 hover:scale-105">
<div className="flex items-center gap-3 mb-4">
<span className="text-2xl">🤖</span>
<h3 className="text-xl font-semibold">Better AI Analytics & Agents</h3>
<span className="text-3xl">🤖</span>
<h3 className="text-xl font-bold bg-gradient-to-r from-purple-700 to-indigo-700 bg-clip-text text-transparent">
Better AI Analytics & Agents
</h3>
</div>
<ul className="space-y-3 text-gray-600">
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-purple-600 mr-3 text-lg">🔮</span>
Income & expense insights
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-purple-600 mr-3 text-lg">🔮</span>
AI agents to automate your workflows
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-purple-600 mr-3 text-lg">🔮</span>
Recommendations for tax optimization
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-purple-600 mr-3 text-lg">🔮</span>
Custom and local LLM models
</li>
</ul>
</div>
{/* Smart Reports */}
<div className="bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="bg-gradient-to-br from-white via-pink-50/50 to-rose-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-pink-200 to-rose-200 hover:shadow-2xl transition-all duration-500 hover:scale-105">
<div className="flex items-center gap-3 mb-4">
<span className="text-2xl">📂</span>
<h3 className="text-xl font-semibold">Smart Reports & Reminders</h3>
<span className="text-3xl">📊</span>
<h3 className="text-xl font-bold bg-gradient-to-r from-pink-700 to-rose-700 bg-clip-text text-transparent">
Smart Reports & Reminders
</h3>
</div>
<ul className="space-y-3 text-gray-600">
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-pink-600 mr-3 text-lg">📈</span>
Monthly or quarterly VAT reports
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-pink-600 mr-3 text-lg">📈</span>
Tax reminders
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-pink-600 mr-3 text-lg">📈</span>
Annual income & expense reports
</li>
</ul>
</div>
{/* Transaction Review */}
<div className="bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="bg-gradient-to-br from-white via-green-50/50 to-emerald-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-green-200 to-emerald-200 hover:shadow-2xl transition-all duration-500 hover:scale-105">
<div className="flex items-center gap-3 mb-4">
<span className="text-2xl">📥</span>
<h3 className="text-xl font-semibold">Multiple Transaction Review</h3>
<span className="text-3xl">📥</span>
<h3 className="text-xl font-bold bg-gradient-to-r from-green-700 to-emerald-700 bg-clip-text text-transparent">
Multiple Transaction Review
</h3>
</div>
<ul className="space-y-3 text-gray-600">
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-green-600 mr-3 text-lg">💳</span>
Bank statement analysis
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-green-600 mr-3 text-lg">💳</span>
Automatic data completeness checks
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-green-600 mr-3 text-lg">💳</span>
Unpaid invoice tracking
</li>
</ul>
</div>
{/* Custom Fields */}
<div className="bg-white p-8 rounded-2xl shadow-sm ring-1 ring-gray-100">
<div className="bg-gradient-to-br from-white via-orange-50/50 to-amber-50/50 p-8 rounded-3xl shadow-xl ring-2 ring-gradient-to-r from-orange-200 to-amber-200 hover:shadow-2xl transition-all duration-500 hover:scale-105">
<div className="flex items-center gap-3 mb-4">
<span className="text-2xl">🤯</span>
<h3 className="text-xl font-semibold">Presets and Plugins</h3>
<span className="text-3xl">🧩</span>
<h3 className="text-xl font-bold bg-gradient-to-r from-orange-700 to-amber-700 bg-clip-text text-transparent">
Presets and Plugins
</h3>
</div>
<ul className="space-y-3 text-gray-600">
<ul className="space-y-3 text-gray-700">
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-orange-600 mr-3 text-lg">🌍</span>
Presets for different countries and industries
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-orange-600 mr-3 text-lg">🌍</span>
Custom reports for various use-cases
</li>
<li className="flex items-center">
<span className="text-purple-600 mr-2">→</span>
<span className="text-orange-600 mr-3 text-lg">🌍</span>
Community plugins and reports
</li>
</ul>
@@ -430,10 +504,13 @@ export default function LandingPage() {
</div>
</section>
<footer className="py-8 px-8 bg-white">
<div className="max-w-7xl mx-auto text-center text-sm text-gray-500">
<footer className="py-8 px-8 bg-gradient-to-r from-pink-50 to-indigo-50 border-t-2 border-gradient-to-r from-pink-200 to-indigo-200">
<div className="max-w-7xl mx-auto text-center text-sm text-gray-600">
Made with ❤️ in Berlin by{" "}
<Link href="https://github.com/vas3k" className="underline">
<Link
href="https://github.com/vas3k"
className="underline font-semibold hover:text-pink-600 transition-colors"
>
@vas3k
</Link>
</div>
@@ -441,25 +518,37 @@ export default function LandingPage() {
<section className="py-12 px-8">
<div className="max-w-7xl mx-auto">
<div className="flex flex-wrap gap-4 justify-center">
<Link href={`mailto:${config.app.supportEmail}`} className="text-sm text-gray-600 hover:text-gray-900">
<Link
href={`mailto:${config.app.supportEmail}`}
className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors"
>
Contact Us
</Link>
<Link href="/docs/terms" className="text-sm text-gray-600 hover:text-gray-900">
<Link
href="/docs/terms"
className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors"
>
Terms of Service
</Link>
<Link href="/docs/privacy_policy" className="text-sm text-gray-600 hover:text-gray-900">
<Link
href="/docs/privacy_policy"
className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors"
>
Privacy Policy
</Link>
<Link href="/docs/ai" className="text-sm text-gray-600 hover:text-gray-900">
<Link href="/docs/ai" className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors">
AI Use Disclosure
</Link>
<Link href="/docs/cookie" className="text-sm text-gray-600 hover:text-gray-900">
<Link
href="/docs/cookie"
className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors"
>
Cookie Policy
</Link>
<Link
href="https://github.com/vas3k/TaxHacker"
target="_blank"
className="text-sm text-gray-600 hover:text-gray-900"
className="text-sm text-gray-600 hover:text-pink-600 font-medium transition-colors"
>
Source Code
</Link>