ADmyBRAND is a modern, AI-powered marketing suite landing page built with Next.js 15, React 19, TypeScript, and Tailwind CSS. This project showcases a complete SaaS landing page with advanced features, animations, and a conversion-optimized design.
ADmyBRAND is an AI-powered marketing suite designed to revolutionize digital marketing strategies. The platform offers automated campaign management, performance analytics, and AI-driven insights to boost ROI by up to 300%.
- 🎨 Modern Design: Clean, professional design with smooth AOS animations
- 📱 Fully Responsive: Mobile-first approach optimized for all devices
- ⚡ Performance Optimized: Built with Next.js 15 App Directory and React 19
- 🏗️ Component Architecture: Atomic design principles with reusable TypeScript components
- 🔍 SEO Optimized: Complete metadata, Open Graph tags, and semantic HTML
- 🎭 Interactive Elements: AI analysis modal, pricing calculator, and dynamic forms
- 📊 Conversion Focused: Strategic CTAs, social proof, and lead generation forms
admybrand/
├── app/
│ ├── api/
│ │ ├── subscribe/ # Email subscription endpoint
│ │ └── test/ # Test API endpoint
│ ├── not-found/ # Custom 404 page
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Main landing page
├── components/
│ ├── layout/
│ │ ├── Footer.tsx # Site footer with links
│ │ ├── Header.tsx # Navigation header
│ │ └── Layout.tsx # Main layout wrapper
│ ├── providers/
│ │ └── AOSProvider.tsx # Animation on scroll provider
│ ├── sections/
│ │ ├── BlogSection.tsx # Blog/resources section
│ │ ├── CallToAction.tsx # CTA sections
│ │ ├── ContactForm.tsx # Contact form with validation
│ │ ├── FAQ.tsx # Accordion-style FAQ
│ │ ├── Features.tsx # Feature showcase
│ │ ├── Hero.tsx # Hero section with AI modal
│ │ ├── Pricing.tsx # Pricing plans
│ │ ├── PricingCalculator.tsx # Interactive pricing calculator
│ │ └── Testimonials.tsx # Customer testimonials
│ └── ui/
│ ├── Accordion.tsx # Collapsible content
│ ├── AIAnalysisModal.tsx # AI analysis popup
│ ├── Avatar.tsx # User avatars
│ ├── Badge.tsx # Status badges
│ ├── Button.tsx # Multi-variant buttons
│ ├── Card.tsx # Content cards
│ ├── FeatureCard.tsx # Feature display cards
│ ├── Input.tsx # Form inputs
│ ├── Modal.tsx # Modal dialogs
│ └── Tooltip.tsx # Hover tooltips
├── lib/
│ ├── lottie-animations.ts # Lottie animation configs
│ ├── pricing-data.ts # Pricing plans data
│ ├── seo-metadata-example.ts # SEO metadata templates
│ ├── typography-config.ts # Typography system
│ └── utils.ts # Utility functions
├── public/ # Static assets
└── types/
└── navigation.ts # TypeScript type definitions
- AI Analysis Modal: Interactive popup showcasing AI capabilities
- Multiple Media Types: Support for video, Lottie animations, or dashboard mockups
- Conversion-Focused CTAs: Strategic button placement and copy
- Social Proof: Trust indicators and company logos
- Feature Cards: Highlight key AI-powered capabilities
- Icon Integration: Lucide React icons for visual appeal
- Responsive Grid: Adaptive layout for all screen sizes
- Tiered Plans: Starter, Professional, and Enterprise tiers
- Pricing Calculator: Interactive calculator for custom pricing
- Feature Comparison: Detailed feature lists per plan
- Conversion Optimization: Strategic pricing psychology
- Social Proof: Customer success stories and ratings
- Avatar Components: Professional customer photos
- Credibility Indicators: Company logos and metrics
- Accordion Interface: Collapsible question/answer format
- Common Objections: Address typical customer concerns
- Trust Building: Transparency and detailed explanations
- Lead Generation: Optimized for conversions
- Form Validation: Client-side validation with TypeScript
- Newsletter Signup: Email subscription functionality
- Frontend Framework: Next.js 15 with App Directory
- React Version: React 19 with latest features
- Language: TypeScript for type safety
- Styling: Tailwind CSS v4 with custom animations
- Animations: AOS (Animate On Scroll) library
- Icons: Lucide React icon library
- Lottie: Lottie-react for advanced animations
- Form Handling: React hooks with validation
- API Routes: Next.js API routes for backend functionality
- Node.js: Version 18 or higher
- npm/yarn/pnpm: Package manager of choice
-
Clone the repository:
git clone https://github.com/anzz14/ADmyBRAND.git cd ADmyBRAND -
Install dependencies:
npm install # or yarn install # or pnpm install
-
Start development server:
npm run dev # or yarn dev # or pnpm dev
-
Open your browser: Navigate to
http://localhost:3000
npm run build
npm run start- Button: Multiple variants (primary, secondary, outline) with sizes
- Input: Form inputs with focus states and validation
- Card: Content containers with shadows and borders
- Modal: Dialog overlays with backdrop and animations
- Badge: Status indicators and labels
- Avatar: User profile images with fallbacks
- Tooltip: Hover information displays
- Accordion: Collapsible content sections
- AIAnalysisModal: Interactive AI showcase with animations
- PricingCalculator: Dynamic pricing calculation tool
- FeatureCard: Product feature highlighting with icons
- ContactForm: Lead generation form with validation
- Metadata Optimization: Complete title, description, and Open Graph tags
- Semantic HTML: Proper heading hierarchy and structure
- Schema Markup: Structured data for search engines
- Sitemap Ready: Optimized for search engine crawling
- Image Optimization: Next.js Image component with lazy loading
- Code Splitting: Automatic bundle splitting for faster loads
- CSS Optimization: Tailwind purging for minimal CSS
- Dynamic Imports: Lazy loading for heavy components (Lottie)
- Font Optimization: Google Fonts with display swap
npm run dev- Start development server with Turbopacknpm run build- Build optimized production bundlenpm run start- Start production servernpm run lint- Run ESLint for code quality
- Primary: Blue gradient (#2563eb to #1d4ed8)
- Secondary: Purple accent (#7c3aed)
- Success: Green (#10b981)
- Warning: Orange (#f59e0b)
- Error: Red (#ef4444)
- Neutral: Gray scale (50-950)
- Font Family: System fonts with fallbacks
- Headings: Bold weights (600-800) with proper hierarchy
- Body Text: Regular weight (400) with optimal line height
- Interactive: Medium weight (500) for buttons and links
- Grid System: CSS Grid and Flexbox layouts
- Breakpoints: Mobile-first responsive design
- Container: Max-width containers with proper margins
- Spacing Scale: Consistent 4px base unit system
- Hero Section: Modify
components/sections/Hero.tsx - Pricing Plans: Edit
lib/pricing-data.ts - Features: Update
components/sections/Features.tsx - SEO Metadata: Customize
app/page.tsxmetadata
- Colors: Update Tailwind config or CSS variables
- Typography: Modify
lib/typography-config.ts - Animations: Adjust AOS settings in
components/providers/AOSProvider.tsx - Components: Extend existing components in
components/ui/
- Create component in
components/sections/ - Import and add to
app/page.tsx - Update TypeScript types if needed
- Add to navigation if required
- Connect GitHub repository to Vercel
- Configure build settings (auto-detected)
- Deploy with automatic previews and CI/CD
- Netlify: Drag and drop or Git integration
- AWS Amplify: Full-stack deployment with backend
- Digital Ocean: App Platform deployment
- Railway: Simple Git-based deployment
# Add to .env.local for local development
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_GA_ID=your-google-analytics-id- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team: For the amazing React framework
- Tailwind CSS: For the utility-first CSS framework
- Lucide: For the beautiful icon library
- AOS: For smooth scroll animations
- Lottie: For advanced animations
Built with ❤️ using AI-assisted development
This project demonstrates the power of modern web technologies combined with AI-driven development workflows to create production-ready SaaS applications.