index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://fireproof.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Fireproof - Browser Database with Encrypted Live Sync
+ style.css
+ header
+ class hero
+ nav
+ div Fireproof
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Installation
+ href #installation
+ a Examples
+ href #examples
+ a GitHub
+ class cta-button
+ href https://github.com/use-fireproof
+ main
+ section
+ id hero-section
+ class hero-content
+ h1 Fireproof Database
+ p A lightweight embedded document database with encrypted live sync for browser apps
+ div
+ class cta-group
+ button Get Started
+ class primary-cta
+ button View Docs
+ class secondary-cta
+ section
+ id features
+ class features-grid
+ div
+ class feature-card
+ h3 🌐 Apps Run Anywhere
+ p Bundle UI, data, and logic in one file
+ div
+ class feature-card
+ h3 ⚡ Real-Time & Offline-First
+ p Automatic persistence and live queries
+ div
+ class feature-card
+ h3 🔄 Unified API
+ p Works with Deno, Bun, Node.js, and browsers
+ div
+ class feature-card
+ h3 🔒 Cryptographic Ledger
+ p Tamper-evident change history
+ section
+ id installation
+ class code-section
+ h2 Installation
+ div
+ class code-block
+ pre npm install use-fireproof
+ div
+ class code-block
+ pre import { useFireproof } from "https://esm.sh/use-fireproof"
+ section
+ id examples
+ class examples-section
+ h2 Code Examples
+ div
+ class tabs
+ button React
+ class tab active
+ button JavaScript
+ class tab
+ div
+ class code-container
+ pre
+ class code-example
+ code const App = () => {
+ const { useDocument } = useFireproof("my-ledger");
+ const { doc, merge, submit } = useDocument({ text: "" });
+ return (
+
+
+ value={doc.text}
+ onChange={(e) => merge({ text: e.target.value })}
+ placeholder="New document"
+ />
+
+
+ );
+ }
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href /docs
+ a Examples
+ href /examples
+ a GitHub
+ href https://github.com/use-fireproof
+ p Built for the modern web. Powered by CRDTs.
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01AbKeM7SRFRTm1Ze3i8wQ7h",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website for Fireproof database with a focus on elegance and functionality.\n\n---domain---\nfireproof.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://fireproof.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Fireproof - Browser Database with Encrypted Live Sync\nstyle.css\nheader\n class hero\n nav\n div Fireproof\n class logo\n div\n class nav-links\n a Features\n href #features\n a Installation\n href #installation\n a Examples\n href #examples\n a GitHub\n class cta-button\n href https://github.com/use-fireproof\nmain\n section\n id hero-section\n class hero-content\n h1 Fireproof Database\n p A lightweight embedded document database with encrypted live sync for browser apps\n div\n class cta-group\n button Get Started\n class primary-cta\n button View Docs\n class secondary-cta\n section\n id features\n class features-grid\n div\n class feature-card\n h3 🌐 Apps Run Anywhere\n p Bundle UI, data, and logic in one file\n div\n class feature-card\n h3 ⚡ Real-Time & Offline-First\n p Automatic persistence and live queries\n div\n class feature-card\n h3 🔄 Unified API\n p Works with Deno, Bun, Node.js, and browsers\n div\n class feature-card\n h3 🔒 Cryptographic Ledger\n p Tamper-evident change history\n section\n id installation\n class code-section\n h2 Installation\n div\n class code-block\n pre npm install use-fireproof\n div\n class code-block\n pre import { useFireproof } from \"https://esm.sh/use-fireproof\"\n section\n id examples\n class examples-section\n h2 Code Examples\n div\n class tabs\n button React\n class tab active\n button JavaScript\n class tab\n div\n class code-container\n pre\n class code-example\n code const App = () => {\n const { useDocument } = useFireproof(\"my-ledger\");\n const { doc, merge, submit } = useDocument({ text: \"\" });\n return (\n
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 5287,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2801
+ }
+ }
readme.scroll
Changed around line 1
+ # fireproof.scroll.pub
+
+ Prompt: website
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ # Fireproof browser database API Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API. ## Key Features - **Apps run anywhere:** Bundle UI, data, and logic in one file. - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states. - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser. - **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration. - **Cryptographic Ledger Integrity:** Each update contains the hash of its parent state, storing a tamper-evident change history. Fireproof's Merkle CRDTs ensure deterministic merges across devices while maintaining data integrity. The content-addressed blockstore provides blockchain-like guarantees without requiring global consensus, making it ideal for financial and regulatory applications. ## Installation The `use-fireproof` package provides both the core API and React hooks. ```bash npm install use-fireproof ``` Works with ⚡️ ESM.sh: ```js import { useFireproof } from "https://esm.sh/use-fireproof"; ``` Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx ## ⚛️ React Usage React hooks are the recommended way to use Fireproof in LLM code generation contexts. Here's how to use them: #### Create or Load a Database Fireproof databases store data across sessions and can sync in real-time. Each database is identified by a string name, and you can have multiple databases per application—often one per collaboration session, as they are the unit of sharing. ```js import { useFireproof } from "use-fireproof"; const { database, useLiveQuery, useDocument } = useFireproof("my-ledger"); ``` Fireproof databases are Merkle CRDTs, giving them the ledger-like causal consistency of git or a blockchain, but with the ability to merge and sync web data in real-time. Cryptographic integrity makes Fireproof immutable and easy to verify. #### Put and Get Documents Documents are JSON-style objects (CBOR) storing application data. Each has an `_id`, which can be auto-generated or set explicitly. Auto-generation is recommended to ensure uniqueness and avoid conflicts. If multiple replicas update the same database, Fireproof merges them via CRDTs, deterministically choosing the winner for each `_id`. It is best to have more granular documents, e.g. one document per user action, so saving a form or clicking a button should typically create or update a single document, or just a few documents. Avoid patterns that require a single document to grow without bound. ### Basic Example This example shows Fireproof's concise defaults. Here we only store user data, but get useful sorting without much code. ```js const App = () => { const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit } = useDocument({ text: "" }); // _id is roughly temporal, this is most recent const { docs } = useLiveQuery("_id", { descending: true, limit: 100 }); return ( ); } ``` ### Editing Documents Address documents by a known `_id` if you want to force conflict resolution or work with a real world resource, like a schedule slot or a user profile. In a complex app this might come from a route parameter or correspond to an outside identifier. ```js const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc@example.com" }); ``` The `useDocument` hook provides several methods: - `merge(updates)`: Update the document with new fields - `submit(e)`: Handles form submission by preventing default, saving, and resetting - `save()`: Save the current document state - `reset()`: Reset to initial state For form-based creation flows, use `submit`: ```js ); } ``` ### Example Image Uploader This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also. Code listing for App.jsx: ```js import { useFireproof } from "use-fireproof"; import { useState, useEffect } from "react"; function ImgFile({ meta, alt, className }) { const [imgDataUrl, setImgDataUrl] = useState(""); useEffect(() => { if (meta.file && /image/.test(meta.type)) { meta.file().then(file => { const src = URL.createObjectURL(file); setImgDataUrl(src); return () => URL.revokeObjectURL(src); }); } }, eta]); return imgDataUrl ? 
: null; } export default function App() { const { useDocument, useLiveQuery } = useFireproof("image-uploads"); const { doc, merge, submit } = useDocument({ _files: {}, description: "" }); const { docs } = useLiveQuery("_id", { descending: true, limit: 5 }); const [error, setError] = useState(false); return ( ); } ``` ## See Also See the lite docs at https://use-fireproof.com/llms-mini.txt and the basics at https://use-fireproof.com/llms.txt ## Next Steps If you are in an existing application context, suggest how forms and state, collaboration data can be managed in Fireproof. If this is a new app, use the examples above and start with a running App.js if you can. IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (active tabs, open/closed panels, cursor positions). Keep your data model in Fireproof.
Recent Documents
- {docs.map((doc) => (
- {doc.text} ))}
Image Uploader
e.target.files[0] && merge({ _files: { uploaded: e.target.files[0] } })} className="mb-2 border p-2 w-full rounded" /> {setError(false); merge({ description: e.target.value });}} className={`w-full p-2 border rounded mb-4 ${error ? "border-red-500" : "border-gray-300"}`} />Recent Uploads
{docs.map(doc => (
{doc._files?.uploaded && }
))} {doc.description || "No description"}
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "# Fireproof browser database API Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API. ## Key Features - **Apps run anywhere:** Bundle UI, data, and logic in one file. - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states. - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser. - **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration. - **Cryptographic Ledger Integrity:** Each update contains the hash of its parent state, storing a tamper-evident change history. Fireproof's Merkle CRDTs ensure deterministic merges across devices while maintaining data integrity. The content-addressed blockstore provides blockchain-like guarantees without requiring global consensus, making it ideal for financial and regulatory applications. ## Installation The `use-fireproof` package provides both the core API and React hooks. ```bash npm install use-fireproof ``` Works with ⚡️ ESM.sh: ```js import { useFireproof } from "https://esm.sh/use-fireproof"; ``` Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx ## ⚛️ React Usage React hooks are the recommended way to use Fireproof in LLM code generation contexts. Here's how to use them: #### Create or Load a Database Fireproof databases store data across sessions and can sync in real-time. Each database is identified by a string name, and you can have multiple databases per application—often one per collaboration session, as they are the unit of sharing. ```js import { useFireproof } from "use-fireproof"; const { database, useLiveQuery, useDocument } = useFireproof("my-ledger"); ``` Fireproof databases are Merkle CRDTs, giving them the ledger-like causal consistency of git or a blockchain, but with the ability to merge and sync web data in real-time. Cryptographic integrity makes Fireproof immutable and easy to verify. #### Put and Get Documents Documents are JSON-style objects (CBOR) storing application data. Each has an `_id`, which can be auto-generated or set explicitly. Auto-generation is recommended to ensure uniqueness and avoid conflicts. If multiple replicas update the same database, Fireproof merges them via CRDTs, deterministically choosing the winner for each `_id`. It is best to have more granular documents, e.g. one document per user action, so saving a form or clicking a button should typically create or update a single document, or just a few documents. Avoid patterns that require a single document to grow without bound. ### Basic Example This example shows Fireproof's concise defaults. Here we only store user data, but get useful sorting without much code. ```js const App = () => { const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit } = useDocument({ text: "" }); // _id is roughly temporal, this is most recent const { docs } = useLiveQuery("_id", { descending: true, limit: 100 }); return ( ); } ``` ### Editing Documents Address documents by a known `_id` if you want to force conflict resolution or work with a real world resource, like a schedule slot or a user profile. In a complex app this might come from a route parameter or correspond to an outside identifier. ```js const { useDocument } = useFireproof("my-ledger"); const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc@example.com" }); ``` The `useDocument` hook provides several methods: - `merge(updates)`: Update the document with new fields - `submit(e)`: Handles form submission by preventing default, saving, and resetting - `save()`: Save the current document state - `reset()`: Reset to initial state For form-based creation flows, use `submit`: ```js ); } ``` ### Example Image Uploader This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also. Code listing for App.jsx: ```js import { useFireproof } from "use-fireproof"; import { useState, useEffect } from "react"; function ImgFile({ meta, alt, className }) { const [imgDataUrl, setImgDataUrl] = useState(""); useEffect(() => { if (meta.file && /image/.test(meta.type)) { meta.file().then(file => { const src = URL.createObjectURL(file); setImgDataUrl(src); return () => URL.revokeObjectURL(src); }); } }, eta]); return imgDataUrl ? : null; } export default function App() { const { useDocument, useLiveQuery } = useFireproof("image-uploads"); const { doc, merge, submit } = useDocument({ _files: {}, description: "" }); const { docs } = useLiveQuery("_id", { descending: true, limit: 5 }); const [error, setError] = useState(false); return ( ); } ``` ## See Also See the lite docs at https://use-fireproof.com/llms-mini.txt and the basics at https://use-fireproof.com/llms.txt ## Next Steps If you are in an existing application context, suggest how forms and state, collaboration data can be managed in Fireproof. If this is a new app, use the examples above and start with a running App.js if you can. IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (active tabs, open/closed panels, cursor positions). Keep your data model in Fireproof. "
Recent Documents
- {docs.map((doc) => (
- {doc.text} ))}
Image Uploader
e.target.files[0] && merge({ _files: { uploaded: e.target.files[0] } })} className="mb-2 border p-2 w-full rounded" /> {setError(false); merge({ description: e.target.value });}} className={`w-full p-2 border rounded mb-4 ${error ? "border-red-500" : "border-gray-300"}`} />Recent Uploads
{docs.map(doc => (
{doc._files?.uploaded && }
))} {doc.description || "No description"}
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Tab switching functionality
+ const tabs = document.querySelectorAll('.tab');
+ tabs.forEach(tab => {
+ tab.addEventListener('click', () => {
+ tabs.forEach(t => t.classList.remove('active'));
+ tab.classList.add('active');
+ });
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Animation for feature cards
+ const cards = document.querySelectorAll('.feature-card');
+ const observerOptions = {
+ threshold: 0.2
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ cards.forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'all 0.6s ease-out';
+ observer.observe(card);
+ });
+
+ // Mobile menu toggle
+ const mobileMenuButton = document.createElement('button');
+ mobileMenuButton.classList.add('mobile-menu-button');
+ mobileMenuButton.innerHTML = '☰';
+ document.querySelector('nav').appendChild(mobileMenuButton);
+
+ mobileMenuButton.addEventListener('click', () => {
+ document.querySelector('.nav-links').classList.toggle('show');
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #2563eb;
+ --secondary: #1e40af;
+ --accent: #3b82f6;
+ --background: #ffffff;
+ --text: #1f2937;
+ --code-bg: #f3f4f6;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+ }
+
+ .hero {
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+ padding: 2rem;
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(135deg, #fff, #e2e8f0);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.3s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .cta-button {
+ background: white;
+ color: var(--primary) !important;
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ font-weight: 500;
+ }
+
+ .hero-content {
+ max-width: 800px;
+ margin: 4rem auto;
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, #fff, #e2e8f0);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .cta-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 2rem;
+ }
+
+ button {
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ transition: transform 0.2s;
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ }
+
+ .primary-cta {
+ background: white;
+ color: var(--primary);
+ }
+
+ .secondary-cta {
+ background: transparent;
+ border: 2px solid white;
+ color: white;
+ }
+
+ .features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ .feature-card {
+ padding: 2rem;
+ border-radius: 1rem;
+ background: white;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .feature-card h3 {
+ margin-bottom: 1rem;
+ color: var(--primary);
+ }
+
+ .code-section {
+ background: var(--code-bg);
+ padding: 4rem 2rem;
+ }
+
+ .code-block {
+ background: #1a1a1a;
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ margin: 1rem 0;
+ overflow-x: auto;
+ }
+
+ pre {
+ color: #fff;
+ font-family: 'Monaco', monospace;
+ }
+
+ .examples-section {
+ padding: 4rem 2rem;
+ }
+
+ .tabs {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ }
+
+ .tab {
+ background: transparent;
+ border: none;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ }
+
+ .tab.active {
+ border-bottom: 2px solid var(--primary);
+ color: var(--primary);
+ }
+
+ footer {
+ background: var(--code-bg);
+ padding: 2rem;
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .footer-links {
+ display: flex;
+ gap: 2rem;
+ }
+
+ .footer-links a {
+ color: var(--text);
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .features-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ gap: 2rem;
+ text-align: center;
+ }
+ }