Wardbox/revamp (#52)

* Add claude.md, update wasp version to 0.19.x

* Sets up core project structure

Initializes the basic project layout with authentication, payments, UI components, and animations.

Adds a landing page with feature showcases and a call to action. Configures Stripe for subscription payments.

Includes authentication flow. Sets up a default theme.

* Update src/client/components/CLAUDE.md

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Enhances landing page accessibility and updates node version

Improves the landing page's accessibility by disabling animations for users who prefer reduced motion.

Updates the Node.js version used in the format workflow.

* Updates documentation for motion and payment

Updates documentation to improve clarity and provide better
instructions for setting up webhooks.

* Simplifies landing page animations

Refactors animation logic on the landing page for improved clarity and maintainability.

Removes the explicit fadeIn animation variant and leverages staggerItem for a more cohesive animation strategy across different sections.
This also reduces animation code duplication.

* use reduced motion component

* Simplifies motion handling on landing page

Removes the `useReducedMotion` check from the landing page component, relying instead on the global `MotionConfig` within the `MotionProvider`.

This change centralizes motion reduction logic, making the landing page code cleaner and easier to maintain.

* Dynamically renders landing page features

Replaces static feature cards with a dynamically rendered list.

This makes it easier to add, remove, or modify features on the landing page.

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: wardbox

.github/workflows/format.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v4.1.0
         with:
-          node-version: '20.x'
+          node-version: '22.x'
           cache: 'npm'
 
       - name: Setup Wasp

CLAUDE.md

@@ -0,0 +1,134 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with
+code in this repository.
+
+## Project Overview
+
+Roke is a Wasp starter template with shadcn/ui components, Motion animations,
+and TypeScript support. It uses Wasp ^0.19.x as the full-stack framework.
+
+## Development Commands
+
+```bash
+# Start database (required first)
+wasp db start
+
+# Run migrations
+wasp db migrate-dev
+
+# Start development server
+wasp start
+
+# Format code
+npm run format
+```
+
+## Architecture
+
+### Wasp Configuration
+
+- `main.wasp` - Central configuration for routes, pages, actions, queries, and
+  APIs
+- `schema.prisma` - Database entities (Prisma models)
+- Always define operations in `main.wasp` first, then implement in feature's
+  `operations.ts`
+
+### Feature-Based Structure
+
+```
+src/
+├── auth/              # Authentication pages and logic
+├── landing/           # Landing page
+├── payment/           # Stripe integration
+│   └── stripe/        # Stripe operations, webhooks, service
+├── root-components/   # Global components (nav, footer, theme)
+├── client/components/ui/  # shadcn/ui components
+├── motion/            # Motion animation config and components
+├── hooks/             # Custom React hooks
+└── lib/               # Utilities and setup
+```
+
+Each feature folder typically contains:
+
+- `FeaturePage.tsx` - Page components
+- `operations.ts` - Actions and queries
+- `components/` - Feature-specific components
+
+### Creating New Operations
+
+When adding new queries/actions:
+
+1. Define in `main.wasp` first:
+
+```wasp
+query getSomething {
+  fn: import { getSomething } from "@src/feature/operations",
+  entities: [Entity1, Entity2]
+}
+```
+
+2. Implement in `feature/operations.ts`:
+
+```typescript
+import { HttpError } from 'wasp/server'
+import type { GetSomething } from 'wasp/server/operations'
+
+export const getSomething = (async (args, context) => {
+  if (!context.user) {
+    throw new HttpError(401, 'Unauthorized')
+  }
+
+  return context.entities.Something.findMany()
+}) satisfies GetSomething
+
+// Export response type for components
+export type GetSomethingResponse = Awaited<ReturnType<typeof getSomething>>
+```
+
+**Critical points:**
+
+- Use `satisfies GetSomething` pattern (not `GetSomething = async`)
+- Export response type with `Awaited<ReturnType<...>>` for component props
+- Include authorization checks when needed
+
+### Wasp Conventions
+
+- Add new entities to `schema.prisma`, not `main.wasp`
+- Store operations in `feature/operations.ts` files
+- Use Wasp's `Link` component for internal navigation
+- Organize by features, not technical layers
+
+## Key Conventions
+
+### Imports
+
+- Wasp: `import { Entity } from 'wasp/entities'`,
+  `import { type Op } from 'wasp/server/operations'`
+- Motion: `import { motion } from 'motion/react'` (not framer-motion)
+- React hooks directly: `import { useState } from 'react'` (no React default
+  import)
+- Use relative imports in src (no @ alias)
+
+### Styling
+
+- Tailwind CSS with semantic color naming (e.g., `text-destructive` not
+  `text-red-500`)
+- Icons: `@phosphor-icons/react`
+- Mobile-first approach
+
+### Forms
+
+- React Hook Form with Zod validation
+- shadcn/ui Form components
+
+### Code Style
+
+- No semicolons, single quotes, JSX single quotes
+- No comments unless describing complex logic
+- Dependencies via `npm install` (not in main.wasp)
+
+### Database Changes
+
+- Forward-only migrations (never rename fields directly)
+- Run `wasp db migrate-dev` after schema.prisma changes

README.md

@@ -2,56 +2,107 @@
 
 A Wasp starter with sensible defaults.
 
-## What's he building in there?
+## What's Included
 
-I built Roke because I was tired of repeating the same setup ritual for every
-new Wasp project. Instead of continuing that cycle, I created the starting point
-I always wished I had.
-
-## Philosophy
-
-While most starters give you an empty canvas, Roke provides opinionated defaults
-that reflect how modern web apps are actually built. It embraces shadcn/ui's
-principles of being "Accessible. Customizable. Open Source." and extends them to
-the entire project structure.
-
-The goal isn't just to give you boilerplate - it's to provide a foundation that
-makes web development more enjoyable and accessible. Batteries included, but
-replaceable.
+- **Authentication** - Email/password with verification and password reset
+- **Payments** - Stripe subscriptions with checkout and customer portal
+- **UI Components** - shadcn/ui components (Button, Card, Dropdown, Sheet, etc.)
+- **Animations** - Motion spring animations with presets (snappy, bouncy, heavy)
+- **Dark Mode** - Theme toggle with system preference support
+- **TypeScript** - Full type safety throughout
 
 ## Getting Started
 
-Click "Use this template" button at the top of the repository
+1. Click "Use this template" button at the top of the repository
+2. Clone your new repository
+3. Install dependencies and start:
 
 ```bash
-# Start the development server
+npm install
 wasp db start
 wasp db migrate-dev
 wasp start
 ```
 
-Visit [roke.dev](https://roke.dev) for comprehensive documentation.  
-<br /> ![Format & Lint pipeline status](https://github.com/wardbox/roke/actions/workflows/format.yml/badge.svg)  
-![Deployment pipeline status](https://github.com/wardbox/roke/actions/workflows/deploy.yml/badge.svg?branch=deploy)
+## Project Structure
+
+```
+src/
+├── auth/           # Login, signup, password reset
+├── payment/        # Stripe subscriptions
+├── motion/         # Animation presets and provider
+├── landing/        # Home page (customize this!)
+├── client/components/  # shadcn/ui components
+└── root-components/    # Nav, footer, theme
+```
+
+Each directory has a `CLAUDE.md` file explaining its purpose and how to
+customize it.
+
+## Customization Checklist
+
+1. **Landing page** - Edit `src/landing/LandingPage.tsx`
+2. **App name** - Set `REACT_APP_NAME` in `.env.client`
+3. **Meta tags** - Update `head` section in `main.wasp`
+4. **Auth emails** - Edit templates in `src/auth/email.ts`
+5. **Stripe** - Add keys to `.env.server` (see `src/payment/CLAUDE.md`)
+6. **Email provider** - Change from `Dummy` to SendGrid/Mailgun in `main.wasp`
+
+## Key Files
+
+| File                               | Purpose                                |
+| ---------------------------------- | -------------------------------------- |
+| `main.wasp`                        | Routes, pages, auth config, operations |
+| `schema.prisma`                    | Database models                        |
+| `src/landing/LandingPage.tsx`      | Home page content                      |
+| `src/auth/email.ts`                | Email templates                        |
+| `src/motion/transitionPresets.tsx` | Animation variants                     |
+
+## Adding Features
+
+### New Page
 
-## Contributing
+1. Add route and page in `main.wasp`
+2. Create component in `src/`
+3. Add to nav if needed in `src/root-components/nav.tsx`
 
-We welcome contributions! Whether it's:
+### New Database Model
 
-- 🐛 Bug fixes
-- ✨ New features
-- 📝 Documentation improvements
-- 💡 Suggestions
+1. Add model to `schema.prisma`
+2. Run `wasp db migrate-dev`
+3. Create operations in `main.wasp` and implement in `src/`
 
-Feel free to open an issue or submit a pull request.
+### New UI Component
+
+```bash
+npx shadcn@latest add [component-name]
+```
+
+## Environment Variables
+
+### Client (`.env.client`)
+
+```
+REACT_APP_NAME=Your App Name
+```
+
+### Server (`.env.server`)
+
+```
+DATABASE_URL=postgresql://...
+STRIPE_SECRET_KEY=sk_...
+STRIPE_PUBLISHABLE_KEY=pk_...
+STRIPE_PRICE_ID=price_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+```
 
 ## Learn More
 
-- [Documentation](https://roke.dev)
 - [Wasp Documentation](https://wasp-lang.dev)
 - [shadcn/ui](https://ui.shadcn.com)
 - [Motion](https://motion.dev)
+- [Phosphor Icons](https://phosphoricons.com)
 
 ## License
 
-MIT License - feel free to use this in your own projects!
+MIT License - use this in your own projects!

main.wasp

@@ -1,17 +1,17 @@
 app roke {
   wasp: {
-    version: "^0.16.4"
+    version: "^0.19.1"
   },
   title: "Roke: A Full-Stack Wasp Starter with Modern UI Components",
   head: [
     "<meta name='description' content='A comprehensive Wasp starter template featuring shadcn/ui components, Motion animations, and TypeScript support for building modern full-stack web applications.'>",
-    
+
     "<meta property='og:url' content='https://example.com'>",
     "<meta property='og:type' content='website'>",
     "<meta property='og:title' content='Roke: A Full-Stack Wasp Starter with Modern UI Components'>",
     "<meta property='og:description' content='A comprehensive Wasp starter template featuring shadcn/ui components, Motion animations, and TypeScript support for building modern full-stack web applications.'>",
     "<meta property='og:image' content='https://example.com/example.png'>",
-    
+
     "<meta name='twitter:card' content='summary_large_image'>",
     "<meta property='twitter:domain' content='example.com'>",
     "<meta property='twitter:url' content='https://example.com'>",
@@ -50,7 +50,6 @@ app roke {
   }
 }
 
-//#region Routes
 route Landing { path: "/", to: Landing }
 route Profile { path: "/profile", to: ProfilePage }
 route SubscriptionRoute { path: "/subscription", to: SubscriptionPage }
@@ -61,9 +60,7 @@ route RequestPasswordResetRoute { path: "/request-password-reset", to: RequestPa
 route PasswordResetRoute { path: "/password-reset", to: PasswordResetPage }
 route EmailVerificationRoute { path: "/email-verification", to: EmailVerificationPage }
 route NotFoundRoute { path: "*", to: NotFoundPage }
-//#endregion
 
-//#region Pages
 page Landing {
   component: import Landing from "@src/landing/LandingPage",
 }
@@ -105,9 +102,7 @@ page CheckoutResultPage {
 page NotFoundPage {
   component: import NotFound from "@src/404Page"
 }
-//#endregion
 
-//#region Stripe Actions
 action createCheckoutSession {
   fn: import { createCheckoutSession } from "@src/payment/stripe/operations",
   entities: [User]
@@ -117,13 +112,10 @@ action createCustomerPortalSession {
   fn: import { createCustomerPortalSession } from "@src/payment/stripe/operations",
   entities: [User]
 }
-//#endregion
 
-//#region Stripe API
 api stripeWebhook {
-  fn: import { handleStripeWebhook } from "@src/payment/stripe/webhooks.ts",
+  fn: import { handleStripeWebhook } from "@src/payment/stripe/webhooks",
   middlewareConfigFn: import { stripeWebhookMiddlewareConfigFn } from "@src/payment/stripe/webhooks",
   httpRoute: (POST, "/stripe-webhooks"),
   entities: [User]
 }
-//#endregion