Nexus – Modern Digital Agency & Marketing Website Template

Overview

Nexus is a modern agency website template built with Tailwind CSS for digital marketing agencies, creative studios, SaaS companies, and growth-focused businesses. Whether you are building an agency website from scratch, redesigning an existing one, or launching a new creative agency, Nexus provides a professional, conversion-oriented agency website design template with dark mode, RTL support, and responsive layouts across all devices. Available in Alpine.js, React, Vue, and JavaScript — pick the framework that fits your stack.

Pages Included

Nexus ships with four fully designed pages that cover every essential part of a professional agency website template:

• Homepage / Landing Page — A bold, split-layout hero section with a gradient headline ("WE SCALE AMBITIOUS BRANDS"), award badge, dual CTA buttons (Start Your Project + View Case Studies), and a floating team badge with stacked avatars. Below the hero: an infinite marquee ticker scrolling services (Strategy, Branding, Development, Marketing, Content, SEO), a three-column services grid with hover color flip animations, a client testimonials section with three styled cards, an about/stats split section with overlay stat cards ($12M+ ROI, 94% client retention, 50+ global clients, 12 design awards), and a full-width CTA section.
• Services Page — A centered hero with "CAPABILITIES" headline and description. Below: three full-width numbered service blocks (01 Performance Marketing, 02 Brand Identity & Design, 03 Development), each with a description paragraph and a 2×2 deliverables grid showing checkmarked items (Paid Social, Google Ads, CRO, Email Automation, Logo Design, Visual Systems, Motion Graphics, Packaging, Website Development, Web Applications, Headless CMS, E-commerce). Also includes a four-step process section (Discovery → Strategy → Execution → Optimization) with large numbered backgrounds, and a CTA with "Get a Quote" button.
• About Page — A hero with "REBELS WITH A CAUSE" gradient headline and two-column intro text. Features a bento grid stats section with a large team photo, stat cards (4 Years in Business, 12 Countries Served), and a motivational quote card. Includes a team section with four circular team member portraits (grayscale-to-color hover), names, and titles. Also has a core values section with three numbered values (Radical Transparency, Speed Wins, Data Over Ego) in a styled list format.
• Contact Page — A split-layout page with contact information on the left (email address, office address, social links for Instagram/Twitter/LinkedIn) and a full styled contact form on the right with fields for Name, Email, Service Interest dropdown (Performance Marketing, Brand Identity, Web Development, Other), Budget Range radio pills ($5k–$10k, $10k–$25k, $25k–$50k, $50k+), message textarea, and a submit button with hover glow effect. Includes a success state with animated confirmation.

Key Features & Sections

• Split Hero Layout — The homepage hero uses a two-column grid with text on the left and a large team/office image on the right with a floating badge card showing "+40 Experts" with stacked avatar thumbnails and a lime-green glow behind the image.
• Infinite Marquee Ticker — A horizontally scrolling marquee between the hero and services sections, displaying service keywords in large, bold uppercase text. Fully CSS-animated with RTL direction support.
• Services Grid with Hover Animation — Three service cards with emoji icons, titles, and descriptions. On hover, the entire card flips its background color (light → black in light mode, dark → lime in dark mode), creating a dramatic interactive effect.
• Client Testimonials — Three testimonial cards with large serif opening quotes, client feedback text, avatar photos, names, and company titles. The middle card uses a dark reverse style with a lime glow accent for visual contrast.
• Bento Grid Stats — On the about page, a CSS Grid bento layout with a large 2×2 team photo, stat cards (years in business, countries served), and a motivational quote card in lime background — all with hover effects.
• Team Section — Four team members displayed in circular portrait frames with grayscale-to-color hover transitions and a lime border reveal effect. Names and role titles appear below each photo.
• Process Timeline — A four-step horizontal process layout on the services page (Discovery, Strategy, Execution, Optimization) with oversized numbered backgrounds and concise descriptions.
• Budget Range Selector — On the contact form, budget options are displayed as pill-shaped radio buttons that highlight in lime green when selected, providing a modern form interaction.
• Floating Stat Cards — Glassmorphism-style cards with backdrop blur overlaying images, showing key metrics like ROI generated and client retention rate.
• Full Footer — A four-column footer with logo, description, navigation links (Home, Services, About, Contact), and social links (Instagram, Twitter/X, LinkedIn, Dribbble), plus dark mode toggle and RTL language switcher.

Design & UI

• Typography — Uses Outfit font family across all weights (300–800) for a clean, geometric, modern agency aesthetic.
• Color System — Lime green (#ccf381) as the primary accent color on a black/white base. The lime accent is used for highlights, hover states, badges, CTA buttons, and glow effects, creating a bold agency look.
• Dark Mode — Complete dark mode implementation using Tailwind CSS dark: class with a toggle button in the footer. Background transitions from white to near-black (#09090b) with appropriate contrast adjustments on all elements.
• RTL Support — Full right-to-left layout support with Tailwind rtl: prefixes and flexbox direction adjustments. Includes an Arabic language switcher in the footer. Ideal for Arabic, Hebrew, and other RTL languages.
• Fully Responsive — Mobile-first responsive design with a hamburger menu overlay, stacked grid layouts, and hidden/visible elements. The mobile menu opens as a full-screen overlay with centered navigation links.
• Hover Animations — Color transitions on service cards (500ms), image grayscale-to-color reveals (700ms), scale-up on CTA buttons, rotate on logo icon, and translate-x on arrow icons. All transitions are smooth and performance-optimized.
• Glassmorphism Effects — Backdrop blur and semi-transparent backgrounds on the sticky header, floating badge cards, and stat overlay cards for a modern glass-panel look.
• Custom Scrollbar — Styled webkit scrollbar with zinc-colored thumb on transparent track for visual consistency.

Technology & Frameworks

Built entirely with Tailwind CSS utility classes and semantic HTML5. All interactive elements (mobile menu, dark mode toggle, RTL switcher, scroll detection) are powered by Alpine.js. The template is available in four framework versions: Alpine.js, React, Vue, and vanilla JavaScript. Code is clean, well-structured, and ready to integrate into any agency website project.

Frequently Asked Questions