Cashier Landing Page

A modern, responsive landing page for a cashier/payment system built with Bootstrap 5 and custom CSS.

🚩 Live Server

🔗 Cashier - Landing Page

🚀 Features

• Responsive Design: Mobile-first approach with Bootstrap 5.3.7
• Modern UI: Clean and professional design with smooth animations
• Interactive Elements: Hover effects, blur animations, and smooth transitions
• Section Highlights:
  • Hero section with call-to-action buttons
  • Company carousel with infinite scroll animation
  • Feature cards with interactive hover effects
  • Pricing plans with highlighted recommended option
  • Customer testimonials with marquee animation
  • Plugin integrations showcase
  • Contact form for demo booking

🛠️ Tech Stack

• HTML5: Semantic markup structure
• CSS3: Custom styling with CSS variables and animations
• Bootstrap 5.3.7: Responsive grid system and components
• Google Fonts: Poppins font family
• JavaScript: Bootstrap bundle for interactive components

📁 Project Structure

cashier-landing-page/
├── index.html              # Main HTML file
├── css/
│   └── style.css           # Custom CSS styles
├── images/                 # Image assets
│   ├── banner_header.png
│   ├── icon_secure.svg
│   ├── company logos/
│   ├── feature icons/
│   ├── plugin logos/
│   └── profile images/
└── README.md              # Project documentation

🎨 Design System

Color Variables

• Primary Blue: #3a38ff
• Navy: #101041
• Soft Grey: #f9fbfc
• White: #ffffff
• Dark Grey: #949293

Typography

• Font Family: Poppins (Google Fonts)
• Font Weights: 300, 400, 500, 600, 700, 800

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/cashier-landing-page.git

2. Navigate to project directory

   cd cashier-landing-page

3. Open in browser

   • Simply open index.html in your web browser
   • Or use a local server like Live Server in VS Code

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

✨ Key Features

Bootstrap Components Used

• Navbar: Fixed navigation with responsive toggle
• Grid System: Bootstrap's 12-column grid layout
• Cards: For pricing plans and feature highlights
• Buttons: Primary and secondary button styles
• Form Controls: Contact form elements
• Utilities: Spacing, text alignment, and display utilities

Custom CSS Features

• CSS custom properties (variables) for consistent theming
• Smooth hover animations and transitions
• Marquee animations for testimonials
• Blur effects on card interactions
• Alternating section background colors

🎯 Sections Overview

1. Navigation: Fixed navbar with smooth scrolling links
2. Hero: Main banner with value proposition
3. Companies: Trusted partners carousel
4. Features: Key product features with interactive cards
5. Pricing: Three-tier pricing with highlighted recommendation
6. Stories: Customer testimonials with animated marquee
7. Plugins: Integration showcases with ratings
8. Contact: Demo booking form

🌟 Special Effects

• Carousel Animation: Infinite scrolling company logos
• Blur Effects: Interactive card focus states
• Marquee Animation: Vertical scrolling testimonials
• Hover Transitions: Smooth scale and shadow effects

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request