# Project export: LegalEase

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: CruzHacks 2026
- Tagline: LegalEase democratizes justice by using AI to translate legal jargon into plain English. We're fighting information inequality by making legal documents understandable for everyone, not just lawyers.
- Devpost: https://devpost.com/software/legalease-c2xwto
- GitHub: https://github.com/tishagangar7/LegalEase
- Demo: https://legal-ease-mu.vercel.app/
- Video: https://www.youtube.com/embed/4wAQVUpEp60?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 2 GitHub contributor(s) — Tisha Gangar (10 commits), Lillian Hamilton (2 commits)

## Devpost submission (written by the team)

### Inspiration

LegalEase was founded at Cruzhacks 2026 when we wanted to develop a web app to help people better understand legal jargon. A significant divide between people and the lawmakers is created when complex legal language and inaccessible documents hinder the public's ability to understand rights, obligations, and what they are contractually agreeing to. Contracts, terms of service, privacy policies, and legal notices frequently use dense language and complex terminology that can feel intimidating and exclusionary, especially to those in marginalized groups. Many people sign or agree to documents without fully understanding what they mean simply because the language contains too much jargon. Legal language can be especially isolating to people who’s first language is not English and people who may not have access to legal counsel. In this way, legal documents and the legal system in the United States contribute to the racialized and classist systems of our society. We realized that legal documents shouldn't be exclusive to lawyers. Everyone deserves to understand what is entailed in the documents they sign, the policies they accept, and the agreements that shape their lives.

### What it does

LegalEase is a web application that simplifies legal documents by translating complex legal jargon into clear, plain-English explanations at the click of a button. Users can input legal text, such as contracts, policies, or legal notices, and receive an easy-to-understand summary or simplification that explains what each section means, why it matters, and what potential obligations or red flags to be aware of. The platform is designed for accessibility and ease of use, helping users better understand documents they may otherwise skim or avoid going too deep into. LegalEase allows individuals to engage with legal content efficiently and confidentially, without requiring any prior legal knowledge.

### How we built it

We began by designing the structure and flow of the website, focusing on clarity and usability. The frontend was built to provide a clean, intuitive interface that allows users to easily input legal text and view simplified explanations. On the backend, we implemented language-processing Gemini integration to analyze legal text and generate understandable summaries. Throughout the development process, we emphasized user-centered design and readability to ensure the output remained accessible to non-expert users. The frontend was developed using React and Next.js, styled with Tailwind CSS to create a clean, intuitive, and approachable interface. We focused heavily on readability, spacing, and visual hierarchy to make dense legal content feel less intimidating. Interactive features, such as text highlighting and on-demand explanations, were implemented to help users engage with specific clauses instead of passively reading long documents. On the backend, we built a Python FastAPI server that handles document processing and AI analysis. Legal text is sent to the backend, where it is analyzed using the Gemini API to generate plain-English summaries, simplified versions of the text, and contextual red-flag detection. We structured prompts carefully to preserve legal meaning while translating jargon into language that is clear and understandable to non-experts. We used GitHub for version control and collaboration, working across branches to divide frontend and backend development. The backend and frontend were deployed separately using Render and Vercel, allowing us to manage environment variables securely and ensure smooth communication between services. This modular setup made it easier to iterate quickly and debug issues during the hackathon.

### Challenges we ran into

One of the main challenges we faced was balancing accuracy with simplicity. Legal language is precise by nature, and simplifying it without losing critical meaning required careful consideration. Another challenge was ensuring that explanations were detailed enough to be helpful while remaining concise and not overwhelming the user. Some other challenges we encountered were understanding how to use git for version control. We had some problems with large files not being able to be pushed to github and some problems pushing and committing from branches and resolving merge conflicts. Additionally, designing an interface that felt approachable while handling dense legal content required multiple design iterations to get right.

### Accomplishments we're proud of

We’re proud of building a working platform that meaningfully improves the accessibility of legal information. LegalEase successfully transforms complex legal text into clear, readable explanations while maintaining usefulness and clarity. Some members of our team had never worked with React, Node.js, and Tailwind CSS before, so we are proud of ourselves for learning to use these tools for the first time. We also were able to include working Gemini integration in our project, which is something that we had issues with in the previous hackathon we attended. We’re also proud of creating an intuitive user interface that reduces the intimidation factor often associated with legal documents. Completing a functional, user-focused project within the time constraints of a hackathon was a major accomplishment for our team.

### What we learned

Through this project, we learned how challenging yet impactful it is to design tools that simplify complex, high-stakes information. We gained experience in building user-centered web applications, working with nuanced language, and collaborating effectively as a team under time constraints. Some of our group members had never used React, Node.js or Tailwind CSS before so through the process of developing this web application, we learned more about these tools. We also learned about how to quickly familiarize ourselves with different frameworks and environmenets, while using them to implement our project ideas. We also learned the importance of iteration, testing, and clear communication when developing a product meant for a broad audience. We learned to consider different kinds of people coming with different walks of life and a range of experiences.

