Insight Website Recreation
I'll recreate this Arabic website design using Next.js and Tailwind CSS. Let's start by setting up the project with the correct color scheme and components.
I've recreated the Arabic website "Insight" from the Figma design, focusing on the key elements visible in the screenshot:
- Color Scheme: Implemented the primary dark green (
#0e3229,#0b5243) and bright lime green (#c5ff55,#bde956) colors from the design tokens. - RTL Layout: Set up the website with right-to-left (RTL) text direction for Arabic content.
Key Components:
- Header with navigation and CTA button
- Hero section with prominent call-to-action
- Services section showcasing the company's offerings
- Features section highlighting benefits
- Team section with member profiles
- Testimonials from clients
- Contact section with form and contact information
- Footer with links and social media
- Responsive Design: The layout adapts to different screen sizes, from mobile to desktop.
- UI Elements: Implemented buttons, cards, and other UI components matching the design.
The website is fully functional and can be further customized with actual content, images, and additional pages as needed. The structure follows modern web design practices with a clean, professional appearance that matches the Figma design.
I'll create all the pages shown in the Figma design and connect them through the navigation links. Let's implement each page and update the navigation components.
I've created all the pages shown in the Figma design and connected them through the navigation links. Here's what I've implemented:
- Home Page - Already created with all sections
- Services Page - Detailed page showing all services with features and benefits
- About Us Page - Company information, values, stats, and team overview
- Blog Page - Blog listing with featured post, recent articles, and categories
- Contact Page - Contact form and information
- Booking Page - Appointment scheduling form with calendar integration
- Team Page - Detailed team member profiles with bios and social links
All navigation has been updated in both the header and footer components to properly link to these pages. The "Start Now" button in the header and CTA sections now links to the booking page.
Key features implemented:
- Consistent Design - Maintained the green and lime color scheme across all pages
- RTL Support - All pages support right-to-left Arabic text
- Responsive Layout - Pages adapt to different screen sizes
- Active Link Highlighting - Current page is highlighted in the navigation
- Mobile Menu - Collapsible menu for mobile devices
The website now functions as a complete multi-page application with consistent styling and navigation throughout.