Modern Theme Module For Stockifly SAAS

Modern Theme Module is a premium front-end theme add-on for Stockifly SAAS – Billing & Inventory Management with POS and Online Shop that transforms your SaaS landing page with a stunning dark UI, smooth animations, glassmorphism effects, and a fully responsive modern design.

Important Note: This is NOT a standalone script. It is an add-on that requires Stockifly SAAS – Billing & Inventory Management with POS and Online Shop to be installed and running. It will not work independently.

How It Works

Switch to the Modern Theme in 3 simple steps:

1. Download & Extract: Download the theme module from CodeCanyon and extract the ZIP file
2. Copy to Root: Copy the contents of the extracted folder into your Stockifly SAAS root directory
3. Activate: Add FRONT_THEME="modern" to your .env file — that’s it!

Animated Hero Section

• Animated Background Grid: Subtle grid pattern with gradient orbs and glowing particles for a premium visual backdrop
• Rotating SVG Circles: Multi-color gradient circles with continuous rotation and staggered animation timing
• 3D Browser Mockup: Interactive tilt effect on the hero browser card using VanillaTilt library with realistic perspective
• Glowing Border Animation: Animated gradient border on the browser mockup with shimmer and reflection effects
• Browser Chrome UI: Realistic window controls with red, yellow, and green buttons with soft glowing shadows

Dark Mode Design

• Professional Dark UI: Sleek dark color palette with carefully crafted contrast ratios for optimal readability
• Glassmorphism Effects: Modern backdrop blur, semi-transparent cards, and layered depth throughout the design
• Gradient Accents: Blue, purple, cyan, and emerald gradient accents for visual hierarchy and modern aesthetics
• CSS Custom Properties: HSL-based color system with opacity variants for consistent theming
• Glow & Shadow Effects: Multi-layer shadows and glow effects on cards, buttons, and interactive elements

Smooth Animations & Effects

• Scroll-Triggered Animations: Elements gracefully animate into view with fade-in, scale, and slide transitions on viewport entry
• Staggered Delays: CSS variable-based staggered animation delays for sequential entrance effects across card grids
• Lenis Smooth Scrolling: Buttery-smooth page scrolling with natural deceleration curves for a premium feel
• Hover Interactions: Spotlight hover effects on cards, scale transitions on images, and lift animations on buttons
• Text Animations: Animated text effects on section titles and hero headings

Testimonials with Infinite Marquee

• Dual Marquee Rows: Two rows of testimonials scrolling in opposite directions for visual interest
• Seamless Infinite Loop: Content duplicated 3x for smooth, gap-free continuous scrolling
• Star Ratings: Dynamic 5-star rating display for each testimonial
• User Avatars: Circular profile images with styled borders
• Client Logo Marquee: Continuous scrolling brand logos on the homepage

Interactive Pricing Section

• Monthly/Yearly Toggle: Animated billing period switcher with smooth thumb transition
• Popular Plan Badge: Distinctive highlighted badge for the recommended pricing plan
• Feature Checklists: Green checkmark icons for included features in each plan
• 3-Column Grid: Responsive pricing cards with hover effects and shadow transitions
• Dynamic Pricing Data: All plans and prices loaded from your Stockifly SAAS admin panel

Fully Responsive Design

• Mobile-First Approach: Pixel-perfect responsiveness across all screen sizes (sm, md, lg, xl breakpoints)
• Mobile Navigation Drawer: Dedicated hamburger menu with animated open/close transitions and overlay backdrop
• Mobile Language Accordion: Collapsible language selector optimized for mobile touch interaction
• Adaptive Grid Layouts: Cards and sections automatically adjust from 3 columns to 2 to 1 column based on screen width
• Touch-Friendly Elements: All buttons, links, and interactive elements sized for comfortable touch targets

All Pages Redesigned

