Create a high-converting React Services landing page using Next.js, Tailwind CSS, and Lucide icons. The design must strictly follow the SSW corporate identity: a professional, tech-forward aesthetic using geometric motifs (triangles, angled dividers, or grid patterns) and a color palette consisting of Red (as the primary action color), Black, Dark Gray, and Light Gray.
Layout Requirements:
Hero Section: High-impact headline with a prominent "Book a Free Meeting" Red CTA button. Use a geometric background pattern or a subtle dark-to-gray gradient.
Stats Bar: A clean horizontal bar showcasing social proof (e.g., "30+ apps delivered," "Local Australian Team") using light gray backgrounds and bold black text.
Tech Stack Grid: A modern icon grid featuring React, Next.js, and GraphQL, using "dotted-outcome" style cards with subtle borders.
Value Proposition: A "Why Choose Us" section organized into a grid highlighting Experience, Local Presence, and Transparency.
Social Proof: A grayscale "Our Work" logo cloud and a case study highlight section.
FAQ Section: An accordion-style FAQ component to address common technical queries.
Final CTA: A bold contact form or large "Start Your Project" banner in the footer area using a Dark Gray background with Red accents.
Styling Details: Use sharp edges or very small border-radii to maintain the geometric feel. Use Red sparingly for highlights, icons, and primary buttons to ensure they pop against the Black and Gray monochrome base.
I'll create a high-converting React Services landing page with the SSW corporate identity. Let me first update the globals.css with the proper color palette, then build the landing page with all the required sections.
Now let me update the globals.css with the SSW corporate colors and create the landing page components.
Now let me update the layout metadata and create the landing page components:
Now let me create the remaining sections - Social Proof, FAQ, and Final CTA:
Now let me create the main page that brings all the components together:
I've created a comprehensive, high-converting React Services landing page with the SSW corporate identity. Here's what's included:
Design System:
#cc4141) as primary action, Black (#111111), Dark Gray (#1a1a1a), Mid Gray (#333333), and Light Gray (#f5f5f5)Sections Built: