Build a pixel-faithful React + Tailwind CSS website that reproduces the Dar El Salam Travel homepage and site structure from https://dstworldtravel.com/ . Do not change layout ordering or remove sections; keep wording and headlines the same unless noted. Produce reusable React components, client routing (React Router/Next.js pages), accessibility attributes, and responsive Tailwind classes for mobile/tablet/desktop. Provide assets as placeholders with descriptive file names (e.g., hero-banner.jpg, article-1.jpg) and include an assets folder structure and an exportable CSS/Tailwind config. Use functional components and hooks only. Keep visual styling, spacing, fonts and colors consistent with the original site (use system or Google fonts that closely match). Provide comments in code where dynamic content or backend integration is required. Site scope & pages Home (root /) — full homepage content and sections as on live site. Articles / Blog listing (/articles) — list view with cards and excerpt. Single Article (/articles/:slug) — article page with image, title, body, and related posts. Hajj (/hajj) — landing page for Hajj offerings (link from nav). Umrah (/umrah) — overview and subpages for Umrah 2025 and Umrah 2026 (links present). Tours (/tours) — overview page for tours. Contact / Get In Touch (/contact) — contact form and contact details. Privacy Policy (/privacy-policy) and Terms & Conditions (/terms) pages (static). 404 page. Global header / navigation Topbar showing phone number 1-866-327-7252 and email [email protected] at left. Right side: social icons (Facebook, X, Instagram) linking to placeholders. Primary navbar with brand logo (use logo.svg/logo.png placeholder), menu items: Hajj, Umrah (dropdown with Umrah 2025, Umrah 2026), Tours, Select Page (mobile select). Navbar must be sticky on scroll and collapsible into a hamburger on small screens. Clear call-to-action style buttons for important links like GET IN TOUCH / HAJJ / UMRAH. Hero section (above the fold) Big headline: Explore The World Subheadline: Over 35 years of Travel Service Experience – Journey With Us Prominent three CTA buttons or tiles labeled HAJJ, UMRAH, TOURS with hover states. Use large hero background placeholder hero-banner.jpg with subtle overlay and centered text; ensure good contrast & accessible headings. Articles / Blog preview block on homepage Section title: Articles with subtitle “Travel Stories, Tips and Recommendations”. Grid of article preview cards (image, title, short excerpt). Use the following article items and text (copy from site): How to Register on Nusuk for Hajj 2026 — include small excerpt. A Traveler’s Guide to VAT Refunds in Saudi Arabia Embracing the Journey Ahead Understanding Hajj Packages Hajj Terminology Guide Navigating the Journey of a Lifetime: How to Choose the Right Hajj Package For You A Guide to Understanding Hajj Packages Understanding the Different Roles in Hajj Through Nusuk Each card links to the article page; implement client side pagination or “load more”. Testimonial / Quote block Create a testimonials carousel/stack with quotes visible on site: Quotes from Hassan & Najua, Saima Mukhtar, Fairoze Poona, Sakib & Kiran — include the short paragraphs present on the site. Use a sliding carousel with previous/next controls and accessible ARIA roles. CTA block before footer Large centered heading: What are you waiting for? CTA button: Get In Touch linking to /contact. Footer Repeat social icons and contact details. Copyright text: Copyright Dar El Salam Travel. All Rights Reserved. Links: Privacy Policy | Terms & Conditions Make footer responsive and include semantic HTML (<footer>) and proper landmarks. Contact page & form Contact form fields: Name, Email, Phone, Subject (select), Message (textarea), Consent checkbox for privacy. Validate client-side (required fields, email format). Show contact details & phone/email prominently. On submit: show success and error states. Provide comments where backend endpoint /api/contact should be invoked (example fetch/axios POST). Blog article template Big feature image, H1 title, date, author (if present), leading paragraph, full body content with headings, images, blockquotes, lists. Sidebar optional with recent posts, categories, and search. Add social share buttons (Facebook/Twitter/Instagram) that open share dialogs for the article URL. Design & UI details Use Tailwind CSS v3 utility classes; include a tailwind.config.js suggestion for theme colors and fonts to match site (neutral palette, deep navy/black headings, muted gray text). Typography: pick Google font that matches (suggest Lora or Merriweather for headings and Inter or Roboto for body) — specify substitution in prompt. Buttons: rounded small corner, shadow subtle, hover transform. Spacing: match large hero spacing, consistent section padding (e.g., py-16 desktop, py-8 mobile). Images: use object-cover and fixed aspect ratios to match thumbnails on original. Provide alt text for all images. Responsiveness & accessibility Fully responsive with Tailwind breakpoints; ensure mobile nav, collapsible menus, readable font sizes, and keyboard accessible interactive components (menus, carousel, forms). Add ARIA attributes: role="navigation", aria-expanded, aria-controls for mobile nav; aria-live for form messages. Color contrast: ensure all text meets WCAG AA. SEO & meta Use React Helmet (or Next.js Head) to add meta tags: title, description, canonical, Open Graph (og:title, og:description, og:image), twitter card tags. Suggest default meta values copying the homepage headline and top article blurbs. Sitemap.xml and robots.txt placeholder. Code structure & architecture Suggested folder layout: /src/components — Header, Footer, Hero, ArticleCard, ArticleList, TestimonialCarousel, ContactForm, FooterLinks, SEO /src/pages — Home.jsx, Articles.jsx, ArticlePage.jsx, Hajj.jsx, Umrah.jsx, Tours.jsx, Contact.jsx, Privacy.jsx, Terms.jsx, NotFound.jsx /public/assets — hero-banner.jpg, article-1.jpg, logo.png, social icons. /src/styles — tailwind.css, global utilities. /src/api — placeholder functions for fetching posts, contact post; comments where to connect to backend (MERN API). Use fetch/axios wrappers and provide sample mock data JSON for articles and testimonials. Implement client routing with react-router-dom or Next.js pages depending on framework choice. Provide both patterns as commented options.