• Homepage: Animated hero with browser mockup, client logos, alternating features, testimonial marquees, and CTA section
• Features Page: 3-column responsive feature grid with icon images, spotlight hover effects, and staggered animations
• Pricing Page: Monthly/yearly toggle, pricing cards with popular badge, feature checklists, and FAQ accordion
• Contact Page: 3-column info cards, AJAX-powered contact form, social media icons, and floating decorative elements
• Registration Page: Split-screen layout with feature benefits grid, subdomain input, and real-time AJAX form validation
• Email Verification Page: Animated SVG success checkmark with stroke animations, floating particles, and success/error states
• Dynamic Pages: Custom page template for any CMS pages created from the admin panel

Navigation & Layout

• Fixed Sticky Header: Navigation bar stays visible on scroll with fade-in animation
• Multi-Column Footer: Logo, product links, page links, and contact information organized in columns
• Social Media Icons: Facebook, Twitter, LinkedIn, Instagram, and YouTube icons in footer and contact page
• Footer Watermark: Large semi-transparent brand text for added visual identity
• Background Grid Pattern: Subtle dot grid overlay throughout the site for depth

CTA & Conversion Elements

• Call-to-Action Section: Eye-catching CTA with decorative animated circles and floating dots
• Email Input Box: Inline email form with integrated submit button
• Stats Display: Key metrics with checkmark icons to build trust
• Privacy Badge: Lock icon with security message for user confidence

Admin Panel Integration

• CMS-Powered Content: All headings, descriptions, features, and testimonials loaded from your admin panel
• Dynamic Pricing: Subscription plans and pricing pulled directly from your Stockifly SAAS database
• Logo & Branding: Site logo, favicon, and brand colors configured from admin settings
• Social Links: Facebook, Twitter, LinkedIn, Instagram, YouTube URLs from admin configuration
• Contact Information: Email, phone, and address displayed from admin settings

Technology Stack

• Tailwind CSS: Utility-first CSS framework for maintainable, responsive styling
• Lenis: Smooth scroll library for premium page scrolling experience
• VanillaTilt: Lightweight 3D tilt effect library for interactive elements
• Inter Font: Clean, modern typeface from Google Fonts optimized for screen readability
• Laravel Blade: Native Laravel templating with dynamic data binding

Easy Theme Switching

• One-Line Configuration: Simply set FRONT_THEME="modern" in your .env file to activate
• Instant Switch: Change FRONT_THEME to "front" to revert to the default theme — no cache clearing needed
• Non-Destructive: Both themes coexist — switch freely between modern and default without losing anything

Complete Feature List

• Dark mode professional UI design
• Glassmorphism card effects with backdrop blur
• Animated hero section with background grid and gradient orbs
• 3D tilt browser mockup with VanillaTilt
• Rotating SVG circle animations
• Glowing border and shimmer effects
• Scroll-triggered entrance animations
• Staggered animation delays
• Lenis smooth scrolling
• Infinite marquee testimonials (dual direction)
• Client logo marquee
• Star rating display
• Monthly/yearly pricing toggle
• Popular plan badge
• Feature checklists with icons
• FAQ accordion section
• AJAX-powered contact form
• AJAX registration with real-time validation
• Split-screen registration layout
• Subdomain input field support
• Animated SVG email verification page
• Floating particle effects
• Fixed sticky navigation bar
• Mobile hamburger menu with drawer
• Mobile language accordion
• Multi-column footer with social icons
• Footer watermark branding
• CTA section with stats and email input
• Multi-language support with switcher
• All content from admin panel (CMS)
• Dynamic pricing from subscription plans
• Social media integration
• Inter font family
• Tailwind CSS framework
• CSS custom properties (HSL)
• Fully responsive (mobile, tablet, desktop)
• Touch-friendly interactive elements
• One-line .env theme activation
• Non-destructive theme switching
• 7 fully redesigned pages
• 6 reusable section partials

Requirements

This Add-On Requires

• Stockifly SAAS – Billing & Inventory Management with POS and Online Shop (main app)

Installation

1. Download and extract the ZIP file from CodeCanyon
2. Copy the contents of Stockifly-SAAS-theme-modern-1.0.0 folder to your Stockifly SAAS root directory
3. Add FRONT_THEME="modern" to your .env file
4. Visit your site — the Modern Theme is now active!

Reminder: This add-on requires Stockifly SAAS – Billing & Inventory Management with POS and Online Shop to be installed. It is not a standalone product.