# Drannel Website V0 Template: Agency Portfolio with Contact Form — The Complete Guide - Tool: V0 Templates - Last updated: July 2026 ## TL;DR The Drannel Website template is a multi-section agency portfolio built on Next.js, Tailwind CSS, shadcn/ui, and Framer Motion. It delivers a full-viewport hero, a project grid with hover effects, a services section, an about panel, and a contact form with an API route. The prompt pack wires the form to Resend email, adds a Supabase leads table with Slack notification, and adds password-protected case study pages. ## Frequently asked questions ### Is the Drannel Website V0 template free to fork? Yes. Community templates on v0.dev are free to fork. Forking uses a small number of your V0 plan credits. The template code itself has no licensing fee — the project in your account is yours. ### Can I use this template commercially for a client's agency website? Yes. V0 community templates are published under permissive terms that allow commercial use. Always verify the current v0.dev terms of service for the definitive statement, as licensing terms can evolve. ### The ContactForm submit doesn't do anything in production — why? This is almost always the API route path mismatch: the fetch in the form component references a different URL than the actual file under app/api/. Check that the fetch URL and the route folder name match exactly. The first gotcha above has a diagnostic prompt you can paste into V0 to fix it automatically. ### Why does my fork break in preview after I ask V0 to update the ServicesSection? V0's agent can strip handler functions or reset props when it rewrites adjacent sections in the same file. After any AI edit, scroll to ContactForm and test the submit — if the button no longer posts, the onClick handler was likely stripped. Use the diagnostic prompt in Gotcha 1 above to restore it. ### How do I add real project images to WorkGrid? Edit the src prop in each tag inside WorkGrid to point to your actual project screenshot URLs. Then ask V0: 'Add remotePatterns entries to next.config.ts for these domains: [your domains].' Without that config change, next/image will throw a domain-not-allowed error in the Vercel deployment. ### How do I make the ContactForm actually send me an email? Use Prompt 3 in the pack: it builds a /api/contact route handler using the Resend SDK with zod validation and correct path alignment. Add RESEND_API_KEY and RECIPIENT_EMAIL to the Vars panel before redeploying. ### Can RapidDev help me turn this template into my agency's actual website? Yes. RapidDev works with V0-generated agency sites and can add a CMS (Sanity or Contentful), a production email pipeline for ContactForm leads, and a deployment workflow that lets you update portfolio entries without touching V0. Your existing design stays intact. ### Is there a way to protect client case study pages so not everyone can see them? Yes — Prompt 6 in the pack adds a cookie-based password gate to all /work/[slug] dynamic routes. The unlock page sets an httpOnly cookie on correct password entry and redirects to the originally requested case study. Store the ACCESS_SECRET in the Vars panel. --- Source: https://www.rapidevelopers.com/v0-template/drannelwebsite © RapidDev — https://www.rapidevelopers.com/v0-template/drannelwebsite