### What's next

Moving forward, we plan to expand LegalEase by adding support for full document uploads, section-by-section highlighting, and contextual alerts for potentially risky clauses. We also hope to improve explanation accuracy, add customization options based on user familiarity with legal topics, and introducing multilingual support to extend our reach toward non-English speaking communities as well. Our long-term vision is to continue developing LegalEase into a comprehensive tool that makes legal understanding accessible, transparent, and empowering for everyone.

## README (from the GitHub repository)

# LegalEase

AI-powered web app that converts complex legal documents into plain, understandable language.

## Tech Stack

- Frontend: `Next.js` + `React` + `Tailwind CSS`
- Backend: `FastAPI`
- AI: `Google Gemini`

## Local Development

### 1) Backend

```bash
cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
# set GEMINI_API_KEY in .env
uvicorn main:app --reload
```

### 2) Frontend

```bash
cd frontend
npm install
cp .env.local.example .env.local
# set NEXT_PUBLIC_API_URL if needed (defaults to http://127.0.0.1:8000)
npm run dev
```

## Deployment

Recommended setup:
- Frontend on Vercel
- Backend on Render

### Deploy Backend (Render)

This repo includes `render.yaml` for Blueprint deploy.

1. Push this repo to GitHub.
2. In Render, create a new Blueprint service from this repo.
3. Set required env vars in Render:
   - `GEMINI_API_KEY`
   - `FRONTEND_ORIGINS` (comma-separated, e.g. `https://your-app.vercel.app`)
4. Deploy and verify:
   - `GET /health` returns `{"status":"healthy","version":"1.0"}`

### Deploy Frontend (Vercel)

1. Import this repo in Vercel.
2. Set root directory to `frontend`.
3. Add env var:
   - `NEXT_PUBLIC_API_URL=https://<your-render-service>.onrender.com`
4. Deploy.

## Production Notes

- Do not commit real secrets (`.env`, API keys).
- CORS is controlled by backend env var `FRONTEND_ORIGINS`.
- The repo ignores Python cache files (`__pycache__`, `*.pyc`) and Next build output.


## Detected evidence (automated analysis)

Indexed codebase: 25 recognized source files, 206 KB.
- CSS (language) — detected in the code
- FastAPI (technology) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- Google Gemini (technology) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (35 of 35)

```
.gitignore
backend/.env.example
backend/.gitignore
backend/.python-version
backend/list_models.py
backend/main.py
backend/pdf_parser.py
backend/README.md
backend/requirements.txt
backend/runtime.txt
backend/simplifier.py
backend/test.py
frontend/.env.local
frontend/.env.local.example
frontend/app/about/page.jsx
frontend/app/components/DocumentReader.jsx
frontend/app/components/Footer.jsx
frontend/app/components/Header.jsx
frontend/app/components/LayoutWrapper.jsx
frontend/app/contact/page.jsx
frontend/app/document/page.jsx
frontend/app/examples/page.jsx
frontend/app/features/page.jsx
frontend/app/globals.css
frontend/app/layout.jsx
frontend/app/page.jsx
frontend/app/pricing/page.jsx
frontend/app/team/page.jsx
frontend/package.json
frontend/postcss.config.js
frontend/README.md
frontend/tailwind.config.js
README.md
render.yaml
requirements.txt
```

### Dependencies

- backend/requirements.txt: fastapi@==0.104.1, fpdf2@==2.7.6, google-generativeai@==0.3.1, pdfplumber@==0.10.3, PyPDF2@==3.0.1, python-docx@==1.1.0, python-dotenv@==1.0.0, python-multipart@==0.0.6, uvicorn@==0.24.0
- frontend/package.json: autoprefixer@^10.4.16, lucide-react@^0.562.0, next@^14, postcss@^8.4.32, react@^18, react-dom@^18, tailwindcss@^3.3.6
- requirements.txt: annotated-types@==0.7.0, anyio@==3.7.1, certifi@==2026.1.4, cffi@==2.0.0, charset-normalizer@==3.4.4, click@==8.3.1, cryptography@==46.0.3, defusedxml@==0.7.1, fastapi@==0.104.1, fonttools@==4.61.1, fpdf2@==2.7.6, google-ai-generativelanguage@==0.4.0, google-api-core@==2.29.0, google-auth@==2.47.0, google-generativeai@==0.3.1, googleapis-common-protos@==1.72.0, grpcio@==1.76.0, grpcio-status@==1.62.3, h11@==0.16.0, idna@==3.11, lxml@==6.0.2, pdfminer.six@==20221105, pdfplumber@==0.10.3, pillow@==12.1.0, proto-plus@==1.27.0, protobuf@==4.25.8, pyasn1@==0.6.2, pyasn1_modules@==0.4.2, pycparser@==2.23, pydantic@==2.12.5, pydantic_core@==2.41.5, PyPDF2@==3.0.1, pypdfium2@==5.3.0, python-docx@==1.1.0, python-dotenv@==1.0.0, python-multipart@==0.0.6, requests@==2.32.5, rsa@==4.9.1, sniffio@==1.3.1, starlette@==0.27.0, tqdm@==4.67.1, typing_extensions@==4.15.0, typing-inspection@==0.4.2, urllib3@==2.6.3, uvicorn@==0.24.0

