From 21342683a6c54e36b5e08c3eea5f867795b29042 Mon Sep 17 00:00:00 2001 From: AKHIL Date: Thu, 20 Aug 2026 01:10:18 +0530 Subject: [PATCH] web(landing): reposition homepage as "The Offline Developer Workstation" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements the website-transformation PRD for the homepage, header and footer. Copy and structure only — no product claims beyond what ships. Homepage narrative (page.tsx): - Hero: eyebrow "Open source · Offline · Local-first", H1 "The Offline Developer Workstation", PRD subheading, one dominant CTA (Download Free, direct DMG) + View on GitHub + Explore tools text link, trust line with the supported platform (macOS 12+), product mock kept as the visual. - Compact proof strip below the hero (80+ Tools · API · SQL · MongoDB · Redis · Security · Open Source · Offline · Local-first). - Problem + fragmentation table ("Today → With MyDevTools") replaces the three-paragraph USP text wall. - Founder story section (authentic origin, attributed to Akhil). - Capabilities: six groups (Utilities, API & Networking, Databases, Security, DevOps, Productivity) linking to real /tools pages; replaces the bento cards, tool marquee and 12-card grid. - Workspace section framed honestly as what lives together in the app (API collections, DB connections, vault, notes, snippets, bookmarks, tasks) — the shipped build has one local workspace, so no per-project switching is claimed. - Offline/privacy: five concrete points + the PRD's precise network transparency wording ("Your data isn't sent to MyDevTools servers"; network tools connect only where you point them). Drops every "nothing leaves your device" absolute. - Open source: "Don't trust our privacy claims. Verify them." with real facts only (AGPL-3.0, repo, CONTRIBUTING.md, SECURITY.md), one star ask, Product Hunt badge moved here. - How it works: four steps (Download / Search / Work / Build). - Final CTA: brand statement "One workspace. Your tools. Your machine." Shell: - Header nav → Tools, Features, Open Source, Blog; Download becomes the primary header button; mobile menu gains Download. - Footer → Product / Resources / Open Source / Community columns with real links (GitHub, Contributing, Roadmap, License, Discussions, Issues). - siteMetadata title/description/OG lead with the category; FAQ "Is my data secure?" answer uses the precise network wording. Co-Authored-By: Claude Fable 5 --- apps/web/src/app/page.tsx | 1495 ++++++++++------------- apps/web/src/components/footer.tsx | 131 +- apps/web/src/components/header.tsx | 21 +- apps/web/src/lib/metadata.ts | 10 +- apps/web/src/lib/seo/structured-data.ts | 2 +- 5 files changed, 762 insertions(+), 897 deletions(-) diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 546ce2dd..0bb25f3b 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -3,7 +3,6 @@ import React, { useRef, useState, useSyncExternalStore } from "react"; import Link from "next/link"; import Image from "next/image"; -import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Header } from "@/components/header"; import { Footer, SOURCE_URL } from "@/components/footer"; @@ -15,23 +14,30 @@ import { import { motion, useInView, useReducedMotion } from "framer-motion"; import { ArrowRight, - Zap, - Shield, - Star, + ArrowDown, ChevronDown, - LayoutGrid, - Lock, - Globe, - CheckCircle2, Search, - Check, - Database, Github, - Laptop, Download as DownloadIcon, + Braces, + Globe, + Database, + ShieldCheck, + Container, + NotebookPen, + HardDrive, + Cpu, + WifiOff, + UserX, + CloudOff, + FolderTree, + Star, + Scale, + GitPullRequest, + FileText, + Play, } from "lucide-react"; import { AppleGlyph, DMG_URL } from "@/components/download-desktop-button"; -import { sidebarData } from "@/components/sidebar/data/sidebar-data"; import { homepageFaqItems } from "@/lib/seo/structured-data"; import MdtAurora from "@/components/mdt-aurora"; import { MdtFx } from "@/components/mdt-fx"; @@ -83,134 +89,218 @@ function Section({ ); } -// ─── Data ────────────────────────────────────────────────────────────────────── - -type HomeToolEntry = { - title: string; - description: string; - url: string; - icon?: React.ElementType; - category: string; -}; - -type ToolCategory = { - title: string; - icon?: React.ElementType; - tools: HomeToolEntry[]; -}; - -function buildToolCategories(): ToolCategory[] { - const out: ToolCategory[] = []; - for (const group of sidebarData.navGroups) { - const tools: HomeToolEntry[] = []; - for (const item of group.items) { - if ("items" in item && item.items?.length) { - for (const sub of item.items) { - if (!sub.url) continue; - tools.push({ - title: sub.title, - description: sub.description ?? "", - url: typeof sub.url === "string" ? sub.url : String(sub.url), - icon: sub.icon ?? item.icon, - category: group.title, - }); - } - } else if ("url" in item && item.url) { - tools.push({ - title: item.title, - description: item.description ?? "", - url: typeof item.url === "string" ? item.url : String(item.url), - icon: item.icon, - category: group.title, - }); +function SectionHeading({ + eyebrow, + title, + children, + align = "center", +}: { + eyebrow?: string; + title: React.ReactNode; + children?: React.ReactNode; + align?: "center" | "left"; +}) { + return ( + + {eyebrow &&

