Agency.ai

Overview

Agency.ai is a React-based marketing and digital agency landing page built with Vite. The app presents a polished single-page experience for an agency brand, featuring a hero section, service offerings, featured work, team profiles, and a contact form designed for lead generation.

Features

• Responsive agency landing page with sticky navigation
• Mobile-friendly menu and call-to-action links
• Light and dark mode toggle using localStorage and a dark class
• Animated hero section with trust badge and branded marketing headline
• Service cards for advertising, content marketing, content writing, and social media
• Portfolio section showcasing recent work items
• Team directory with profile cards
• Contact form that submits to Web3Forms and displays toast notifications
• Newsletter email input and social icon section in the footer
• Custom cursor ring and dot overlay with motion-based interactions

Tech Stack

• React 19
• Vite 7
• JavaScript
• Tailwind CSS v4
• @tailwindcss/vite
• motion (motion/react)
• react-hot-toast
• ESLint with React Hooks and React Refresh rules

Project Structure

.
├── public/
│   └── favicon.ico
├── screenshots/
│   ├── home.png
│   ├── services.png
│   ├── our-work.png
│   ├── team.png
│   └── contact.png
├── src/
│   ├── assets/
│   │   ├── assets.js
│   │   ├── ads_icon.svg
│   │   ├── airbnb_logo.svg
│   │   ├── arrow_icon.svg
│   │   ├── bgImage1.png
│   │   ├── bgImage2.png
│   │   ├── close_icon.svg
│   │   ├── coinbase_logo.png
│   │   ├── content_icon.svg
│   │   ├── email_icon.svg
│   │   ├── facebook_icon.svg
│   │   ├── google_logo.svg
│   │   ├── group_profile.png
│   │   ├── hero_img.png
│   │   ├── instagram_icon.svg
│   │   ├── linkedin_icon.svg
│   │   ├── logo.svg
│   │   ├── logo_dark.svg
│   │   ├── marketing_icon.svg
│   │   ├── menu_icon.svg
│   │   ├── menu_icon_dark.svg
│   │   ├── microsoft_logo.png
│   │   ├── moon_icon.svg
│   │   ├── person_icon.svg
│   │   ├── rakuten_logo.png
│   │   ├── social_icon.svg
│   │   ├── sun_icon.svg
│   │   ├── twitter_icon.svg
│   │   ├── work_dashboard_management.png
│   │   ├── work_fitness_app.png
│   │   ├── work_mobile_app.png
│   │   └── zoom_logo.png
│   ├── components/
│   │   ├── ContactUs.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Navbar.jsx
│   │   ├── OurWork.jsx
│   │   ├── ServiceCard.jsx
│   │   ├── Services.jsx
│   │   ├── Teams.jsx
│   │   ├── ThemeToggleBtn.jsx
│   │   ├── Title.jsx
│   │   └── TrustedBy.jsx
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── vite.config.js
└── node_modules/

Getting Started

1. Install dependencies:

npm install

2. Start the local development server:

npm run dev

3. Open the local Vite URL shown in the terminal in your browser.

Available Scripts

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "preview": "vite preview"
}

Screenshots

Home Landing Page

Services Section

Our Work Section

Team Section

Contact Form

Project Components

• App.jsx sets up the page layout and the global theme state. It also implements the custom cursor ring and dot tracking on mouse move.
• Navbar.jsx renders the sticky top navigation, brand logo, navigation links, and the mobile menu toggle.
• Hero.jsx displays the primary marketing heading, trust badge, and hero visual.
• TrustedBy.jsx shows branded company logos in a trust section.
• Services.jsx and ServiceCard.jsx render the agency services with animated cards and a hover glow effect.
• OurWork.jsx displays recent work items in a responsive card grid.
• Teams.jsx renders team member cards with names and titles.
• ContactUs.jsx contains the contact form, Web3Forms submission logic, and toast notifications.
• Footer.jsx includes branding, navigation links, newsletter field, and social icons.
• ThemeToggleBtn.jsx handles theme switching and saves the selected theme in localStorage.
• Title.jsx is the reusable heading and description component used across content sections.

Future Improvements

• Add a true backend or CMS integration for contact and newsletter submissions
• Expand the project into multiple pages for individual services or case studies
• Add richer form validation and error handling for the contact experience
• Improve SEO metadata and accessibility coverage across the landing page

Author

TBD