### Recent commits (newest first)

- Pin Render Python runtime to 3.12
- final changes before deployment
- deploying
- preparing for deployment
- gitignore
- final commit maybe
- Merge branch 'main' of github.com:tishagangar7/LegalEase
- corrected frontend
- Merge pull request #1 from tishagangar7/tisha
- backend updates
- conflict resolution
- backend
- a
- frontend
- initial setup
- Initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### requirements.txt

```
annotated-types==0.7.0
anyio==3.7.1
certifi==2026.1.4
cffi==2.0.0
charset-normalizer==3.4.4
click==8.3.1
cryptography==46.0.3
defusedxml==0.7.1
fastapi==0.104.1
fonttools==4.61.1
fpdf2==2.7.6
google-ai-generativelanguage==0.4.0
google-api-core==2.29.0
google-auth==2.47.0
google-generativeai==0.3.1
googleapis-common-protos==1.72.0
grpcio==1.76.0
grpcio-status==1.62.3
h11==0.16.0
idna==3.11
lxml==6.0.2
pdfminer.six==20221105
pdfplumber==0.10.3
pillow==12.1.0
proto-plus==1.27.0
protobuf==4.25.8
pyasn1==0.6.2
pyasn1_modules==0.4.2
pycparser==2.23
pydantic==2.12.5
pydantic_core==2.41.5
PyPDF2==3.0.1
pypdfium2==5.3.0
python-docx==1.1.0
python-dotenv==1.0.0
python-multipart==0.0.6
requests==2.32.5
rsa==4.9.1
sniffio==1.3.1
starlette==0.27.0
tqdm==4.67.1
typing-inspection==0.4.2
typing_extensions==4.15.0
urllib3==2.6.3
uvicorn==0.24.0

```

### backend/requirements.txt

```
fastapi==0.104.1
uvicorn==0.24.0
python-multipart==0.0.6
PyPDF2==3.0.1
pdfplumber==0.10.3
python-docx==1.1.0
google-generativeai==0.3.1
python-dotenv==1.0.0
fpdf2==2.7.6
```

### frontend/package.json

```
{
  "name": "frontend",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "lucide-react": "^0.562.0",
    "next": "^14",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.6"
  }
}

```

### backend/main.py

