README

NeuroWeb 🧠

Marketing With a Mind of Its Own

NeuroWeb is a cutting-edge digital marketing website that combines neuroscience-inspired strategy with deep marketing expertise to deliver measurable growth for businesses. Built with modern web technologies, it features an immersive user experience with interactive 3D elements, smooth animations, and comprehensive sections showcasing services and expertise.

✨ Features

🎯 Core Functionality

Neuroscience-Inspired Design: Marketing strategies backed by cognitive science principles
Interactive 3D Background: Silk-like animations using Three.js and React Three Fiber
Canvas Reveal Effects: Stunning hover animations with shader materials
Responsive Design: Optimized for all devices and screen sizes
Video Hero Section: Engaging hero video with gradient overlays
Performance Optimized: Built with Next.js 15 and TypeScript for maximum performance

🏗️ Complete Website Sections

Hero Section: Compelling intro with animated call-to-action
Services Section: Comprehensive service offerings with interactive cards
Why NeuroWeb Section: Unique value propositions with animated counters
About Us Section: Team showcase with Canvas Reveal Effects
FAQ Section: Collapsible FAQ with smooth animations
Footer: Complete contact information and social links

🛡️ Error Handling & Navigation

Custom 404 Page: Branded not-found page with navigation options
Global Error Boundary: Production-ready error handling with reset functionality
Active Route Highlighting: Smart navigation with current page indicators
Mobile-First Navigation: Responsive header with slide-out mobile menu

🎨 Advanced UI Components

Animated Counters: Smooth number animations with viewport triggers
Spotlight Cards: Interactive service cards with dynamic lighting effects
Shiny Text Effects: Premium text animations for headings
Accordion Components: Smooth FAQ sections with Radix UI
Canvas Reveal Effects: Custom Three.js shaders for team member cards

🛠️ Tech Stack

Frontend Framework

Framework: Next.js 15 with App Router
Language: TypeScript with strict mode
Styling: Tailwind CSS with custom color scheme

3D Graphics & Animations

3D Engine: Three.js with React Three Fiber
Animations: Framer Motion with viewport triggers
Shaders: Custom GLSL shaders for Canvas Reveal Effects

UI & Components

UI Library: Radix UI primitives
Component Library: Custom shadcn/ui components
Icons: Lucide React with custom social icons
Typography: Space Grotesk font family

Development Tools

Bundler: Turbopack (Next.js 15)
Linting: ESLint with TypeScript rules
Code Quality: Prettier for formatting
Type Safety: Full TypeScript coverage with strict mode

🎭 Available Pages

Home (/): Complete landing page with all sections
Services (/services): Service offerings and expertise
About (/about): Company information and team
Contact (/contact): Contact forms and information
404 Error: Custom not-found page with navigation
Error Boundary: Global error handling for production

🎨 Color Scheme & Design

Primary Colors

Brand Purple: #6a5f6d - Main brand color used throughout
Gradient Variations: Multiple purple shades for depth
Accent Colors: White overlays with opacity variations
Error States: Red accents for error pages and validation

Typography

Primary Font: Space Grotesk (Google Fonts)
Weight Variations: 300, 400, 500, 600, 700
Responsive Scaling: Fluid typography across all devices

Animation Principles

Staggered Entrances: Sequential element animations
Viewport Triggers: Animations triggered on scroll
Smooth Transitions: 60fps performance target
Reduced Motion: Respects user accessibility preferences

📁 Project Structure

neuroweb/
├── public/                    # Static assets
│   ├── hero-video.mp4        # Hero section background video
│   ├── about-us-section-image.jpg # About section image
│   └── *.svg                 # SVG icons and graphics
├── src/
│   ├── app/                  # Next.js App Router
│   │   ├── globals.css       # Global styles and CSS variables
│   │   ├── layout.tsx        # Root layout with font configuration
│   │   ├── page.tsx          # Home page with all sections
│   │   ├── not-found.tsx     # Custom 404 error page
│   │   ├── error.tsx         # Global error boundary
│   │   ├── services/         # Services page
│   │   ├── about/            # About page
│   │   └── contact/          # Contact page
│   ├── components/           # Reusable components
│   │   ├── background/       # 3D background components
│   │   │   └── silk.tsx      # Three.js silk animation
│   │   ├── custom/           # Custom interactive components
│   │   │   ├── animated-counter.tsx
│   │   │   └── hero-video.tsx
│   │   └── ui/               # shadcn/ui components
│   │       ├── accordion.tsx
│   │       ├── button.tsx
│   │       ├── canvas-reveal-effect.tsx
│   │       ├── shiny-text.tsx
│   │       ├── skeleton.tsx
│   │       └── spotlight-card.tsx
│   ├── layouts/              # Page layout components
│   │   └── home/             # Home page sections
│   │       ├── Header.tsx    # Navigation with active state
│   │       ├── Hero.tsx      # Hero section with video
│   │       ├── Services.tsx  # Services showcase
│   │       ├── WhyNeuroweb.tsx # Value propositions
│   │       ├── About.tsx     # Team section with Canvas Reveal
│   │       ├── faq.tsx       # FAQ accordion section
│   │       └── footer.tsx    # Complete footer with links
│   └── lib/                  # Utilities and helpers
│       └── utils.ts          # Tailwind class utilities
├── components.json           # shadcn/ui configuration
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Dependencies and scripts

🎨 Key Components & Features

🌊 3D Background Animation

Silk Component: Interactive particle system with physics-based movement
Three.js Integration: Optimized rendering with React Three Fiber
Responsive Performance: Adaptive quality based on device capabilities

🎭 Canvas Reveal Effect

Custom Shaders: GLSL fragment shaders for reveal animations
Team Cards: Hover-triggered reveals with smooth transitions
TypeScript Integration: Fully typed Three.js materials and uniforms

📱 Responsive Navigation

Active State Detection: usePathname hook for current page highlighting
Mobile Menu: Slide-out navigation with backdrop blur
Smooth Animations: Framer Motion transitions for all interactions

🎯 Interactive Elements

Animated Counters: Intersection Observer triggered number animations
Spotlight Cards: Dynamic lighting effects following mouse movement
Accordion FAQ: Smooth expand/collapse with Radix UI primitives
Shiny Text: Gradient text effects with CSS animations

🚨 Error Handling

Custom 404: Branded not-found page with navigation options
Error Boundary: Production-ready error catching with reset functionality
Development Mode: Detailed error information for debugging

Build Optimization

Three.js Bundles: Automatically tree-shaken for smaller builds
Image Optimization: Next.js Image component with WebP conversion
CSS Purging: Tailwind CSS automatically removes unused styles
TypeScript Compilation: Full type checking during build process

📝 Available Scripts

Script	Description
`npm run dev`	Start development server with Turbopack
`npm run build`	Build the application for production
`npm run start`	Start the production server
`npm run lint`	Run ESLint for code quality checks
`npm run type-check`	Run TypeScript compiler for type checking

🔧 Configuration Files

next.config.ts: Next.js configuration with image domains
tailwind.config.ts: Custom color scheme and animations
tsconfig.json: Strict TypeScript configuration
components.json: shadcn/ui component configuration
eslint.config.mjs: ESLint rules and TypeScript integration

Built with ❤️ by Kaium Al Limon

NeuroWeb - Where Marketing Meets Mind Science 🧠✨

Neuroweb

Languages

Navigation

Tools Hub

Live Telemetry

Repository

Contributors