# Avelune - Dating and Social Discovery Template

Avelune is a complete commercial-ready frontend template for an adult dating, matchmaking, relationship, friendship, or social discovery product. It contains three connected experiences:

1. Public marketing website
2. Authenticated member application
3. Administration and moderation workspace

All people, profile illustrations, stories, metrics, transactions, conversations, and account records are fictional demonstration content.

## Technology

- Next.js App Router
- React and TypeScript
- Tailwind CSS
- Reusable shadcn-compatible primitives and `components.json`
- Lucide icons
- Recharts analytics
- Framer Motion interactions
- next-themes light and dark modes
- Sonner notifications

## Start locally

```bash
npm install
npm run dev
```

Open `http://localhost:3000`.

Production validation:

```bash
npm run typecheck
npm run lint
npm run build
npm run start
```

## Main route groups

### Public website

- `/` - Homepage
- `/about`
- `/how-it-works`
- `/features`
- `/safety`
- `/stories`
- `/pricing`
- `/blog`
- `/blog/[post]`
- `/faq`
- `/contact`
- `/help-center`
- `/privacy`
- `/terms`
- `/cookies`
- `/components`
- `/style-guide`
- `/maintenance`
- Custom 404 page

### Authentication and onboarding

- `/auth/sign-in`
- `/auth/create-account`
- `/auth/forgot-password`
- `/auth/reset-password`
- `/auth/verify-email`
- `/auth/two-factor`
- `/auth/age-confirmation`
- `/auth/suspended`
- `/onboarding/basic-information`
- `/onboarding/identity-preferences`
- `/onboarding/relationship-goals`
- `/onboarding/location`
- `/onboarding/interests`
- `/onboarding/personality`
- `/onboarding/bio`
- `/onboarding/prompts`
- `/onboarding/photos`
- `/onboarding/match-preferences`
- `/onboarding/notifications`
- `/onboarding/verification`
- `/onboarding/preview`
- `/onboarding/complete`

### Member application

- `/app` - Member overview
- `/app/discover`
- `/app/likes`
- `/app/liked`
- `/app/saved`
- `/app/matches`
- `/app/profile/[id]`
- `/app/messages`
- `/app/messages/[id]`
- `/app/date-ideas`
- `/app/notifications`
- `/app/subscription`
- `/app/checkout`
- `/app/payment-success`
- `/app/billing`
- `/app/edit-profile`
- `/app/photos`
- `/app/verification`
- `/app/preferences`
- `/app/privacy`
- `/app/notification-settings`
- `/app/security`
- `/app/blocked`
- `/app/safety`
- `/app/delete-account`

### Administration

- `/admin` - Overview
- `/admin/analytics`
- `/admin/activity`
- `/admin/users`
- `/admin/users/[id]`
- `/admin/profiles`
- `/admin/photo-moderation`
- `/admin/matches`
- `/admin/conversations`
- `/admin/reported-messages`
- `/admin/moderation`
- `/admin/verifications`
- `/admin/verifications/[id]`
- `/admin/reports`
- `/admin/reports/[id]`
- `/admin/suspensions`
- `/admin/subscriptions`
- `/admin/transactions`
- `/admin/refunds`
- `/admin/promos`
- `/admin/revenue`
- `/admin/pages`
- `/admin/pages/[id]`
- `/admin/blog`
- `/admin/blog/[id]`
- `/admin/faqs`
- `/admin/email-templates`
- `/admin/push-notifications`
- `/admin/campaigns`
- `/admin/support`
- `/admin/support/[id]`
- `/admin/team`
- `/admin/roles`
- `/admin/audit-log`
- `/admin/settings`
- `/admin/match-algorithm`
- `/admin/safety-settings`
- `/admin/branding`
- `/admin/integrations`
- `/admin/maintenance`
- `/admin/admin-profile`
- `/admin/security`

## Project structure

```text
src/
  app/                    App Router pages and route groups
  components/
    admin/                Admin shell, charts, tables, and modules
    auth/                 Authentication and onboarding
    brand/                Logo and brand primitives
    marketing/            Public website and profile presentation
    member/               Member app shell and product pages
    ui/                   Shared controls, icons, theme, and headings
  lib/
    site-data.ts          Brand, navigation, mock data, and content
    utils.ts              Shared helpers
public/
  profiles/               Original local fictional SVG portraits
```

## Fast customization

### Brand name and copy

Edit `src/lib/site-data.ts`:

- `brand`
- `publicNav`
- `features`
- `pricing`
- `faqs`
- `marketingPageContent`

### Colors and typography

Edit the CSS variables in `src/app/globals.css`:

- `--primary`
- `--accent`
- `--background`
- `--surface`
- `--success`
- `--warning`
- `--danger`
- `--font-sans`
- `--font-display`

The `/style-guide` page previews these design tokens.

### Navigation

Edit `publicNav`, `memberNav`, `memberSettingsNav`, and `adminNav` in `src/lib/site-data.ts`.

### Profile images

Replace files in `public/profiles/`. The included portraits are original abstract SVG illustrations designed as local marketplace-safe placeholders. Update the paths in `profiles` when filenames change.

### Mock data

Most reusable mock data lives in `src/lib/site-data.ts`. Admin module datasets are organized near the top of `src/components/admin/admin-page.tsx` so they can be replaced with API data.

## Backend integration map

The template intentionally includes no database or API keys. Suggested integration boundaries:

- Authentication: replace auth form destinations with your provider
- Profiles: load member data inside member page components
- Discovery: replace the local `profiles` array with recommendation API results
- Likes and matches: connect action handlers in `discover-page.tsx`
- Messaging: replace local message state with a realtime subscription
- Payments: connect checkout and billing pages to your payment provider
- Verification: connect onboarding and admin review screens to an identity provider
- Moderation: connect reports, evidence, decisions, and audit events to your trust system
- Analytics: replace `chartData` with server-fetched metrics
- Content: connect page, blog, FAQ, campaign, and email screens to a CMS

## Accessibility and responsive behavior

The template includes semantic headings, labels, visible focus outlines, keyboard-friendly controls, reduced-motion support, accessible button names, responsive tables, mobile navigation, and touch-sized actions. Perform a final accessibility audit after adding production content and integrations.

## Production checklist

Before publishing or reselling a customized version:

- Replace all fictional product claims and statistics
- Replace legal placeholders with reviewed documents
- Add real authentication and authorization
- Protect admin routes on the server
- Enforce role-based access and audit sensitive actions
- Connect secure storage and private media rules
- Configure moderation and reporting policies
- Add payment terms and regional taxes
- Confirm image, icon, font, and content licensing
- Test every target browser and breakpoint
- Run accessibility, security, privacy, performance, and SEO reviews

## Important privacy pattern

The admin conversation interface is intentionally described as analytics and reported-content review. It should not be converted into unrestricted access to private member conversations. Production access must be limited, justified, logged, and aligned with your policies and applicable requirements.

## Marketplace packaging

Recommended deliverables:

- Source archive without `node_modules` or `.next`
- Live demo URL
- Screenshots for public, member, admin, mobile, and dark-mode views
- Installation and customization documentation
- Changelog
- Support policy
- License terms reviewed for the marketplace and your business