Build me a clean, modern, professional one page website for my AI automation agency called Granger Business.
Hero section: Bold headline "We Automate Your Business With AI" with subheadline "Save 10+ hours a week with custom AI systems built for your business" and a big button that says "Book a Free Call" linking to https://calendly.com/grangerbuisness/30min
Services section: Title "What We Build" with 3 service cards:
AI Email Automation — Automatically respond, classify, and route every email your business receives
AI Lead Pipeline — Capture, score, and follow up with leads without lifting a finger
AI Document Generation — Contracts, invoices, and proposals generated and sent automatically as PDFs
Results section: Title "Built and Proven" with these 6 stats as bold cards:
10 AI Automations Built
3 API Integrations
100% Automated Sales Pipeline
AI Contract Generation
AI Lead Scoring
AI Stock Analysis
Call to action section: Bold text "Ready to automate your business?" with subtext "Book a free 30 minute call and I'll show you exactly how AI can save your business 10+ hours a week" and a button "Book Your Call" linking to https://calendly.com/grangerbuisness/30min
Footer: grangerbuisness@gmail.com — Granger Business 2025
Design: Dark background, clean white text, purple accents, very modern and minimal, mobile friendly, smooth animations
Now I'll create the website with a dark theme and purple accents. Let me update the globals.css, layout.tsx, and create the main page with all sections.
Now let me create the main page with all the sections:
Now let me install framer-motion for the animations:
Let me verify the site is working by checking the browser:
The hero section looks great! Let me scroll down to see the rest of the page:
Services section looks clean! Let me continue scrolling to see the Results and CTA sections:
The footer shows 2026 (current year) but you specified 2025. Let me fix that and also check mobile responsiveness:
The mobile view looks great but I notice the CTA button might be cut off. Let me scroll down on mobile to verify all sections:
Mobile view is working perfectly - the CTA button is visible and the services section stacks properly. Let me reset the viewport and close the browser:
Your Granger Business AI automation agency website is complete! Here's what I built:
Hero Section - Bold headline with purple "With AI" accent, animated background glow, "AI Automation Agency" badge, and a prominent "Book a Free Call" button linking to your Calendly.
Services Section - Three clean cards showcasing AI Email Automation, AI Lead Pipeline, and AI Document Generation with icons and descriptions.
Results Section - Six stat cards in a responsive grid showing your 10 AI Automations Built, 3 API Integrations, 100% Automated Sales Pipeline, AI Contract Generation, AI Lead Scoring, and AI Stock Analysis.
CTA Section - "Ready to automate your business?" with compelling copy and another "Book Your Call" button.
Footer - Clean and minimal with your email and © Granger Business 2025.
The design features a dark background with purple accents, smooth Framer Motion animations, hover effects on cards, and is fully mobile responsive. Both CTA buttons link to your Calendly booking page.
Good call on both. Here's the corrected version:
Make these changes to the website:
The bottom 3 stat cards currently just say "AI" — fix them to show proper titles: "Contract Generation", "Lead Scoring", "Stock Analysis" with a relevant icon
Add a navigation bar at the top with: Granger Business logo on the left, and "Book a Call" button on the right
Add a thin purple gradient glow effect under the hero section to separate it from the services section
In the footer add: grangerbuisness@gmail.com
Make the service cards slightly larger with a subtle purple border glow on hover
Change "Book a Free Call" to "Book a Discovery Call" everywhere on the site
Good, I can see the footer already has the email. Now let me make all the requested changes:
Now let me create the navbar component and add the purple glow divider under the hero:
Now let me verify all the changes in the browser:
The navbar looks great with the logo and "Book a Call" button. I notice the main CTA button is not visible - let me scroll down to check all sections:
I can see:
- "Book a Discovery Call" button is now showing (updated text)
- The purple gradient divider line is visible between hero and services
- Service cards with larger icons are appearing
- Navbar is fixed at the top
Let me scroll down to check the results section and the stat cards:
Service cards look great with larger titles and icons. Let me continue scrolling to see the results stats:
The stat cards are now showing properly - "Contract Generation" with just the title (no "AI" prefix). Let me scroll to see all 6 cards including Lead Scoring and Stock Analysis:
All three bottom cards now show proper titles: "Contract Generation", "Lead Scoring", and "Stock Analysis" with their respective icons. Let me check the hover effect on service cards and then verify the footer:
Everything looks great:
- CTA section with "Book Your Call" button
- Footer showing "grangerbuisness@gmail.com - Granger Business 2025"
Let me close the browser:
All changes have been implemented:
- Fixed bottom 3 stat cards - Now display "Contract Generation", "Lead Scoring", and "Stock Analysis" with their icons (no more "AI" prefix)
- Added navigation bar - Fixed position with Granger Business logo (purple "G" badge) on the left and "Book a Call" button on the right
- Added purple gradient glow divider - Thin animated purple line separates the hero from the services section
- Footer already had the email - It was already showing grangerbuisness@gmail.com
- Enlarged service cards - Increased padding from p-8 to p-10, larger icons (w-16/h-16), larger titles (text-2xl), and added purple border glow on hover with box-shadow effect
- Changed "Book a Free Call" to "Book a Discovery Call" - Updated in the hero section CTA button