{eyebrow}

} +

+ {title} +

+ {children && ( +

+ {children} +

+ )} + + ); } -const toolCategories = buildToolCategories(); -const allAppTools: HomeToolEntry[] = toolCategories.flatMap((c) => c.tools); +// ─── Data — every item below is a shipped capability; keep it honest ────────── + +const PROOF_STRIP = [ + "80+ Tools", + "API Client", + "SQL", + "MongoDB", + "Redis", + "Security", + "Open Source", + "Offline", + "Local-first", +] as const; -const toolListGradients = [ - "from-indigo-500 to-indigo-400", - "from-indigo-500 to-indigo-400", - "from-indigo-500 to-indigo-400", - "from-rose-500 to-orange-400", - "from-amber-500 to-yellow-400", - "from-indigo-500 to-blue-400", +/** §17 — consolidation, not feature parity with the specialised product. */ +const fragmentation = [ + { today: "JSON formatter website", app: "JSON Formatter", href: "/tools/json-formatter" }, + { today: "JWT decoder website", app: "JWT Decoder", href: "/tools/jwt-decoder" }, + { today: "Separate API client", app: "API Client", href: "/tools/api-client" }, + { today: "MongoDB GUI", app: "MongoDB Explorer", href: "/tools/database-explorer" }, + { today: "Redis GUI", app: "Redis Commander", href: "/tools/redis-commander" }, + { today: "SQL client", app: "SQL Client", href: "/tools/sql-client" }, + { today: "Password manager", app: "Local vault", href: "/tools/password-manager" }, + { today: "Notes app for the project", app: "Notes & snippets", href: "/tools/notes" }, ] as const; -const homepageToolSlugs = [ - 'json-formatter', - 'jwt-decoder', - 'api-client', - 'regex-tester', - 'uuid-generator', - 'base64', - 'hash-generator', - 'url-parser', - 'timestamp-converter', - 'cron-builder', - 'mock-data-generator', - 'docker-compose-generator', +const capabilities = [ + { + title: "Developer Utilities", + icon: Braces, + blurb: "The everyday formatters, decoders and generators — offline.", + tools: [ + ["JSON Formatter", "json-formatter"], + ["YAML Formatter", "yaml-formatter"], + ["JWT Decoder", "jwt-decoder"], + ["Regex Tester", "regex-tester"], + ["UUID / ULID", "uuid-generator"], + ["Base64", "base64"], + ["Hash Generator", "hash-generator"], + ["Diff Checker", "diff-checker"], + ], + }, + { + title: "API & Networking", + icon: Globe, + blurb: "Request collections, environments and sockets in one place.", + tools: [ + ["API Client", "api-client"], + ["WebSocket Tester", "websocket-tester"], + ["Webhook Tester", "webhook-tester"], + ["cURL to Code", "curl-to-code"], + ["DNS Lookup", "dns-lookup"], + ["HTTP Status Codes", "http-status-codes"], + ], + }, + { + title: "Databases", + icon: Database, + blurb: "Native drivers — connections go straight from your machine to the database.", + tools: [ + ["SQL Client (PostgreSQL, MySQL, MariaDB)", "sql-client"], + ["MongoDB Explorer", "database-explorer"], + ["Redis Commander", "redis-commander"], + ["S3 Drive", "s3-drive"], + ], + }, + { + title: "Security", + icon: ShieldCheck, + blurb: "Credentials and crypto helpers, encrypted locally.", + tools: [ + ["Password Manager", "password-manager"], + ["Encryption Playground", "encryption-playground"], + ["HMAC Generator", "hmac-generator"], + ["TOTP / 2FA", "totp-generator"], + ["SSH / RSA Keys", "ssh-key-generator"], + ["Certificate / PEM Decoder", "certificate-pem-decoder"], + ], + }, + { + title: "DevOps", + icon: Container, + blurb: "Config scaffolding and the small calculators you keep looking up.", + tools: [ + ["Docker Compose Generator", "docker-compose-generator"], + ["Cron Builder", "cron-builder"], + [".gitignore Generator", "gitignore-generator"], + ["Environment Manager", "environment-manager"], + ["Chmod Calculator", "chmod-calculator"], + ], + }, + { + title: "Productivity", + icon: NotebookPen, + blurb: "Project context that stays next to the tools that use it.", + tools: [ + ["Notes", "notes"], + ["Code Snippets", "snippet-manager"], + ["Bookmarks", "bookmarks"], + ["Tasks", "to-do"], + ["API Keys", "api-keys"], + ], + }, ] as const; -const homepageTools = homepageToolSlugs - .map((slug) => allAppTools.find((tool) => tool.url === `/app/${slug}`)) - .filter((tool): tool is HomeToolEntry => Boolean(tool)); +/** §12 — what actually lives together in the app. One local personal + * workspace ships today; this is not a claim of per-project switching. */ +const workspaceTree = [ + { name: "API Client", detail: "collections · environments · history", href: "/tools/api-client" }, + { name: "Databases", detail: "PostgreSQL · MongoDB · Redis · S3", href: "/tools/sql-client" }, + { name: "Vault", detail: "passwords · API keys · env files", href: "/tools/password-manager" }, + { name: "Notes", detail: "markdown, local", href: "/tools/notes" }, + { name: "Snippets", detail: "searchable, tagged", href: "/tools/snippet-manager" }, + { name: "Bookmarks", detail: "links worth keeping", href: "/tools/bookmarks" }, + { name: "Tasks", detail: "what is next", href: "/tools/to-do" }, +] as const; -// Database clients ship with native Rust drivers in the desktop shell, so they -// get their own row instead of being buried in the 80+ tool list. -const databaseClients = [ +const privacyPoints = [ + { + icon: Cpu, + title: "Local processing", + body: "Formatters, decoders, generators and crypto helpers run on your machine.", + }, { - title: "SQL Client", - href: "/tools/sql-client", - description: "PostgreSQL, MySQL and MariaDB with an encrypted credential store.", + icon: HardDrive, + title: "Local storage", + body: "Notes, snippets, collections and credentials live in an encrypted local database.", }, { - title: "MongoDB Explorer", - href: "/tools/database-explorer", - description: "Browse MongoDB databases, collections and documents.", + icon: WifiOff, + title: "Offline capability", + body: "Core tools work without a network connection. Only the network tools need one.", }, { - title: "Redis Commander", - href: "/tools/redis-commander", - description: "Browse keys, inspect values and run raw commands.", + icon: UserX, + title: "No mandatory account", + body: "No sign-up, no sign-in, no activation. The app opens straight to the dashboard.", }, { - title: "S3 Drive", - href: "/tools/s3-drive", - description: "Manage AWS S3 and DigitalOcean Spaces buckets.", + icon: CloudOff, + title: "No cloud dependency", + body: "There is no MyDevTools backend to depend on. Anonymous usage stats are opt-in and off by default.", }, ] as const; +const openSourceFacts = [ + { icon: Scale, label: "License", value: "GNU AGPL v3", href: `${SOURCE_URL}/blob/main/LICENSE` }, + { icon: Github, label: "Repository", value: "mydevtools-tech/mydevtools", href: SOURCE_URL }, + { icon: GitPullRequest, label: "Contribution guide", value: "CONTRIBUTING.md", href: `${SOURCE_URL}/blob/main/CONTRIBUTING.md` }, + { icon: FileText, label: "Security policy", value: "SECURITY.md", href: `${SOURCE_URL}/blob/main/SECURITY.md` }, +] as const; + const howItWorks = [ { step: "01", - title: "Download the App", - description: - "Grab the desktop app and open it. No sign-up, no sign-in, no setup — it runs fully offline from the first launch.", + title: "Download", + description: "No account required. Open the app and it is ready to use.", icon: DownloadIcon, - gradient: "from-indigo-500 to-indigo-400", }, { step: "02", - title: "Pick Your Tool", - description: `Choose from ${allAppTools.length} tools in one unified dashboard. Everything in a single tab.`, - icon: LayoutGrid, - gradient: "from-indigo-500 to-indigo-400", + title: "Search", + description: "Find any tool instantly with the command palette.", + icon: Search, }, { step: "03", - title: "Work Privately", - description: - "Everything runs on your machine. Sensitive credentials are AES-256 encrypted in a local vault — nothing leaves your device.", - icon: Shield, - gradient: "from-indigo-500 to-indigo-400", + title: "Work", + description: "Use tools locally and keep your workflow together.", + icon: Play, }, -]; + { + step: "04", + title: "Build", + description: "Connect APIs and databases when your workflow requires them.", + icon: Database, + }, +] as const; const faqItems = homepageFaqItems; @@ -223,9 +313,6 @@ const getModKeyServer = () => "⌘"; // ─── Page ────────────────────────────────────────────────────────────────────── export default function Page() { - const router = useRouter(); - const goToDownload = () => router.push("/download"); - const reduceMotion = useReducedMotion(); const [openFaqIdx, setOpenFaqIdx] = useState(null); @@ -246,7 +333,6 @@ export default function Page() { ); }; - return (
{/* deck atmosphere: fixed grid + grain behind everything + gradient def for icons */} @@ -268,7 +354,7 @@ export default function Page() {
{/* ── Hero ────────────────────────────────────────────────────────────── */} -
+
{/* Ambient orbs + living aurora */}
@@ -292,29 +378,8 @@ export default function Page() { : { duration: 16, repeat: Infinity, ease: "easeInOut", delay: 1.5 } } /> -
- {/* Subtle grid */} -
-
{/* initial={false} — the hero renders in its final state server-side instead of at opacity:0. An entrance animation here would delay the @@ -325,801 +390,575 @@ export default function Page() { initial={false} animate="visible" variants={stagger} - className="space-y-8 max-w-4xl mx-auto" + className="space-y-7 max-w-4xl mx-auto" > + {/* Eyebrow — category first */} + + Open source · Offline · Local-first + {/* Headline */} - {/* Non-breaking space before the break: a plain trailing space is - collapsed away, so textContent reads "WorkstationJSON" to anything - that does not treat
as whitespace. Invisible at line end. */} - The Offline Developer Workstation  -
- - JSON, JWT, APIs, SQL & 80+ More - + The Offline{" "} + Developer Workstation - {/* Subtitle */} + {/* Subheading */} - Format JSON, decode JWTs, test APIs, build regexes, and query SQL, - MongoDB & Redis — 80+ developer tools, an API client and database - clients in one desktop app. Completely offline, no account required, - free and open source. + Stop juggling browser tabs and separate developer apps. MyDevTools + brings{" "} + + 80+ developer tools, an API client, SQL, MongoDB and Redis + {" "} + into one desktop workspace. - {/* CTAs */} + {/* CTAs — one dominant action, one secondary, one text link */} - Download for macOS + Download Free + + + View on GitHub + + + Explore tools + + - {/* Trust line — the three things that matter before the fold */} + {/* Trust line */} - Free and open source · No account required · Works completely offline + Free. Open source. No account required. + · + macOS 12+ · Apple Silicon & Intel - {/* Stats row */} - - {[ - { value: "80+", label: "Built-in Tools" }, - { value: "AES-256", label: "Local Vault" }, - ].map((s, i) => ( -
-
- {s.value} -
-
- {s.label} -
-
- ))} - - - {/* Dashboard screenshot */} + {/* Product visual */} - {/* Browser chrome frame */} - {/* Glow beneath the screenshot */}
+ +
+
- {/* Product Hunt badge */} - +
+
    + {PROOF_STRIP.map((item, i) => ( +
  • + {i > 0 && ·} + {item} +
    • + ))} +
+
+
+ + {/* ── Problem + fragmentation ──────────────────────────────────────────── */} +
+
+
+ + Your development workflow shouldn't require{" "} + 10 different tools. + + } > - - MyDevTools - Essential tools for developers | Product Hunt - + JSON in one tab. API testing in another. MongoDB somewhere else. Redis + in another application. A password manager on the side. MyDevTools + brings those everyday workflows together — it replaces the + fragmentation, not the tools. + + + +
+
+ Today — 10+ tabs / apps + + With MyDevTools +
+
    + {fragmentation.map((row) => ( +
  • + + {row.today} + + + + {row.app} + + +
    • + ))} +
+
+ + One desktop app. Context switching, repeated setup and pasting + secrets into random web tools — gone. +
+
- +
- {/* ── USP Intro ────────────────────────────────────────────────────────── */} -
-
- - +
+
+ + -

- MyDevTools is the offline developer workstation: a desktop app that brings together everything you reach for in a day — a SQL, MongoDB and Redis database client, a full API client, and 80+ utility tools. Stop switching between tabs and apps—format JSON, test APIs, decode JWTs, build regexes, generate UUIDs, and manage databases all in one desktop workspace. +

+ I kept opening 10+ browser tabs for everyday development tasks. I + started building MyDevTools for myself. I added a password manager + because I wanted a secure local place for credentials, and a MongoDB + client because I wanted a customized way to explore my data.

-

- Local-first architecture means your data is processed on your machine and works fully offline. There is no account and no server: nothing to sign up for, nothing to sign in to, and nothing for us to store. Sensitive credentials are AES-256 encrypted in a local vault. Whether you're testing REST endpoints, debugging database queries, or working with cryptographic tools, everything runs on your machine — nothing ever leaves your device unless you point a tool at a destination you choose. +

+ It started as a web application. Then I started questioning whether + sensitive developer data really needed to travel over HTTP in the + first place. That pushed me toward an offline-first desktop + application.

-

- Free for everyone — every tool, every feature, no paid tier and no limits — and open source under the GNU AGPL v3, so you can read exactly what it does. No ads, no data harvesting, and no tracking: usage stats are anonymous, off by default, and yours to switch on. Compare MyDevTools to Postman (API client alternative), DBeaver (database GUI), scattered single-purpose websites, and other dev tool platforms—we unify what others scatter across 20 tabs. +

+ Friends were also looking for offline-first developer tools, so I kept + going. MyDevTools is now an open-source desktop developer workstation + with 80+ tools.

- - + + +
- {/* ── How It Works ────────────────────────────────────────────────────── */} -
-
+ {/* ── Capabilities (80+ tools, grouped) ────────────────────────────────── */} +
+
- + Everything you need for everyday development.{" "} + In one workspace. + + } > -

