Ian/dev

.claude/config.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "figma": {
+      "url": "https://mcp.figma.com/mcp"
+    }
+  }
+}

CLAUDE.md

@@ -208,5 +208,6 @@ stripe listen --forward-to localhost:4000/api/shops/webhooks/stripe
 - Backend: Jest tests in `__tests__/` or `*.test.ts` files
 - Run domain-specific tests: `npm run test:admin`, `npm run test:shop`, etc.
 - Use `test:watch` for TDD workflow
-- remember to only if exiplicitly told
-- to check database check the env database is directly connected to digital ocean
+- remember to only commit if i say so
+- to check database check the env database is directly connected to digital ocean
+- when creating a ui in frontend check shadcn components and use it

frontend/ACTUAL_IMAGE_MAPPING.md

@@ -0,0 +1,63 @@
+# Actual Image Mapping - Landing Page V2
+
+This document maps the actual images/GIFs in `frontend/public/img/landing/` to their usage in components.
+
+## Images Successfully Mapped
+
+### Hero Section (`HeroSection.tsx`)
+- **hero-person.gif** ✅ - Main animated hero image
+
+### What is RepairCoin (`WhatIsRepairCoin.tsx`)
+- **repaircoin-icon.png** ✅ - RepairCoin logo/icon
+
+### How It Works Cards (`HowItWorks.tsx`)
+- **howitworks-card-1.gif** ✅ - "Repair or Refer" card
+- **howitworks-card-2.gif** ✅ - "Track & Approve" card
+- **howitworks-card-3.gif** ✅ - "Redeem Anywhere" card
+
+### Share Rewards (`ShareRewards.tsx`)
+- **sharereward-card.gif** ✅ - Share rewards illustration
+
+### Loyalty Tiers (`LoyaltyTiers.tsx`)
+- **Using emoji fallbacks** (🥉 🥈 🥇) - No tier images provided
+
+### Find & Redeem (`FindAndRedeem.tsx`)
+- **partnerShopCard.gif** ✅ - Partner shop finder illustration
+
+### Redemption Control (`RedemptionControl.tsx`)
+- **controlRedepmtionCard1.gif** ✅ - "Shop Sends Request" step
+- **controlRedepmtionCard2.gif** ✅ - "Review the Details" step
+- **controlRedepmtionCard3.gif** ✅ - "Approve Securely" step
+- **controlRedepmtionCard4.gif** ✅ - "Redemption Complete" step
+
+### Shop Tiers (`ShopTiers.tsx`)
+- **buildForGrowthCard1.gif** ✅ - Standard Partner
+- **buildForGrowthCard2.gif** ✅ - Premium Partner
+- **buildForGrowthCard3.gif** ✅ - Elite Partner
+
+### Use Rewards Anywhere (`UseRewardsAnywhere.tsx`)
+- **userewardsanywherecard1.gif** ✅ - Customer rewards illustration
+- **userewardsanywherecard2.gif** ✅ - Shop rewards illustration
+
+### Wallet Control (`WalletControl.tsx`)
+- **yourwalleryoucontrolcard.gif** ✅ - Wallet control interface
+
+## Unused Images
+
+These images exist but are not currently used:
+- **landing-hero.png** - Alternative static hero image
+
+## Notes
+
+- Most images are **animated GIFs** which will add visual interest to the landing page
+- All image components have **fallback logic** that reverts to existing images if the landing images fail to load
+- The **LoyaltyTiers** section uses emoji icons (🥉 🥈 🥇) instead of images
+- Total file size: ~96MB (mostly from large GIFs)
+
+## Performance Considerations
+
+The landing page now uses multiple large GIF files. Consider:
+1. **Lazy loading** for below-the-fold GIFs
+2. **Optimizing GIF file sizes** if page load is slow
+3. Converting some GIFs to **video formats** (MP4/WebM) for better compression
+4. Using **Next.js Image component** for automatic optimization where possible

frontend/IMAGE_MAPPING.md

@@ -0,0 +1,64 @@
+# Landing Page Image Mapping
+
+This document maps Figma images to their usage in the landing page components.
+
+## Required Images
+
+Download these images from Figma and save them to `frontend/public/img/landing/`
+
+### Hero Section
+- **hero-person.png** - Main hero image (person with devices)
+- **hero-gradient-bg.png** - Background gradient effect
+
+### What is RepairCoin Section
+- **rcn-coin.png** or use animated coin with CSS
+
+### How It Works Cards
+- **card-repair.png** - Repair/Refer card image (Photo1, Photo2)
+- **card-track.png** - Track & Approve card image (Photo3)
+- **card-redeem.png** - Redeem Anywhere card image (Photo4)
+
+### Share Rewards Section
+- **rewards-people.png** - People sharing rewards image (Photo5)
+
+### Loyalty Tiers (Bronze/Silver/Gold)
+- **tier-bronze-person.png** - Bronze tier character (pexels-godisable-jacob-871495-removebg-preview-2)
+- **tier-silver-person.png** - Silver tier character (pexels-godisable-jacob-871495-removebg-preview-3)
+- **tier-gold-person.png** - Gold tier character (pexels-godisable-jacob-871495-removebg-preview-4)
+
+### Find & Redeem Section
+- **find-shops-map.png** - Map/location image (Photo14)
+
+### Redemption Control (4 Steps)
+- **redemption-step1-mail.png** - Shop sends request icon (new-mail-3d-icon)
+- **redemption-step2-notification.png** - Review details icon (email-notification-3d-illustration)
+- **redemption-step3-verify.png** - Approve securely icon (verify-message-3d-icon)
+- **redemption-step4-shield.png** - Complete icon (approved-shield)
+
+### Shop Tiers
+- **shop-standard.png** - Standard partner shop image (Photo6)
+- **shop-premium.png** - Premium partner shop image (Photo7)
+- **shop-elite.png** - Elite partner shop image (Photo8)
+
+### Use Rewards Anywhere
+- **rewards-customer.png** - Customer using rewards (Photo13)
+- **rewards-shop.png** - Shop owner benefits (Photo9)
+
+### Wallet Control
+- **wallet-mobile.png** - Mobile wallet interface (Photo15)
+
+## Image URLs from Figma
+
+If you need to download directly from Figma, here are the asset URLs:
+
+- Hero Photo: https://www.figma.com/api/mcp/asset/1679f8b8-879f-41e0-81f9-04604df81d5e
+- Card images: Photo1-4 (see Figma export)
+- Tier characters: pexels-godisable-jacob-871495 variants
+- 3D icons for redemption steps
+- Shop tier images: Photo6-8
+
+## Next Steps
+
+1. Export all images from Figma at 2x resolution
+2. Save them to `frontend/public/img/landing/` with the names above
+3. The components will automatically use these images

frontend/components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
+    "config": "tailwind.config.js",
     "css": "src/styles/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,