```python
#main.py

import os
from fastapi import FastAPI, UploadFile, File, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from dotenv import load_dotenv
from pdf_parser import extract_text_from_file
from simplifier import (
    simplify_legal_text, 
    identify_red_flags, 
    generate_summary,
    explain_legal_term
)

load_dotenv()


def get_allowed_origins() -> list[str]:
    """
    Read a comma-separated origin allow-list from env.
    Falls back to local frontend URLs for development.
    """
    raw_origins = os.getenv("FRONTEND_ORIGINS", "")
    parsed_origins = [origin.strip() for origin in raw_origins.split(",") if origin.strip()]
    if parsed_origins:
        return parsed_origins
    return [
        "http://localhost:3000",
        "http://127.0.0.1:3000",
    ]

app = FastAPI(title="LegalEase API", version="1.0")

# Enable CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=get_allowed_origins(),
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def read_root():
    return {
        "name": "LegalEase API",
        "version": "1.0",
        "status": "running",
        "endpoints": ["/health", "/analyze", "/analyze-text", "/explain"]
    }

@app.get("/health")
def health_check():
    return {"status": "healthy", "version": "1.0"}

@app.get("/reading-levels")
def get_reading_levels():
    return {
        "levels": [
            "5th grade",
            "8th grade",
            "High school",
            "College"
        ]
    }

# File upload endpoint
@app.post("/analyze")
async def analyze_document(
    file: UploadFile = File(...),
    reading_level: str = "5th grade"
):
    """
    Main endpoint: Upload legal document, get simplified version
    """
    try:
        # Read file
        file_bytes = await file.read()
        
        # Extract text
        original_text = extract_text_from_file(file_bytes, file.filename)
        
        if len(original_text) < 100:
            raise HTTPException(
                status_code=400, 
                detail="Document seems too short or unreadable"
            )
        
        # Generate summary
        summary = generate_summary(original_text)
        
        # Simplify
        simplification_result = simplify_legal_text(original_text, reading_level)
        
        # Identify red flags
        red_flags = identify_red_flags(original_text)
        
        return {
            "success": True,
            "summary": summary,
            "original_text": original_text,
            "simplified_text": simplification_result["simplified_text"],
            "original_length": len(original_text),
            "simplified_length": len(simplification_result["simplified_text"]),
            "red_flags": red_flags,
            "reading_level": reading_level
        }
    
    except HTTPException:
        raise
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

# Text analysis endpoint (no file upload)
class TextAnalysisRequest(BaseModel):
    text: str
    reading_level: str = "5th grade"

@app.post("/analyze-text")
async def analyze_text(request: TextAnalysisRequest):
    """
    Analyze pasted text (no file upload needed)
    """
    try:
        print(f"DEBUG: Request received")
        print(f"DEBUG: Text length: {len(request.text)}")
        print(f"DEBUG: Reading level: {request.reading_level}")
        
        original_text = request.text
        reading_level = request.reading_level
        
        if len(original_text) < 100:
            print(f"DEBUG: Text too short ({len(original_text)} chars)")
            raise HTTPException(
                status_code=400, 
                detail="Text is too short (minimum 100 characters)"
            )
        
        # Generate summary
        print("DEBUG: Calling generate_summary...")
        summary = generate_summary(original_text)
        print(f"DEBUG: Summary: {summary[:50]}...")
        
        # Simplify
        print("DEBUG: Calling simplify_legal_text...")
        simplification_result = simplify_legal_text(original_text, reading_level)
        print(f"DEBUG: Simplification complete")
        
        # Identify red flags
        print("DEBUG: Calling identify_red_flags...")
        red_flags = identify_red_flags(original_text)
        print(f"DEBUG: Found {len(red_flags)} red flags")
        
        result = {
            "success": True,
            "summary": summary,
            "original_text": original_text,
            "simplified_text": simplification_result["simplified_text"],
            "original_length": len(original_text),
            "simplified_length": len(simplification_result["simplified_text"]),
            "red_flags": red_flags,
            "reading_level": reading_level
        }
        
        print("DEBUG: Returning result")
        return result
    
    except HTTPException:
        raise
    except Exception as e:
        print(f"ERROR in analyze_text: {str(e)}")
        import traceback
        traceback.print_exc()
        raise HTTPException(status_code=500, detail=str(e))
# Explain specific text endpoint
class ExplainRequest(BaseModel):
    text: str
    context: str = ""

@app.post("/explain")
async def explain_text(request: ExplainRequest):
    """
    Provide detailed explanation for highlighted text
    """
    try:
        highlighted_text = request.text
        context = request.context
        
        if len(highlighted_text) < 5:
            raise HTTPException(
                status_code=400, 
                detail="Text too short to explain"
            )
        
        explanation = explain_legal_term(highlighted_text, context)
        
        return {
            "success": True,
            "highlighted_text": highlighted_text,
            "explanation": explanation
        }
    
    except HTTPException:
        raise
    except Exception as e:
        raise HTTPException(statu
[truncated — 121 more characters]
```

### frontend/app/layout.jsx

```javascript
import './globals.css';  // Add this line

export const metadata = {
  title: "LegalEase - Legal Document Summarizer",
  description: "Upload legal documents and get AI-powered summaries in plain English",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}
```

### frontend/app/features/page.jsx

