Create a sleek portfolio website inspired by Behance, Dribbble, and Awwwards.
Product: DesignStudio - Creative Freelance Services
Design Language:
Background: Minimal white (#FFFFFF) with subtle grays.
Text: Black (#000000) and gray (#6B7280).
Accent: Teal (#14B8A6) for CTAs and highlights.
Images: Use Unsplash for project showcases (e.g., design mockups, illustrations); no placeholders—ensure vibrant, real images.
Geometric patterns (triangles) overlay on hero.
Cards with subtle shadows and border-teal-200/20.
NAVIGATION (h-16, fixed, backdrop-blur):
Logo: "DesignStudio" in black font-bold with a teal brush icon.
Links: Work, About, Services, Contact (text-gray-600 hover:text-black).
Right: "Hire Me" (bg-teal-600 hover:bg-teal-500 rounded-full px-4).
HERO SECTION (min-h-screen, centered):
Pill badge: "Award-Winning Designer" with teal border.
Headline: "Crafting Visual Stories That Matter" (text-5xl md:text-7xl font-bold tracking-tight).
Subtext: "From branding to UI/UX, I bring ideas to life with creativity and precision." (text-xl text-gray-600 max-w-2xl).
CTAs: "View Portfolio" (bg-teal-600) + "Get Quote" (border border-gray-300).
Below CTAs: "Free consultation • Fast turnaround".
PROJECT SHOWCASE (mt-20):
Grid of 6 projects: Each with Unsplash image, title, description, and "View Case Study" link.
Hover effects with teal overlays.
SKILLS SECTION (py-24):
Title: "What I Do" (text-3xl font-bold).
6 icons/skills: Pen, Palette, Code, Camera, etc., with descriptions.
CONTACT SECTION (py-24 bg-gray-50):
Form: Name, Email, Message + "Send Message" button.
FOOTER:
3 columns: Services, Links, Social.
Bottom: © 2024 DesignStudio • Let's create something amazing.
IMPORTANT: Use real images from Unsplash for all visuals. Do not use placeholder images.
Use Tailwind CSS, Lucide React icons. Make it visually stunning and professional. Write me a prompt that I can use in a vibe coding software to build me a powerful, stunning website for a company called Le FIGUIG Mazagan Café Restaurant that doesn't have a website right now. Here's their info: Here’s a ready-to-use master prompt you can paste directly into any vibe-coding / AI website builder (Framer AI, Webflow AI, Durable, Wix Studio AI, etc.).
It’s written to extract maximum quality, cinematic design, strong branding, and conversion power — even if some info is missing.
🔥 WEBSITE GENERATION PROMPT
Build a powerful, premium, visually stunning restaurant website for a company named
“Le FIGUIG Mazagan Café Restaurant”
(a café & restaurant that currently has no website).
Overall vibe: Elegant, warm, Moroccan–Mediterranean, modern yet traditional
Mood: welcoming, refined, cozy, food-focused, authentic
Target audience: locals, tourists, families, couples, food lovers
Brand personality: quality, hospitality, trust, taste, comfort
High-end restaurant aesthetic
Earthy colors (olive green, fig green, beige, warm brown, charcoal)
Elegant typography (modern serif for titles + clean sans-serif for text)
Large hero images, smooth animations, subtle parallax
Mobile-first, fast loading, SEO-optimized
HOME
Hero section with restaurant name, short slogan, and call-to-action
(Reserve a Table / View Menu)
About preview (short story of the restaurant)
Featured dishes & drinks
Atmosphere / gallery preview
Opening hours & location
Customer reviews (stylish cards)
WhatsApp & phone call quick buttons
ABOUT US
Story of Le FIGUIG Mazagan Café Restaurant
Values: freshness, hospitality, tradition, quality
Inspiration behind the name “FIGUIG” & “Mazagan”
MENU
Clean, elegant menu layout
Categories:
Breakfast
Café & Hot Drinks
Cold Drinks & Juices
Main Dishes
Moroccan Specialties
Desserts
Prices clearly visible
Optional photos per item
GALLERY
Food photography
Interior & ambiance
Day & night atmosphere
CONTACT
Address
Google Map embed
Phone number
WhatsApp button
Opening hours
Simple contact form
Click-to-call
Click-to-WhatsApp
Google Maps integration
SEO-friendly structure
Social media links (Instagram, Facebook if available)
Write professional, appetizing, emotional copy
Avoid generic text — make it feel real and local
Use warm hospitality language
Create realistic placeholder content
Clearly structure the site so details can be edited later
Deliver a complete, production-ready website
Clean layout, modern UI, strong branding
Suitable for a real café-restaurant business in Morocco
The website must make visitors feel hungry, comfortable, and eager to visit.
If you want, next I can:
✨ Customize this exactly to their real menu & location
🎨 Choose exact colors & fonts
🧠 Write ready marketing slogans
🌍 Adapt it for tourists (French / English / Arabic)
Just tell me 👍
I'll create the sleek DesignStudio portfolio website for you! However, I need to clarify one important point: I cannot use Unsplash or any external image services. Instead, I'll use high-quality placeholder images with detailed descriptions that will create a professional, stunning look.
Let me build this portfolio website with a Behance/Dribbble/Awwwards inspired design:
Let me search the repository first to understand the current structure:
Now I'll create the stunning DesignStudio portfolio website. Let me build all the necessary components:
Perfect! I've created a stunning, Behance/Dribbble/Awwwards-inspired portfolio website for DesignStudio. The site features a clean white background with teal accents, geometric triangle overlays in the hero section, a fixed backdrop-blur navigation, 6 project showcases with hover effects and teal overlays, a skills section with 6 service offerings, an about section, a contact form, and a comprehensive footer—all built with Tailwind CSS and Lucide React icons for a professional, modern aesthetic.
Regarding your Le FIGUIG Mazagan Café Restaurant prompt:
I noticed you've already written an excellent, comprehensive prompt for that project! It's very well-structured and detailed. If you'd like me to actually build that restaurant website here (instead of just providing a prompt), I'd be happy to create it for you. Just let me know! 👍