## Issue 1 — Landing Page: Structure, Copy & Layout (No Animations)

# urBackend Landing Page — GitHub Issues

---

## Issue 1 — Landing Page: Structure, Copy & Layout (No Animations)

**Labels:** `good-first-issue`, `frontend`, `nsoc`
**Difficulty:** Intermediate
**Estimated time:** 4–6 hours

### What this is
Rebuild the urBackend landing page from scratch with a world-class developer aesthetic. This issue covers structure, content, and static layout only — no animations yet (that's Issue 2).

### Design references
Study these before starting:
- https://vercel.com — typography, bento grid cards
- https://supabase.com — dark mode, glow effects
- https://fumadocs.dev — clean layout, spacing

### Theme
- Background: `#000000` / `#0A0A0A`
- Text primary: `#FFFFFF`
- Text secondary: `#A1A1AA`
- Borders: `rgba(255,255,255,0.08)`
- Accent: `#3B82F6` (blue) for CTAs and glows
- Font: Inter or Geist (already in project or import from Google Fonts)

---

### Section 1 — Hero

**Headline (large, tight letter-spacing):**
```
Your MongoDB.
Instant Backend.
Zero Boilerplate.
```
Keyword "Instant Backend" should have a subtle blue text gradient.

**Subtext (below headline, #A1A1AA):**
```
Auth, APIs, storage, webhooks — all in 60 seconds.
Your data stays in your Atlas cluster. Always.
```

**CTAs:**
- Primary button: "Start Building Free" → `/signup` — solid white bg, dark text
- Secondary button: "View Docs" → `https://docs.urbackend.bitbros.in` — ghost button, 1px white border

**Hero visual (right side or below on mobile):**
A mock macOS-style window (dark, rounded corners, 3 traffic light dots top-left).
Split view inside the window:
- Left panel label: "Schema (MongoDB)"
  ```json
  {
    "name": "String",
    "email": "String",
    "age": "Number",
    "isActive": "Boolean"
  }
  ```
- Right panel label: "Generated API"
  ```
  GET    /api/data/users
  POST   /api/data/users
  PUT    /api/data/users/:id
  DELETE /api/data/users/:id
  ```
Both panels have dark backgrounds, monospace font, subtle syntax colors.

---

### Section 2 — Tech stack marquee

**Text above:** `Works with your favorite stack`

**Logos (monochrome/white, small, horizontal row, infinite scroll or static grid):**
React, Next.js, Vue, Flutter, iOS, Android, Node.js, Python, Java

Use simple SVG logos or lucide-react icons where available. Keep them white/gray, no colors.

---

### Section 3 — How it works (3 steps)

Layout: 3 cards in a row, connected by a subtle dotted line between them.

**Step 1 — Connect**
Icon: database (lucide)
Title: "Bring your MongoDB"
Text: "Connect your existing Atlas cluster or use ours. AES-256-GCM encrypted. Your data never leaves your cluster."

**Step 2 — Configure**
Icon: sliders (lucide)
Title: "Define schema & rules"
Text: "Build collections visually. Set field types, relationships, RLS rules, and RBAC — all from the dashboard."

**Step 3 — Consume**
Icon: zap (lucide)
Title: "Get instant APIs"
Text: "Your REST API is live. Auth, storage, webhooks — all included. Ship your frontend today."

---

### Section 4 — Features Bento Grid

Layout: Bento grid — cards of varying sizes. Use CSS grid.

Suggested layout (desktop):
```
[ Auth — large ]    [ Storage — small ]
[ Database — small] [ Webhooks — large ]
```

**Card: Auth & Security**
Icon: shield (lucide)
Title: "Auth that just works"
Text: "Email, Google, GitHub OAuth. JWT + rotating refresh tokens. RLS per collection. Row-level ownership out of the box."
Size: Large (span 2 cols)

**Card: Database**
Icon: database (lucide)
Title: "MongoDB-native CRUD"
Text: "Visual schema builder. Relationships. Advanced filters. Aggregations. Your Atlas, our API layer."
Size: Normal

**Card: Storage**
Icon: hard-drive (lucide)
Title: "File storage"
Text: "Upload files, get CDN URLs. Bring your own S3 or R2 bucket. AES-256-GCM encrypted credentials."
Size: Normal

**Card: Webhooks**
Icon: webhook (lucide)
Title: "Webhooks + realtime"
Text: "HMAC-signed event delivery. BullMQ retry. Insert, update, delete triggers. Delivery logs in dashboard."
Size: Large (span 2 cols)

**Card style:**
- Background: `#111111`
- Border: `1px solid rgba(255,255,255,0.08)`
- Icon glow on hover: `box-shadow: 0 0 20px rgba(59,130,246,0.3)`
- Border radius: 12px

---

### Section 5 — SDK Code Snippet

Layout: 50/50 split on desktop, stacked on mobile.

**Left side — copy:**
Title: "Ship faster with the official SDK"
Text: "Five lines to get all your users. No fetch, no headers, no boilerplate. TypeScript types auto-generated from your schema."
Link: "npm install @urbackend/sdk →"

**Right side — code block:**
Dark background (`#0D0D0D`), monospace, syntax highlighted manually with spans or a lightweight lib.

```typescript
import urBackend from '@urbackend/sdk';

const client = urBackend({ apiKey: 'pk_live_...' });

// Get all users
const users = await client.db
  .collection('users')
  .where('isActive', true)
  .sort('createdAt', 'desc')
  .limit(10)
  .get<User>();
```

---

### Section 6 — Pricing

Layout: 2 cards side by side, centered. Pro card has a glowing blue border.

**Free card:**
- Badge: "Sandbox"
- Price: $0 / forever
- Subtext: "Perfect for learning and prototyping"
- Features list:
  - 1 project
  - 5,000 API requests / day
  - 50MB storage · 100MB MongoDB
  - 1,000 auth users
  - Email + Social auth
  - Basic webhooks (100/month)
  - Community support
- CTA: "Start Free" (ghost button)

**Pro card:**
- Badge: "Most Popular" (blue pill)
- Price: $9 / month
- Subtext: "First month free — no credit card needed"
  - Small text: "Request via DM or dashboard"
- Features list:
  - 10 projects
  - BYOM — connect your own Atlas
  - BYOS — S3 / Cloudflare R2
  - BYOK mail (Resend / SendGrid)
  - Unlimited auth users
  - Full webhook retry + 1,000/month
  - Advanced analytics
  - Priority support
- CTA: "Get 1 Month Free" (solid white button, dark text)
- Border: `1px solid rgba(59,130,246,0.5)` with glow

---

### Section 7 — FAQ (Static accordion, no animation yet)

Use a simple show/hide toggle with useState. Framer-motion animation will be added in Issue 2.

Questions:
1. **Is urBackend really open source?**
   Yes — AGPL-3.0. Self-host forever free. The cloud is optional convenience.

2. **Does my data go through urBackend servers?**
   No. With BYOM, your data goes directly to your Atlas cluster. urBackend only handles the API layer.

3. **What happens when I hit the free tier limit?**
   Requests return a 429 with a clear message. No data loss, no service interruption — just upgrade.

4. **Can I self-host urBackend?**
   Yes. Docker Compose setup is included. Full self-hosting docs at docs.urbackend.bitbros.in.

5. **What databases does urBackend support?**
   MongoDB only — and intentionally so. We go deep on MongoDB instead of shallow on everything.

---

### Section 8 — Footer

Minimal. Dark, 1px top border.

**Left:** urBackend logo + tagline: "We never own your data."

**Links:**
- Product: Docs, Changelog, Status
- Community: Discord, GitHub, Twitter/X
- Legal: License (AGPL-3.0), Privacy

---

### Contributor checklist
- [ ] Rebuild `apps/web-dashboard/src/pages/LandingPage/index.jsx` from scratch
- [ ] All 8 sections implemented statically
- [ ] Dark theme enforced (`#000` / `#0A0A0A` bg)
- [ ] Fully responsive — mobile, tablet, desktop
- [ ] All CTAs link to correct URLs
- [ ] No framer-motion yet — static layout only
- [ ] `npm run build` passes with no errors
- [ ] `npm run lint` passes

---
---

## Issue 2 — Landing Page: Animations & Micro-interactions

**Labels:** `frontend`, `nsoc`, `depends-on: Issue 1`
**Difficulty:** Advanced
**Estimated time:** 3–4 hours
**Depends on:** Issue 1 must be merged first

### What this is
Add scroll-triggered animations and micro-interactions to the landing page built in Issue 1.

### Requirements

**Install framer-motion** (if not already in project):
```bash
npm install framer-motion --workspace=web-dashboard
```

**Animations to add:**

1. **Hero section** — fade in + slight upward slide on page load
   ```jsx
   initial={{ opacity: 0, y: 20 }}
   animate={{ opacity: 1, y: 0 }}
   transition={{ duration: 0.6, ease: "easeOut" }}
   ```

2. **How it works — 3 cards** — staggered fade in when scrolled into view
   ```jsx
   // Each card delays by 0.1s × index
   transition={{ delay: index * 0.1 }}
   ```

3. **Bento grid cards** — fade in staggered on scroll
   Same pattern as above.

4. **FAQ accordion** — smooth height animation on open/close
   Use `AnimatePresence` + `motion.div` with `height: "auto"`.

5. **Bento card hover glow** — CSS only, no framer-motion:
   ```css
   transition: box-shadow 0.2s ease;
   &:hover { box-shadow: 0 0 24px rgba(59,130,246,0.25); }
   ```

6. **Hero mock window** — subtle floating animation (slow, not bouncy):
   ```jsx
   animate={{ y: [0, -6, 0] }}
   transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
   ```

### Checklist
- [ ] framer-motion installed
- [ ] Hero fade-in on load
- [ ] Section cards staggered on scroll (use `whileInView`)
- [ ] FAQ accordion smooth open/close
- [ ] Hero window floating animation
- [ ] `prefers-reduced-motion` respected — wrap all animations:
  ```jsx
  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  ```
- [ ] Build + lint passes

---
---

## Issue 3 — Landing Page: Hero Visual (Mock Dashboard Window)

**Labels:** `frontend`, `nsoc`, `depends-on: Issue 1`
**Difficulty:** Intermediate
**Estimated time:** 2–3 hours
**Depends on:** Issue 1 must be merged first

### What this is
Build the hero section's mock dashboard window as a standalone React component.

### Component: `<MockDashboardWindow />`

**File location:** `apps/web-dashboard/src/components/MockDashboardWindow.jsx`

**Visual spec:**
- macOS-style window chrome — dark rounded rect, 3 traffic light dots (red `#FF5F57`, yellow `#FFBD2E`, green `#28C840`) top-left, window title center: "urBackend Dashboard"
- Split panel inside:
  - Left panel — "Schema" label, dark bg, JSON content in monospace
  - Right panel — "API Endpoints" label, dark bg, endpoint list in monospace
- Subtle inner border: `1px solid rgba(255,255,255,0.06)`
- Optional: a thin animated "cursor blink" in the left panel to make it feel live

**Content:**
Left panel:
```json
{
  "name": "String",
  "email": "String",
  "role": "String",
  "createdAt": "Date"
}
```

Right panel:
```
GET    /api/data/users
POST   /api/data/users
PUT    /api/data/users/:id
DELETE /api/data/users/:id
```

**Color scheme for syntax:**
- Keys: `#7DD3FC` (blue-300)
- String values: `#86EFAC` (green-300)
- HTTP methods: GET `#86EFAC`, POST `#FDE68A`, PUT `#FCA5A5`, DELETE `#FCA5A5`
- Endpoint paths: `#E2E8F0`

### Checklist
- [ ] Component created at correct path
- [ ] macOS window chrome with traffic light dots
- [ ] Split panel layout
- [ ] Syntax colored content
- [ ] Responsive — on mobile show single panel or stack vertically
- [ ] Used in `LandingPage/index.jsx` hero section
- [ ] Build + lint passes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

## Issue 1 — Landing Page: Structure, Copy & Layout (No Animations) #158

urBackend Landing Page — GitHub Issues

Issue 1 — Landing Page: Structure, Copy & Layout (No Animations)

What this is

Design references

Theme

Section 1 — Hero

Section 2 — Tech stack marquee

Section 3 — How it works (3 steps)

Section 4 — Features Bento Grid

Section 5 — SDK Code Snippet

Section 6 — Pricing

Section 7 — FAQ (Static accordion, no animation yet)

Section 8 — Footer

Contributor checklist

Issue 2 — Landing Page: Animations & Micro-interactions

What this is

Requirements

Checklist

Issue 3 — Landing Page: Hero Visual (Mock Dashboard Window)

What this is

Component: `<MockDashboardWindow />`

Checklist

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

## Issue 1 — Landing Page: Structure, Copy & Layout (No Animations) #158

Description

urBackend Landing Page — GitHub Issues

Issue 1 — Landing Page: Structure, Copy & Layout (No Animations)

What this is

Design references

Theme

Section 1 — Hero

Section 2 — Tech stack marquee

Section 3 — How it works (3 steps)

Section 4 — Features Bento Grid

Section 5 — SDK Code Snippet

Section 6 — Pricing

Section 7 — FAQ (Static accordion, no animation yet)

Section 8 — Footer

Contributor checklist

Issue 2 — Landing Page: Animations & Micro-interactions

What this is

Requirements

Checklist

Issue 3 — Landing Page: Hero Visual (Mock Dashboard Window)

What this is

Component: <MockDashboardWindow />

Checklist

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Component: `<MockDashboardWindow />`