```javascript
"use client";

// import LayoutWrapper from "@/app/components/LayoutWrapper";
import LayoutWrapper from "../components/LayoutWrapper";
import { Zap, Shield, Users, FileText, Sparkles, Lock } from "lucide-react";

export default function FeaturesPage() {
  const features = [
    {
      icon: Zap,
      title: "Lightning Fast Processing",
      description: "Get summaries of 50-page documents in under 30 seconds using our optimized AI models.",
      color: "from-yellow-500 to-amber-500"
    },
    {
      icon: Shield,
      title: "Bank-Level Security",
      description: "End-to-end encryption with automatic file deletion. Your documents are never stored or shared.",
      color: "from-maroon-600 to-brown-700"
    },
    {
      icon: Sparkles,
      title: "AI-Powered Accuracy",
      description: "Trained on thousands of legal documents with 95% accuracy on complex legal terminology.",
      color: "from-purple-600 to-pink-600"
    },
    {
      icon: Users,
      title: "Team Collaboration",
      description: "Share summaries securely with colleagues and collaborate on document analysis.",
      color: "from-blue-600 to-cyan-600"
    },
    {
      icon: FileText,
      title: "Multi-Format Support",
      description: "Upload PDF, DOC, DOCX, TXT, and even images with OCR text extraction.",
      color: "from-green-600 to-emerald-600"
    },
    {
      icon: Lock,
      title: "100% Confidential",
      description: "Your data is processed in isolated environments and never used for training.",
      color: "from-gray-700 to-gray-900"
    }
  ];

  return (
    <LayoutWrapper>
      <div className="min-h-screen bg-gradient-to-b from-amber-50 to-white">
        <main className="container mx-auto px-6 py-12">
          <div className="max-w-6xl mx-auto">
            {/* Header */}
            <div className="text-center mb-12">
              <h1 className="text-5xl font-bold text-gray-900 mb-6">
                Features
              </h1>
              <p className="text-xl text-brown-600 max-w-3xl mx-auto">
                Everything you need to simplify legal document analysis, powered by cutting-edge AI technology.
              </p>
            </div>

            {/* Features Grid */}
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {features.map((feature, index) => (
                <div 
                  key={index}
                  className="bg-white rounded-2xl p-8 shadow-lg border border-amber-100 hover:shadow-xl transition-shadow"
                >
                  <div className={`w-16 h-16 bg-gradient-to-br ${feature.color} rounded-2xl flex items-center justify-center mb-6`}>
                    <feature.icon className="w-8 h-8 text-white" />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">
                    {feature.title}
                  </h3>
                  <p className="text-brown-600">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>

            {/* CTA */}
            <div className="mt-16 text-center">
              <div className="inline-block p-8 bg-gradient-to-r from-maroon-50 to-amber-50 rounded-2xl border border-maroon-100">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">
                  Ready to experience these features?
                </h2>
                <a
                  href="/"
                  className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-maroon-700 to-brown-800 text-white rounded-xl font-semibold hover:from-maroon-800 hover:to-brown-900 transition-all"
                >
                  Get Started Free
                </a>
              </div>
            </div>
          </div>
        </main>
      </div>
    </LayoutWrapper>
  );
}
```

### frontend/app/examples/page.jsx

```javascript
"use client";

// import LayoutWrapper from "@/app/components/LayoutWrapper";
import LayoutWrapper from "../components/LayoutWrapper";
import { FileText, Briefcase, Building, GraduationCap, Home, User } from "lucide-react";

export default function ExamplesPage() {
  const examples = [
    {
      icon: FileText,
      title: "Non-Disclosure Agreements",
      description: "Quickly understand confidentiality obligations and key restrictions.",
      before: "5 pages of complex legal language",
      after: "Key points in plain English"
    },
    {
      icon: Briefcase,
      title: "Employment Contracts",
      description: "Identify important clauses about compensation, benefits, and termination.",
      before: "15-page contract with legal jargon",
      after: "Clear summary of rights and obligations"
    },
    {
      icon: Building,
      title: "Commercial Leases",
      description: "Understand rent terms, maintenance responsibilities, and renewal options.",
      before: "20+ pages of property law",
      after: "Simple breakdown of lease terms"
    },
    {
      icon: GraduationCap,
      title: "Academic Papers",
      description: "Extract key findings and methodology from complex research.",
      before: "Dense academic writing",
      after: "Concise research summary"
    },
    {
      icon: Home,
      title: "Real Estate Contracts",
      description: "Clarify purchase terms, contingencies, and closing requirements.",
      before: "Confusing property terms",
      after: "Clear purchase obligations"
    },
    {
      icon: User,
      title: "Privacy Policies",
      description: "Understand how your data is collected, used, and shared.",
      before: "Thousands of words of legalese",
      after: "Simple privacy overview"
    }
  ];

  return (
    <LayoutWrapper>
      <div className="min-h-screen bg-gradient-to-b from-amber-50 to-white">
        <main className="container mx-auto px-6 py-12">
          <div className="max-w-6xl mx-auto">
            {/* Header */}
            <div className="text-center mb-12">
              <h1 className="text-5xl font-bold text-gray-900 mb-6">
                Real-World Examples
              </h1>
              <p className="text-xl text-brown-600 max-w-3xl mx-auto">
                See how LegalEase transforms complex documents into clear, actionable insights.
              </p>
            </div>

            {/* Examples Grid */}
            <div className="grid lg:grid-cols-2 gap-8">
              {examples.map((example, index) => (
                <div 
                  key={index}
                  className="bg-white rounded-2xl p-8 shadow-lg border border-amber-100"
                >
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-14 h-14 bg-gradient-to-br from-maroon-100 to-amber-100 rounded-xl flex items-center justify-center">
                      <example.icon className="w-7 h-7 text-maroon-700" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-gray-900">
                        {example.title}
                      </h3>
                      <p className="text-brown-600">
                        {example.description}
                      </p>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-red-50 rounded-lg border border-red-100">
                      <div className="text-sm font-semibold text-red-700 mb-1">Before</div>
                      <div className="text-red-900">{example.before}</div>
                    </div>
                    <div className="p-4 bg-green-50 rounded-lg border border-green-100">
                      <div className="text-sm font-semibold text-green-700 mb-1">After</div>
                      <div className="text-green-900">{example.after}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Demo CTA */}
            <div className="mt-16 text-center">
              <div className="inline-block p-8 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl border border-blue-100">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">
                  Want to see your documents transformed?
                </h2>
                <p className="text-brown-600 mb-6 max-w-2xl mx-auto">
                  Upload a sample document and see the magic in action. No signup required.
                </p>
                <a
                  href="/"
                  className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-xl font-semibold hover:from-blue-700 hover:to-cyan-700 transition-all"
                >
                  Try Live Demo
                </a>
              </div>
            </div>
          </div>
        </main>
      </div>
    </LayoutWrapper>
  );
}
```

