Arena Global Solutions
Designed & developed by Mohd Saif
Before vs After
Both versions were designed and developed entirely by Mohd Saif. The redesign eliminated every trace of the generic template and replaced it with a bespoke, premium visual identity — Three.js particle hero, GSAP-driven scroll animations, custom magnetic cursor, Lenis smooth scrolling, and a layout specifically engineered to convert visitors into digital marketing and web design clients.
100% original design — both versions
No templates, no UI kits. The original launch and the full redesign were both conceived and built from scratch by Mohd Saif — demonstrating a complete design-to-code ownership cycle.
01. Web Development Problems Solved
Arena Global Solutions sells premium digital marketing and website design services to businesses — but their v1 website, despite being well-built, looked like a high-quality template. In the agency market, a website that looks like every other agency's website sends an implicit message: 'We use the same tools, the same patterns, and the same approach as everyone else.' That's a credibility problem when your pitch is 'trust us with your brand's digital presence.' The redesign had to solve a perception problem, not just a design problem. The website needed to be genuinely impressive to the kind of decision-maker who has seen hundreds of agency websites and knows immediately when something is different.
02. Technical Architecture & Decisions
I chose React + Vite over Next.js for this build because the site's primary requirements — immersive motion, custom cursor, Three.js WebGL, and GSAP-driven interactions — are entirely client-side concerns. Next.js adds SSR complexity and a heavier architecture for a site that doesn't need server-rendered dynamic data at this stage; Vite's instant HMR and optimised production bundles gave me a lighter, faster build pipeline. Three.js is loaded via React Three Fiber and @react-three/drei, lazy-imported with React.lazy and Suspense so the particle system never blocks the critical render path. GSAP + Lenis is the canonical combination for scroll-driven animation in 2026 — GSAP's ScrollTrigger pins and scrub effects need a frame-synchronised scroll value, which Lenis provides. The custom magnetic cursor is a vanilla requestAnimationFrame loop operating directly on CSS transforms rather than React state — keeping cursor response at 60fps regardless of React render cycle. Tailwind CSS handles the utility layout work; component-specific complex styles (pseudo-element glows, gradient overlays, glass cards) are written as inline Tailwind arbitrary values and @apply rules. Radix UI provides accessible headless primitives for dialogs and dropdowns without adding any design constraints.
The Development Challenge
Arena Global Solutions is a full-service digital agency offering web design, app development, digital marketing, SEO, social media management, video production, product photography, and graphic design. When they came back for a redesign, the v1 website — while functional — had started to feel like what it was: a polished template. It communicated competence, but not authority. For an agency pitching premium web design and digital marketing services to businesses, that gap in perception was costing them leads. The v2 redesign brief was precise: make the website feel like proof. Every prospective client landing on arenaglobalsolution.com should immediately understand that this is an agency capable of building something extraordinary — because the website itself already is. I stripped the existing layout entirely and rebuilt from scratch. The hero section uses a Three.js WebGL particle field rendered via React Three Fiber, set against a deep dark background — a visual statement that sets the premium tone instantly. A custom magnetic cursor tracks pointer movement across the entire site, responding to interactive elements with elastic attraction effects. GSAP powers every scroll-triggered section entrance: split-text character animations, staggered service card reveals, parallax depth layers, and counter animations on stat blocks. Lenis smooth scrolling binds every section into a fluid, app-like scroll experience. The service architecture was redesigned for conversion: each service is surfaced with its value proposition front and centre, supported by case study previews and client outcomes. The lead capture section uses a multi-field contact form with real-time validation. The international locations block reinforces the agency's global reach across Delhi, New York, Dubai, and Toronto — a credibility signal aimed squarely at high-value enterprise clients. Every layout decision was made with a specific conversion outcome in mind: the homepage converts cold visitors into enquiries, the services pages convert service-aware visitors into discovery calls, and the portfolio converts sceptical visitors into believers.
Engineering Strategy
- Architected and rebuilt the entire frontend from scratch using React.js, Vite, and Tailwind CSS — no template, no leftover structure from v1.
- Implemented a Three.js WebGL particle field in the hero via React Three Fiber and @react-three/drei, lazy-loaded to protect initial render performance.
- Built a custom magnetic cursor system with elastic attraction behaviour on interactive elements, implemented via requestAnimationFrame and CSS transform interpolation.
- Engineered GSAP scroll-triggered animations for every major section: SplitText character-by-character entrances, staggered card reveals, parallax depth layers, and animated stat counters.
- Integrated Lenis smooth scrolling across the entire site with GSAP ScrollTrigger synchronisation for frame-perfect scroll-driven animation timings.
- Designed and developed a conversion-optimised services layout that surfaces value propositions, service outcomes, and social proof in a hierarchy engineered for agency lead generation.
- Built the brand slider, international locations block, testimonials carousel, and process section — each with purpose-built animation systems.
- Structured semantic HTML and React Helmet metadata for strong on-page SEO targeting the 'arenaglobalsolution' keyword and digital marketing service searches.
- Optimised Core Web Vitals: GPU-composited animations only, lazy-loaded Three.js, Cloudinary-served assets with auto quality/format, and a Vite bundle with code splitting and Terser minification.
Key Outcomes
- Transformed a generic template-based website into a bespoke premium digital experience that directly demonstrates Arena Global Solutions' capability to prospective clients.
- The Three.js hero and custom cursor combination creates an immediate first-impression gap between Arena Global Solutions and every competitor using off-the-shelf agency templates.
- Conversion-focused layout redesign: every section has a clear CTA hierarchy — hero to enquiry form, services to discovery call, portfolio to credibility — reducing the friction between landing and lead.
- Maintained 94/100 desktop PageSpeed and 82/100 mobile PageSpeed despite running Three.js, GSAP, Framer Motion, and Lenis simultaneously — proving premium motion design does not require sacrificing performance.
- SEO architecture targets 'arenaglobalsolution' and high-intent digital marketing service queries, giving the agency organic visibility from clients searching specifically for their services.
- Strengthened international brand perception with a global locations block (Delhi / New York / Dubai / Toronto) and a design language that communicates the same premium tier as agencies charging 5x the fees.
Explore More Projects
SpeedCharge
A premium full-stack EV charging platform for India — franchise lead generation, real-time admin CMS, Mapbox station locator, ROI calculator, and a sharp red-and-black UI built entirely solo with Next.js, GSAP, SASS, and a Node.js/MongoDB backend.
Habibi
A fully animated, 3D interactive consultancy platform helping entrepreneurs set up businesses, open bank accounts, and secure visas in Dubai.