Create a modern, premium Arabic RTL event registration website for a youth workshop about LinkedIn.
The website should feel like a professional university/youth initiative landing page, not a generic form.
Workshop Information
Workshop title:
“من ملفك الشخصي إلى فرصك المهنية”
Platform:
“LinkedIn”
Trainer:
“ريان العزري”
Date:
“23/9/2026”
Time:
“5:00 مساءً”
Location:
“مركز الشباب”
Workshop:
“مجانية + شهادة حضور”
Instagram:
“@booad.om”
Phone:
“77332261”
⸻
IMPORTANT — Uploaded Assets
I will upload these assets directly to v0:
- Brand identity / visual identity file
- Ministry logo
- Initiative logo
- Trainer photo
Use the uploaded brand identity to determine the website’s colors, visual language, spacing, typography direction, and overall style.
Use the actual uploaded ministry and initiative logos. Do not create placeholder logos if the uploaded files are available.
Use the actual uploaded trainer photo in the hero section.
Do not replace uploaded assets with generated alternatives.
⸻
Design Direction
Create a visually impressive blue professional design inspired by LinkedIn and professional networking.
The design should communicate:
- Professional networking
- Personal branding
- Career opportunities
- LinkedIn profiles
- Skills and experience
- Professional connections
- Content creation
Use abstract networking elements, profile cards, connection lines, professional icons, and subtle LinkedIn-inspired visual elements.
Do NOT simply copy the LinkedIn website.
Do NOT create a fake LinkedIn logo.
Use the uploaded brand identity colors instead of hardcoding a random color palette.
The overall visual style should be:
- Modern
- Youthful
- Professional
- Clean
- Premium
- Arabic RTL
- Mobile-first
- Visually engaging
- Not overly crowded
Use subtle animations and hover effects.
⸻
PAGE 1 — LANDING PAGE
Create a full landing page.
Header
At the top:
[Ministry Logo] [Initiative Logo]
Keep the logos aligned beautifully and responsively.
On the side of the header, add a small lock icon:
🔒
This should be subtle and not look like a normal navigation item.
When clicked, open an admin login modal.
⸻
HERO SECTION
Create a large, visually impressive hero section.
Main title:
“من ملفك الشخصي إلى فرصك المهنية”
Below it:
“LinkedIn”
Add a short description:
“اكتشف كيف تبني حضورك المهني على LinkedIn وتحول ملفك الشخصي إلى بوابة لفرص مهنية جديدة.”
Display the uploaded trainer image professionally in the hero section.
Next to the image show:
“مقدمة الورشة”
“ريان العزري”
⸻
EVENT INFORMATION
Create four elegant information cards:
📅
“23/9/2026”
⏰
“5:00 مساءً”
📍
“مركز الشباب”
🎓
“ورشة مجانية + شهادة حضور”
⸻
WORKSHOP TOPICS
Create a section titled:
“محاور الورشة”
Display the following topics as modern cards with suitable icons:
- التعريف بالتطبيق
- بناء ملف شخصي احترافي من الصفر
- بناء الهوية والحضور المهني
- بناء شبكة علاقات مهنية
- صناعة المحتوى والتفاعل على LinkedIn
- الوصول إلى الفرص المهنية
- تطبيق عملي
“التطبيق مباشر أثناء الشرح”
Use a responsive grid.
On mobile, cards should stack vertically.
⸻
CALL TO ACTION
Create a strong CTA section:
“جاهز تبدأ رحلتك المهنية على LinkedIn؟”
Primary button:
“سجّل الآن”
Clicking this button should navigate to the registration page.
⸻
CONTACT SECTION
At the bottom of the landing page:
“للتواصل”
Instagram:
“@booad.om”
Phone:
“77332261”
Make the Instagram handle clickable.
⸻
PAGE 2 — REGISTRATION
Create a separate registration page using the same visual identity.
Title:
“استمارة التسجيل”
Subtitle:
“يسعدنا انضمامك إلى ورشة من ملفك الشخصي إلى فرصك المهنية.”
Create the following fields:
الاسم الثلاثي
Required
Text input
رقم الهاتف
Required
Phone input
البريد الإلكتروني
Required
Email input
ما توقعاتكم عن الأشياء التي تستفيدون منها من خلال الورشة؟
Optional
Large textarea
Add proper validation for required fields, phone number, and email.
⸻
IMPORTANT REGISTRATION NOTICE
Place this notice clearly above or below the submit button:
“ملاحظة: تعبئة هذه الاستمارة لا تعتبر تأكيدًا نهائيًا للحضور، وسيتم إرسال تأكيد الحضور لكم عبر WhatsApp لاحقًا.”
Make this visually noticeable but elegant.
⸻
SUBMIT BUTTON
Button text:
“إرسال التسجيل”
After successful submission, show a confirmation screen.
⸻
SUCCESS MESSAGE
Show:
“🎉 تم استلام تسجيلك بنجاح!”
Then:
“شكرًا لتسجيلك في ورشة
من ملفك الشخصي إلى فرصك المهنية.”
And clearly state:
“هذا التسجيل لا يعتبر تأكيدًا نهائيًا للحضور، وسيتم إرسال تأكيد الحضور لكم عبر WhatsApp لاحقًا.”
Then show:
📅 23/9/2026
⏰ 5:00 مساءً
📍 مركز الشباب
“نتطلع للقائكم! 💙”
⸻
ADMIN AREA
Create a protected admin area.
The lock icon in the header should open the admin login.
Admin access code:
“Booad2026”
Do not display this code anywhere publicly.
After successful authentication, open:
“/admin”
⸻
ADMIN DASHBOARD
Create a professional Arabic RTL dashboard.
Title:
“لوحة إدارة التسجيل”
Show statistics:
“إجمالي المسجلين”
Then display all registrations in a table.
Columns:
- الاسم الثلاثي
- رقم الهاتف
- البريد الإلكتروني
- التوقعات
- تاريخ ووقت التسجيل
Add:
- Search by name
- Search by phone
- Sorting
- View registration details
- Delete registration
- Export to CSV
- Export to Excel if supported
⸻
FILE MANAGEMENT
Inside the admin dashboard, create a section:
“إدارة الملفات”
Add a button:
“رفع ملف”
Allow the administrator to upload:
- DOCX
- XLSX
- CSV
- PNG
- JPG
- JPEG
Uploaded files should be displayed in a clean file list.
Allow the administrator to preview or manage uploaded files when supported.
⸻
DATA STORAGE
Implement registration data persistence.
Every registration should save:
- Full name
- Phone number
- Workshop expectations
- Registration date
- Registration time
Do not use temporary client-only state for the final registration data.
If a backend/database integration is required, structure the project so it can be connected to a persistent database such as Supabase.
Create a clear registration data model/table.
⸻
RESPONSIVE DESIGN
The website must work perfectly on:
- Mobile
- Tablet
- Desktop
Design mobile-first.
The registration form should be especially easy to complete on a phone.
⸻
TECHNICAL REQUIREMENTS
Use:
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui where appropriate
- Lucide icons
Use clean reusable components.
Keep the code organized and production-ready.
Use RTL throughout the Arabic interface.
Avoid excessive gradients, excessive animations, or visual clutter.
Make the website feel like a real professional event website.
⸻
FINAL USER FLOW
Landing Page
→ Click “سجّل الآن”
→ Registration Page
→ Fill form
→ Submit
→ Success confirmation
Admin:
Landing Page
→ Lock icon 🔒
→ Enter admin code
→ Admin Dashboard
→ View registrations
→ Manage registrations
→ Upload/manage files
→ Export data