### frontend/app/about/page.jsx

```javascript
"use client";

// import LayoutWrapper from "@/app/components/LayoutWrapper";
import LayoutWrapper from "../components/LayoutWrapper";
import { Users, Target, Globe, Heart } from "lucide-react";

export default function AboutPage() {
  const team = [
    { name: "Alex Chen", role: "CEO & Founder", bio: "Former legal tech entrepreneur with 10+ years experience." },
    { name: "Dr. Maria Rodriguez", role: "Chief AI Officer", bio: "PhD in Computational Linguistics from Stanford." },
    { name: "James Wilson", role: "Head of Product", bio: "Ex-Google PM focused on accessibility in tech." },
    { name: "Sarah Johnson", role: "Legal Counsel", bio: "JD from Harvard Law with corporate law background." }
  ];

  return (
    <LayoutWrapper>
      <div className="min-h-screen bg-gradient-to-b from-amber-50 to-white">
        <main className="container mx-auto px-6 py-12">
          <div className="max-w-6xl mx-auto">
            {/* Hero */}
            <div className="text-center mb-16">
              <h1 className="text-5xl font-bold text-gray-900 mb-6">
                About LegalEase
              </h1>
              <p className="text-xl text-brown-600 max-w-3xl mx-auto">
                We're on a mission to make legal understanding accessible to everyone, not just lawyers.
              </p>
            </div>

            {/* Our Story */}
            <div className="bg-white rounded-2xl p-8 shadow-lg border border-amber-100 mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-6">Our Story</h2>
              <div className="space-y-6 text-brown-700">
                <p>
                  LegalEase was founded at Cruzhacks 2026 when we wanted to develop a web app to help people better
                  stand legal jargon. A significant divide between people and the government is created when complex legal language 
                  and inaccessible documents hinder the public's ability to understand their rights, obligations, and the reasoning behind government actions.
                </p>
                <p>
                  We realized that legal documents shouldn't be exclusive to lawyers. Everyone deserves to understand 
                  the agreements they sign, the policies they accept, and the documents that shape their lives.
                </p>
                <p>
                  Today, LegalEase combines cutting-edge AI with a deep commitment to accessibility, helping thousands 
                  of people navigate legal complexity with confidence.
                </p>
              </div>
            </div>

            {/* Values */}
            <div className="grid md:grid-cols-2 gap-8 mb-12">
              <div className="bg-gradient-to-br from-maroon-50 to-amber-50 rounded-2xl p-8 border border-maroon-100">
                <Target className="w-12 h-12 text-maroon-700 mb-4" />
                <h3 className="text-xl font-bold text-gray-900 mb-3">Our Mission</h3>
                <p className="text-brown-700">
                  Democratize legal understanding by making complex documents accessible, clear, and comprehensible for everyone.
                </p>
              </div>
              
              <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-8 border border-blue-100">
                <Globe className="w-12 h-12 text-blue-700 mb-4" />
                <h3 className="text-xl font-bold text-gray-900 mb-3">Our Vision</h3>
                <p className="text-brown-700">
                  A world where no one signs a document they don't fully understand, and legal literacy is universal.
                </p>
              </div>
            </div>

            {/* Team
            <div className="mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Our Team</h2>
              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {team.map((member, idx) => (
                  <div key={idx} className="bg-white rounded-xl p-6 shadow border border-amber-100">
                    <div className="w-16 h-16 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full mb-4"></div>
                    <h4 className="font-bold text-gray-900">{member.name}</h4>
                    <p className="text-maroon-700 text-sm mb-2">{member.role}</p>
                    <p className="text-brown-600 text-sm">{member.bio}</p>
                  </div>
                ))}
              </div>
            </div> */}

            {/* CruzHacks */}
            <div className="text-center p-8 bg-gradient-to-r from-maroon-50 to-purple-50 rounded-2xl border border-maroon-100">
              <Heart className="w-12 h-12 text-maroon-700 mx-auto mb-4" />
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                Built for CruzHacks 2026
              </h2>
              <p className="text-brown-700 max-w-2xl mx-auto">
                LegalEase started as a project for CruzHacks 2026, where our team came together to solve 
                a real-world problem affecting millions. We're proud to continue developing this tool 
                with the hackathon spirit of innovation and impact.
              </p>
            </div>
          </div>
        </main>
      </div>
    </LayoutWrapper>
  );
}
```

