PawsAbilities AI - Premium Parallax Website

A premium parallax-style website for PawsAbilities AI, an AI Automation & App Development agency. Built with Next.js 14, featuring cyberpunk glitch effects, smooth parallax animations, and a modern dark theme with neon accents.

✨ Features

• 🎬 Interactive Video Background - Video plays only on cursor movement (parallax effect)
• 🎨 Cyberpunk Glitch UI - Animated glitch effects throughout the site
• 🌊 Smooth Parallax Scrolling - Multi-layer parallax effects on scroll
• 📱 Fully Responsive - Mobile-first design that works on all devices
• ⚡ Performance Optimized - Built with Next.js 14 App Router
• 🎯 SEO Friendly - Semantic HTML and proper metadata
• 🌙 Dark Theme - Neon green and magenta accents
• 🎭 Framer Motion Animations - Smooth, performant animations

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Git

Installation

1. Clone the repository

   git clone https://github.com/zedshy/pawsabilitiesai.git
   cd pawsabilitiesai

2. Install dependencies

   npm install

3. Add your assets

   • Place your video file at: public/video/glitch-cat.mp4
   • Place your cat artwork at: public/images/cat-artwork.png

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

📁 Project Structure

pawsabilitiesai/
├── app/
│   ├── globals.css          # Global styles, Tailwind directives, glitch animations
│   ├── layout.tsx           # Root layout with metadata and Toaster
│   └── page.tsx              # Main page assembling all sections
├── components/
│   ├── ui/                   # Shadcn/UI components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   ├── label.tsx
│   │   ├── textarea.tsx
│   │   ├── toast.tsx
│   │   ├── toaster.tsx
│   │   └── use-toast.ts
│   ├── sections/             # Page sections
│   │   ├── Hero.tsx          # Hero with video background
│   │   ├── About.tsx         # About section with image
│   │   ├── Services.tsx      # Services cards
│   │   ├── ParallaxFeature.tsx # Parallax feature section
│   │   ├── Contact.tsx       # Contact form
│   │   └── Footer.tsx        # Footer component
│   ├── GlitchText.tsx        # Reusable glitch text component
│   └── ParallaxLayer.tsx     # Reusable parallax layer component
├── lib/
│   └── utils.ts              # Utility functions (cn helper)
├── public/
│   ├── video/                # Video assets
│   │   └── glitch-cat.mp4    # Hero background video
│   └── images/                # Image assets
│       └── cat-artwork.png   # About section image
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
├── tsconfig.json
└── README.md

🎬 Asset Setup

Video File

• Location: public/video/glitch-cat.mp4
• Format: MP4 (H.264 recommended)
• Recommended: 1920x1080 or higher, under 10MB
• Behavior: Plays only when cursor moves (parallax effect)

Image File

• Location: public/images/cat-artwork.png
• Formats: PNG, JPG, or WebP
• Display: Shows in About section with parallax effects

🎨 Customization

Colors

Edit tailwind.config.ts to modify the neon colors:

neon: {
  green: "#00ff88",    // Electric green
  magenta: "#ff00ff",  // Magenta
  cyan: "#00ffff",     // Cyan
}

Content

• Hero Section: Edit components/sections/Hero.tsx
• About Section: Edit components/sections/About.tsx
• Services: Edit components/sections/Services.tsx
• Contact Form: Edit components/sections/Contact.tsx

Animations

Adjust Framer Motion animations in individual component files. All animations use Framer Motion for optimal performance.

🛠️ Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• UI Components: Shadcn/UI
• Icons: Lucide React

📦 Build for Production

npm run build
npm start

The production build will be optimized and ready for deployment on platforms like:

• Vercel (recommended for Next.js)
• Netlify
• AWS Amplify
• Any Node.js hosting

🎯 Key Features Explained

Parallax Video Effect

The Hero section video only plays when the cursor moves, creating an interactive parallax experience. The video pauses automatically after 1 second of no movement.

Glitch Effects

Multiple glitch animation techniques:

• CSS keyframe animations for text glitch
• Framer Motion for component-level glitches
• Hover effects on service cards

Parallax Layers

The ParallaxLayer component creates depth by moving elements at different speeds during scroll, creating a 3D-like effect.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is private and proprietary to PawsAbilities AI.

📧 Contact

For questions or inquiries, please use the contact form on the website or reach out through the repository.

---

Built with ❤️ for PawsAbilities AI

"Where Glitch Becomes Growth"