- How It Works -

-

- From zero to productive in under a minute. -

- + Tool breadth is the proof, not the headline. Here is what is actually + inside — every link opens that tool's page. + -
- {/* Connecting line (desktop only) */} -
- - {howItWorks.map((step, i) => ( +
+ {capabilities.map((group, i) => ( - {/* Step circle */} -
-
- +
+
+
+ +
+

{group.title}

- - STEP {step.step} - -

{step.title}

-

- {step.description} -

+

{group.blurb}

+
    + {group.tools.map(([label, slug]) => ( +
  • + + {label} + +
    • + ))} +
))}
-
-
-
- {/* ── Bento Showcase ─────────────────────────────────────────────────── */} -
-
-
-

- Fast, offline, and entirely yours -

-

- Real tools, real previews — speed and privacy by default. -

- - -
- {/* T1 — JSON Formatter (large) */} - - -
-
-
-
- -
-
- - Instant — and offline - -
-

- Format & validate in milliseconds -

-

- JSON, SQL, Markdown — formatters and editors that run - entirely on your machine. No round-trips, no copy-paste - detours. -

- - {/* JSON code preview */} -
-
-
-
-
-
-
- - payload.json - -
- 
-{`{
-  "name": "mydevtools",
-  "tools": ${allAppTools.length},
-  "encrypted": true,
-  "offline": true,
-  "account_required": false
-}`}
-
-
- -
- Explore JSON Formatter - -
- - - - {/* T2 — Password Manager */} - - -
-
-
-
- -
-
- - Secure & Private - -
-

- Zero-knowledge vault -

- - {/* Password entries preview */} -
- {["github.com", "vercel.com", "anthropic.com"].map( - (label) => ( -
- - {label} - - - •••••••• - -
- ) - )} -
- - - - {/* T3 — API Client */} - + + +
- {/* ── One offline app ─────────────────────────────────────────────────── */} -
-
-
-
- -

- All 80+ tools, one desktop app -

-

- Everything runs offline on your device. No tabs, no scattered - websites, no account — one workspace for your whole workflow, - free for everyone. -

-
+ {/* ── Workspace ────────────────────────────────────────────────────────── */} +
+
+
+
+ + Your project. Your tools.{" "} + One workspace. + + } + align="left" + > + Keep the tools, data, configuration and utilities you use for a + project together instead of scattering them across tabs and + applications. API collections, database connections, secrets, + notes and snippets sit side by side in one local, encrypted + database on your machine. + + -
- + + +
- {/* Database clients — native drivers, so they get their own row */} - -

- Database clients included — native drivers, no extra app to install -

-
- {databaseClients.map((client) => ( - -

- - {client.title} - -

-

- {client.description} -

- - ))} + {/* Workspace tree — only things that ship today */} + +
+
+ + Your workspace + + on your device + +
+
    + {workspaceTree.map((node, i) => { + const last = i === workspaceTree.length - 1; + return ( +
  • + + + {last ? "└──" : "├──"} + + + {node.name} + + + {node.detail} + + +
    • + ); + })} +
- {/* ── Desktop vs website ──────────────────────────────────────────────── */} -
-
+ {/* ── Offline / privacy ────────────────────────────────────────────────── */} +
+
+ + MyDevTools Desktop is designed around local-first development. Core + tools run on your machine without requiring an account or cloud + service. + + +
+ {privacyPoints.map((p, i) => ( + + +

{p.title}

+

{p.body}

+ + ))} +
+ + {/* Network transparency — precise, not absolute */} -

- A desktop app, not another web tool -

-

- The tools run on your machine. This website only explains what the - app does and hands you the download — so there is no confusion about - where your data goes. +

+ Your data isn't sent to MyDevTools servers. +

+

+ Network-enabled tools connect to external destinations only when you + explicitly use them, such as an API or database. This website only + documents the app and hands you the download — the tools do not run + here.

+ + Read the security & privacy details + + - -
- {/* Desktop */} - -
-
-
-
- -
-
- - The product - -
-

MyDevTools Desktop

-
    - {[ - "All 80+ tools run locally on your machine", - "No account, no sign-in, no activation", - "No MyDevTools backend — data lives in a local encrypted database", - "Connects out only where you point a tool: API client, database clients, DNS/WHOIS, app updates", - ].map((line) => ( -
  • - - {line} -
    • - ))} -
-
- -
-
- - - {/* Website */} - -
-
-
-
- -
-
- - Information only - -
-

This website

-
    - {[ - "Documentation for every tool, plus the changelog and download", - "The tools themselves do not run here", - "Nothing to sign up for — there is no web app and no sync", - "A normal website: it uses standard web analytics, unlike the app", - ].map((line) => ( -
  • - - {line} -
    • - ))} -
-
- - -
-
- -
- {/* ── Tools teaser ────────────────────────────────────────────────────── */} -
-
-
+ {/* ── Open source ──────────────────────────────────────────────────────── */} +
+
- + Don't trust our privacy claims.{" "} + Verify them. + + } > -

- 80+ Tools, One Dashboard -

-

- From JSON formatters to API clients, generators, and database - explorers — everything you need in one desktop developer toolkit. -

-
- - Browse all tools - - - -
- + MyDevTools is open source. Read the source, inspect the architecture, + understand how data is handled, report issues, and contribute + improvements. + - {/* Infinite tool-name ticker */} -
- {[...allAppTools, ...allAppTools].map((t, i) => ( - - - {t.title} - - ))} -
+ + + View MyDevTools on GitHub + + + Contribute + + + Security + - - {[ - { href: "/developer-tools", label: "Developer tools platform" }, - { href: "/features", label: "Product features" }, - { href: "/security", label: "Security and privacy" }, - { href: "/download", label: "Download the app" }, - ].map((link) => ( - - {link.label} - - ))} - - - {/* Featured tool cards */} -
- {homepageTools.map((tool, i) => { - const g = toolListGradients[i % toolListGradients.length]; - const Icon = tool.icon; - return ( - ( +
  • + - -
    - {Icon ? ( -
    - -
    - ) : null} -
    -

    - {tool.title} - -

    -

    - {tool.description} -

    -
    -
    - - - ); - })} -
    • + + + {fact.label} + + + {fact.value} + + + + ))} + - + + If MyDevTools saves you time, consider starring the project. +

    + - See all tools - - + MyDevTools on Product Hunt +
    - {/* ── Social Proof ─────────────────────────────────────────────────────── */} -
    -
    -
    + {/* ── How it works ─────────────────────────────────────────────────────── */} +
    +
    - -

    - Proof, not promises -

    -

    - A public launch, local encryption and source code you can read — - instead of vague promises. -

    -     + + From download to productive in under a minute. + -
    - {/* Product Hunt card */} - -
    -
    -
    -
    - -
    -
    -

    - Featured on Product Hunt -

    -

    - Public launch and feedback surface for real developer - discovery, reviews, and community validation. -

    - - MyDevTools on Product Hunt - -
    - - - {/* Privacy card */} - -
    -
    -
    -
    - -
    -
    -

    - Zero-Knowledge Privacy -

    -

    - Sensitive data is encrypted in a local vault with a - password only you know. Nothing is transmitted — your - vault never leaves your device. -

    -
    - - - {/* Open source card */} - -
    -
    -
    -
    - +
    +
    + {howItWorks.map((step, i) => ( + +
    +
    +
    -

    - Built in the open -

    -

    - The whole app — desktop shell, tools and this site — is public - under the GNU AGPL v3. Read the code, build it yourself, open an - issue, or send a pull request. + + STEP {step.step} + +

    {step.title}

    +

    + {step.description}

    - - - View the source on GitHub - - -
    - + + ))}
    {/* ── FAQ ─────────────────────────────────────────────────────────────── */} -
    -
    +
    +
    - -

    - Common Questions -

    -

    - Everything you need to know before getting started. -

    -     + + Everything you need to know before downloading. +
    {faqItems.map((item, i) => ( @@ -1130,26 +969,22 @@ export default function Page() { > - setOpenFaqIdx(open ? i : null) - } + onOpenChange={(open) => setOpenFaqIdx(open ? i : null)} > -
    - - {item.q} - +
    + {item.q} - +
    -
    +
    {item.a}
    @@ -1161,71 +996,55 @@ export default function Page() {
    - {/* ── CTA ─────────────────────────────────────────────────────────────── */} -
    - {/* Decorative glow blobs */} + {/* ── Final CTA ────────────────────────────────────────────────────────── */} +
    -
    -
    -
    +
    +
    - {/* Grid */} -
    - -
    +
    -
    - +
    - Ready to Build{" "} - - Faster? - + One workspace. Your tools.{" "} + Your machine. - Get the offline developer workstation: 80+ tools, an API client - and database clients in one desktop app. Free, open source, and - yours to keep. + 80+ developer tools, API, SQL, MongoDB and Redis — open source, + local-first and offline. - + - Star on GitHub + View on GitHub @@ -1234,7 +1053,7 @@ export default function Page() { transition={{ duration: 0.6, delay: 0.32 }} className="mt-6 text-sm text-muted-foreground" > - Free and open source · No account required · Works completely offline + Free · Open Source · Offline · macOS 12+
    diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx index 2399117b..2a2740f9 100644 --- a/apps/web/src/components/footer.tsx +++ b/apps/web/src/components/footer.tsx @@ -9,20 +9,61 @@ import { Logo } from "./logo"; /** Source repository — AGPL v3. Built releases ship on this repo's releases page. */ export const SOURCE_URL = "https://github.com/mydevtools-tech/mydevtools"; -const footerLinks = [ - { href: "/blog", label: "Blog" }, - { href: "/changelog", label: "Changelog" }, - { href: "/developer-tools", label: "Platform" }, - { href: "/features", label: "Features" }, - { href: "/download", label: "Download" }, - { href: "/#tools", label: "Tools" }, - { href: "/open-source", label: "Open Source" }, - { href: "/privacy", label: "Privacy" }, - { href: "/security", label: "Security" }, - { href: "/help", label: "Help" }, - { href: SOURCE_URL, label: "Source", external: true }, +type FooterLink = { href: string; label: string; external?: boolean }; + +const footerColumns: { title: string; links: FooterLink[] }[] = [ + { + title: "Product", + links: [ + { href: "/tools", label: "Tools" }, + { href: "/features", label: "Features" }, + { href: "/download", label: "Download" }, + { href: "/developer-tools", label: "Platform" }, + { href: "/changelog", label: "Changelog" }, + ], + }, + { + title: "Resources", + links: [ + { href: "/blog", label: "Blog" }, + { href: "/help", label: "Help & FAQ" }, + { href: "/privacy", label: "Privacy" }, + { href: "/security", label: "Security" }, + ], + }, + { + title: "Open Source", + links: [ + { href: SOURCE_URL, label: "GitHub", external: true }, + { href: "/open-source", label: "Why open source" }, + { href: `${SOURCE_URL}/blob/main/CONTRIBUTING.md`, label: "Contributing", external: true }, + { href: `${SOURCE_URL}/blob/main/ROADMAP.md`, label: "Roadmap", external: true }, + { href: `${SOURCE_URL}/blob/main/LICENSE`, label: "License (AGPL-3.0)", external: true }, + ], + }, + { + title: "Community", + links: [ + { href: `${SOURCE_URL}/discussions`, label: "Discussions", external: true }, + { href: `${SOURCE_URL}/issues`, label: "Issues", external: true }, + { href: `${SOURCE_URL}/releases`, label: "Releases", external: true }, + ], + }, ]; +function FooterAnchor({ link }: { link: FooterLink }) { + const className = "text-muted-foreground hover:text-foreground transition-colors"; + return link.external ? ( + + {link.label} + + ) : ( + + {link.label} + + ); +} + export function Footer() { const year = new Date().getFullYear(); @@ -30,42 +71,38 @@ export function Footer() { <>
    -
    - {/* Brand + copyright */} - - - - © {year} MyDevTools - - +
    + {/* Brand */} +
    + + + MyDevTools + +

    + The offline developer workstation. 80+ developer tools, API, SQL, + MongoDB and Redis — open source, local-first, on your machine. +

    +
    + + {footerColumns.map((col) => ( + + ))} +
    - {/* Nav links */} - +
    + © {year} MyDevTools · Free & open source under the GNU AGPL v3 + Made by Akhil and contributors
    diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index baafe33a..e12f0394 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -2,7 +2,7 @@ import { useState, useEffect, type ElementType } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { Github, Menu, Star, X } from "lucide-react"; +import { Download, Github, Menu, Star, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Logo } from "./logo"; import { SOURCE_URL } from "./footer"; @@ -49,13 +49,13 @@ type NavLink = { external?: boolean; }; +// Logo is "Home"; Platform/Changelog/Help live in the footer. Download is the +// header's primary action button, not a nav item. const NAV_LINKS: NavLink[] = [ - { href: "/", label: "Home" }, - { href: "/features", label: "Features" }, - { href: "/developer-tools", label: "Platform" }, - { href: "/download", label: "Download" }, { href: "/tools", label: "Tools" }, - { href: "/changelog", label: "Changelog" }, + { href: "/features", label: "Features" }, + { href: "/open-source", label: "Open Source" }, + { href: "/blog", label: "Blog" }, ]; // "/" only matches exactly; every other section also owns its sub-routes @@ -129,6 +129,7 @@ export function Header() { const mobileNavLinks: NavLink[] = [ ...NAV_LINKS, + { href: "/download", label: "Download", icon: Download }, { href: SOURCE_URL, label: "GitHub", icon: Github, external: true }, ]; @@ -202,6 +203,14 @@ export function Header() { + {/* Primary action — same on every page */} + + {/* Mobile Menu Toggle */}