### frontend/app/pricing/page.jsx

```javascript
"use client";

// import LayoutWrapper from "@/app/components/LayoutWrapper";
import LayoutWrapper from "../components/LayoutWrapper";
import { Check, Zap, Users, Building } from "lucide-react";

export default function PricingPage() {
  const plans = [
    {
      name: "Free",
      price: "$0",
      period: "forever",
      icon: Zap,
      color: "from-gray-400 to-gray-600",
      features: [
        "5 documents per month",
        "Basic AI summaries",
        "Text-only uploads",
        "Standard processing speed",
        "Web access only"
      ],
      buttonText: "Get Started",
      buttonColor: "bg-gray-600 hover:bg-gray-700"
    },
    {
      name: "Pro",
      price: "$29",
      period: "per month",
      icon: Users,
      color: "from-maroon-600 to-brown-700",
      popular: true,
      features: [
        "50 documents per month",
        "Advanced AI analysis",
        "PDF & DOCX support",
        "Priority processing",
        "Team collaboration (3 users)",
        "API access",
        "Export to PDF/Word"
      ],
      buttonText: "Start Free Trial",
      buttonColor: "bg-gradient-to-r from-maroon-700 to-brown-800 hover:from-maroon-800 hover:to-brown-900"
    },
    {
      name: "Enterprise",
      price: "Custom",
      period: "tailored",
      icon: Building,
      color: "from-gray-800 to-black",
      features: [
        "Unlimited documents",
        "Custom AI models",
        "Full API integration",
        "Dedicated support",
        "Unlimited team members",
        "SLA guarantee",
        "On-premise deployment",
        "Custom security audits"
      ],
      buttonText: "Contact Sales",
      buttonColor: "bg-gray-900 hover:bg-black"
    }
  ];

  return (
    <LayoutWrapper>
      <div className="min-h-screen bg-gradient-to-b from-amber-50 to-white">
        <main className="container mx-auto px-6 py-12">
          <div className="max-w-6xl mx-auto">
            {/* Header */}
            <div className="text-center mb-12">
              <h1 className="text-5xl font-bold text-gray-900 mb-6">
                Simple, Transparent Pricing
              </h1>
              <p className="text-xl text-brown-600 max-w-3xl mx-auto">
                Choose the plan that fits your needs. All plans include our core AI technology.
              </p>
            </div>

            {/* Pricing Cards */}
            <div className="grid md:grid-cols-3 gap-8">
              {plans.map((plan, index) => (
                <div 
                  key={index}
                  className={`bg-white rounded-2xl p-8 shadow-lg border ${plan.popular ? 'border-maroon-300 shadow-xl' : 'border-amber-100'} relative`}
                >
                  {plan.popular && (
                    <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                      <span className="bg-gradient-to-r from-maroon-600 to-brown-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
                        Most Popular
                      </span>
                    </div>
                  )}
                  
                  <div className="text-center mb-8">
                    <div className={`w-16 h-16 bg-gradient-to-br ${plan.color} rounded-2xl flex items-center justify-center mx-auto mb-4`}>
                      <plan.icon className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-2">
                      {plan.name}
                    </h3>
                    <div className="flex items-baseline justify-center gap-1">
                      <span className="text-5xl font-bold text-gray-900">{plan.price}</span>
                      <span className="text-brown-600">/{plan.period}</span>
                    </div>
                  </div>
                  
                  <ul className="space-y-4 mb-8">
                    {plan.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-3">
                        <Check className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
                        <span className="text-brown-700">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  
                  <button className={`w-full py-3 text-white rounded-xl font-semibold transition-all ${plan.buttonColor}`}>
                    {plan.buttonText}
                  </button>
                </div>
              ))}
            </div>

            {/* FAQ */}
            <div className="mt-16 max-w-3xl mx-auto">
              <h2 className="text-3xl font-bold text-center text-gray-900 mb-8">
                Frequently Asked Questions
              </h2>
              <div className="space-y-6">
                {[
                  {
                    q: "Can I switch plans later?",
                    a: "Yes, you can upgrade or downgrade at any time. Changes take effect immediately."
                  },
                  {
                    q: "Is there a free trial for Pro?",
                    a: "Yes, Pro includes a 14-day free trial with full access to all features."
                  },
                  {
                    q: "What payment methods do you accept?",
                    a: "We accept all major credit cards, PayPal, and wire transfers for Enterprise."
                  },
                  {
                    q: "Can I cancel anytime?",
                    a: "Yes, cancel anytime with no penalties. We'll prorate any unused time."
                  }
                ].map((faq, idx) => (
                  <div key={idx} className="bg-white p-6 rounded-xl border border-amber-100">
                    <h3 className="font-bold text-gray-900 mb-2">{faq.q}</h3>
                    <p className="text-brown-600">{faq.a}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </main>
      </d
[truncated — 31 more characters]
```

