You are building “FounderLink”: a multi-tenant Linktree-style web app tailored to startup founders. Use React + Tailwind for all UI; store data in a simple JSON-backed collection; and include authentication. Generate three main routes/pages: a public landing page, dynamic founder pages, and a secure edit page.

1. App-Wide Configuration • Technologies: React, Tailwind CSS, React Router, simple JSON store (e.g. local JSON file or mock API).

   • Authentication: Email-based magic links or OAuth (Google/GitHub). New founders sign up; returning founders log in.

   • Data model “Founder”:

   {
     "id": "uuid",
     "name": "string",
     "headline": "string",
     "photoUrl": "string",
     "links": [
       { "id": "uuid", "label": "string", "url": "string" }
     ],
     "theme": { "primaryColor": "string", "font": "string" },
     "createdAt": "date",
     "updatedAt": "date"
   }
   
   

2. Route: “/” – Public Landing Page • Header: app logo “FounderLink” + nav links: “How it works”, “Pricing”, “Log in / Sign up”.

   • Hero section: headline “One Link. Infinite Possibilities for Founders.” subtext “Showcase your projects, social profiles, and fundraising deck—all in one page.” CTA button “Get Started – it’s free.”

   • Features grid (3 columns):

   1. “Easy Setup” – icon + short copy
   2. “Customizable Themes” – icon + short copy
   3. “Analytics & Insights” – icon + short copy • Testimonials carousel (2–3 founder quotes, headshots). • Footer: links to Twitter, GitHub, Privacy, Terms.

3. Route: “/u/:slug” – Founder’s Public Page • Layout:

   • Banner area with circular founder photo (200×200), name, headline.
   • Social icons row (Twitter, LinkedIn, GitHub) if URLs provided.
   • Vertical list of “link buttons”: for each link in founder.links, render a full-width, rounded, shadowed button using theme.primaryColor, labeled link.label, opening link.url in new tab.
   • Optional “About” section below links: a markdown-rendered bio. • Page metadata: dynamic title “Name | FounderLink” and description from headline.

4. Route: “/edit” – Founder Dashboard / Edit Page (protected) • Layout:

   • Sidebar: “Profile”, “Links”, “Theme”, “Analytics”, “Log Out”.
   • Main area: shows the currently selected tab’s form. • “Profile” tab:
   • Form fields: Name (text), Headline (text), Photo upload (filepicker). • “Links” tab:
   • List existing links: each row with Label (text), URL (text), reorder drag-drop, delete icon.
   • Add new link form: empty row with “+ Add Link” button. • “Theme” tab:
   • Color picker for primary color; font selector dropdown (e.g. Inter, Roboto, DM Sans); preview snippet. • “Analytics” tab: placeholder for future pageviews / click stats. • Save & Preview bar: sticky footer with “Save Changes” button (primary) and “Preview Public Page” link (opens /u/:slug).

5. Styles & UX • Responsive: mobile first.

   • Smooth animations for hover states on buttons, link addition/removal.

   • Accessibility: proper aria labels, focus rings, alt text for images.

   • Use Tailwind utility classes; keep design minimal, clean.

6. Example Founder Data (for seeding/demo)

   {
     "id": "123e4567-e89b-12d3-a456-426614174000",
     "name": "Aisha Patel",
     "headline": "Co-founder @EcoTech. Passionate about sustainable innovation.",
     "photoUrl": "/images/aisha.jpg",
     "links": [
       { "id":"l1", "label":"Website", "url":"<https://aisahpatel.com>" },
       { "id":"l2", "label":"Twitter", "url":"<https://twitter.com/aisap>" },
       { "id":"l3", "label":"Fundraising Deck", "url":"<https://bit.ly/ecotech-deck>" }
     ],
     "theme": { "primaryColor":"#10B981", "font":"Inter" }
   }