### frontend/app/contact/page.jsx

```javascript
"use client";

// import LayoutWrapper from "@/app/components/LayoutWrapper";
import LayoutWrapper from "../components/LayoutWrapper";


import { Mail, Phone, MapPin, Send, Clock, MessageSquare } from "lucide-react";
import { useState } from "react";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: ""
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Thank you for your message! We'll get back to you soon.");
    setFormData({ name: "", email: "", subject: "", message: "" });
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <LayoutWrapper>
      <div className="min-h-screen bg-gradient-to-b from-amber-50 to-white">
        <main className="container mx-auto px-6 py-12">
          <div className="max-w-6xl mx-auto">
            {/* Header */}
            <div className="text-center mb-12">
              <h1 className="text-5xl font-bold text-gray-900 mb-6">
                Contact Us
              </h1>
              <p className="text-xl text-brown-600 max-w-3xl mx-auto">
                Have questions? We're here to help. Reach out and our team will get back to you within 24 hours.
              </p>
            </div>

            <div className="grid lg:grid-cols-3 gap-12">
              {/* Contact Info */}
              <div className="space-y-8">
                <div className="bg-white rounded-2xl p-8 shadow-lg border border-amber-100">
                  <h2 className="text-2xl font-bold text-gray-900 mb-6">
                    Get in Touch
                  </h2>
                  
                  <div className="space-y-6">
                    <div className="flex items-start gap-4">
                      <div className="p-3 bg-maroon-50 rounded-lg">
                        <Mail className="w-6 h-6 text-maroon-700" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-gray-900">Email</h3>
                        <p className="text-brown-600">contact@legalease.ai</p>
                        <p className="text-brown-600">support@legalease.ai</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div className="p-3 bg-maroon-50 rounded-lg">
                        <Phone className="w-6 h-6 text-maroon-700" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-gray-900">Phone</h3>
                        <p className="text-brown-600">(555) 123-4567</p>
                        <p className="text-sm text-brown-500">Mon-Fri, 9am-5pm PST</p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div className="p-3 bg-maroon-50 rounded-lg">
                        <MapPin className="w-6 h-6 text-maroon-700" />
                      </div>
                      <div>
                        <h3 className="font-semibold text-gray-900">Office</h3>
                        <p className="text-brown-600">1156 High Street</p>
                        <p className="text-brown-600">Santa Cruz, CA 95064</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Support Hours */}
                <div className="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-8 border border-blue-100">
                  <Clock className="w-8 h-8 text-blue-700 mb-4" />
                  <h3 className="font-bold text-gray-900 mb-2">Support Hours</h3>
                  <p className="text-brown-700 mb-4">
                    We're here to help you during these hours:
                  </p>
                  <ul className="space-y-2 text-brown-600">
                    <li className="flex justify-between">
                      <span>Monday-Friday</span>
                      <span className="font-medium">9am-6pm PST</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Saturday</span>
                      <span className="font-medium">10am-4pm PST</span>
                    </li>
                    <li className="flex justify-between">
                      <span>Sunday</span>
                      <span className="font-medium">Emergency Only</span>
                    </li>
                  </ul>
                </div>
              </div>

              {/* Contact Form */}
              <div className="lg:col-span-2">
                <div className="bg-white rounded-2xl p-8 shadow-lg border border-amber-100">
                  <div className="flex items-center gap-3 mb-8">
                    <MessageSquare className="w-8 h-8 text-maroon-700" />
                    <h2 className="text-2xl font-bold text-gray-900">
                      Send us a Message
                    </h2>
                  </div>
                  
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-brown-700 mb-2">
                          Your Name *
                        </label>
                        <input
                          type="text"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          required
                          className="w-full px-4 py-3 border border-amber-200 rounded-xl focus:ring-2 focus:ring-maroon-300 focus:border-transparent"
                          placeholder="John Doe"
                        />
                      </div>
   
[truncated — 3340 more characters]
```

[13 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]