maverick-wave 3.0.0

package/src/partials/accordions-container.html

@@ -0,0 +1,163 @@
+<h3 class="mw-section-subtitle">Accordions</h3>
+
+<div class="mw-accordion">
+  <div class="mw-accordion-item">
+    <div class="mw-accordion-header active">
+      <h3>What is MaverickWave?</h3>
+      <i class="fas fa-chevron-down mw-accordion-icon"></i>
+    </div>
+    <div class="mw-accordion-content active">
+      <div class="mw-accordion-content-inner">
+        <p>
+          MaverickWave is a lightweight, responsive CSS framework designed for
+          modern web development. It provides a clean foundation with
+          customizable components and utility classes to help you build
+          beautiful, responsive websites quickly.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-accordion-item">
+    <div class="mw-accordion-header">
+      <h3>How do I customize MaverickWave?</h3>
+      <i class="fas fa-chevron-down mw-accordion-icon"></i>
+    </div>
+    <div class="mw-accordion-content">
+      <div class="mw-accordion-content-inner">
+        <p>
+          MaverickWave offers two main ways to customize its appearance to match
+          your project's needs:
+        </p>
+
+        <h5 class="mw-mt-4 mw-mb-2">
+          1. Using CSS Variables (Recommended for CDN/CSS Users)
+        </h5>
+        <p>
+          If you're using the pre-compiled CSS file (via CDN or download), you
+          can override MaverickWave's default styles by redefining its CSS
+          variables in your own stylesheet (loaded *after* MaverickWave's CSS).
+        </p>
+        <pre class="mw-code-block"><code>/* Your custom-styles.css */
+  :root {
+    /* Override base colors */
+    --mw-primary-color: #e94560; 
+    --mw-secondary-color: #f39c12;
+  
+    /* Override specific theme colors */
+    --mw-dark-page-background: #1a1a2e; 
+    --mw-light-card-background: #f0f0f5; 
+  
+    /* Override component variables */
+    --mw-alert-primary-bg: rgba(233, 69, 96, 0.15);
+  
+    /* Override font */
+    --mw-font-family-base: 'Your Custom Font', sans-serif; 
+  }</code></pre>
+        <p>This method is flexible and doesn't require a Sass build process.</p>
+
+        <h5 class="mw-mt-4 mw-mb-2">
+          2. Using SCSS Variables (Requires Sass Build Process)
+        </h5>
+        <p>
+          If you integrate MaverickWave's SCSS source files into your project,
+          you can override the framework's default Sass variables
+          <em>before</em> importing it. This gives you deeper control and allows
+          derived colors (calculated using Sass functions like
+          <code>rgba()</code> or <code>color.adjust()</code> within the
+          framework) to automatically use your custom base colors.
+        </p>
+        <pre class="mw-code-block"><code>// Your main.scss
+  
+  // Override Sass variables BEFORE importing
+  $primary-color: #e94560;
+  $font-family: 'Your Custom Font', sans-serif;
+  $mw-theme-mode: 'dark'; // Optionally set theme mode
+  
+  // Import MaverickWave
+  @import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <p>
+          This method requires you to have a Sass compiler set up in your
+          project.
+        </p>
+        <p class="mw-mt-4">
+          <button
+            type="button"
+            onclick="location.href = '#get-started'"
+            class="mw-btn mw-btn-link mw-p-0"
+          >
+            See the "Get Started" section
+          </button>
+          for more detailed integration examples for both methods.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-accordion-item">
+    <div class="mw-accordion-header">
+      <h3>Is MaverickWave responsive?</h3>
+      <i class="fas fa-chevron-down mw-accordion-icon"></i>
+    </div>
+    <div class="mw-accordion-content">
+      <div class="mw-accordion-content-inner">
+        <p>
+          Yes, MaverickWave CSS framework is fully responsive and works on all
+          devices. It uses a mobile-first approach with responsive breakpoints
+          for different screen sizes, ensuring your website looks great on
+          phones, tablets, laptops, and desktops.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-accordion-item">
+    <div class="mw-accordion-header">
+      <h3>Scrollable Content Example</h3>
+      <i class="fas fa-chevron-down mw-accordion-icon"></i>
+    </div>
+    <div class="mw-accordion-content">
+      <div class="mw-accordion-content-inner">
+        <p>
+          This accordion panel demonstrates scrollable content when the content
+          exceeds the available space. This is useful for displaying large
+          amounts of information in a compact format.
+        </p>
+        <p>
+          Accordions are excellent UI components for FAQs, product details, or
+          any content that benefits from progressive disclosure. They help
+          reduce cognitive load by showing only the most relevant information at
+          first.
+        </p>
+        <p>When designing with accordions, consider these best practices:</p>
+        <ul>
+          <li>
+            Use clear, descriptive headers that indicate the content inside
+          </li>
+          <li>Keep content concise and focused on a single topic per panel</li>
+          <li>
+            Consider whether users need to compare information across panels
+          </li>
+          <li>Ensure keyboard accessibility for navigation</li>
+          <li>Provide visual feedback for interactive elements</li>
+        </ul>
+        <p>
+          MaverickWave accordions are designed with accessibility in mind,
+          ensuring they work well with screen readers and keyboard navigation.
+          The smooth animations provide visual feedback without being
+          distracting.
+        </p>
+        <p>
+          You can customize the appearance of accordions using CSS variables to
+          match your brand colors and design language. The component is built
+          with flexibility in mind.
+        </p>
+        <p>
+          For more complex use cases, you can nest accordions or combine them
+          with other components like tabs or cards to create rich, interactive
+          interfaces that guide users through complex information hierarchies.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/alerts-container.html

@@ -0,0 +1,120 @@
+<h3 class="mw-section-subtitle">Alerts System</h3>
+
+<div class="mw-grid-2 mw-gap-4">
+  <!-- Primary: System Notifications -->
+  <div class="mw-alert mw-alert-primary">
+    <div class="mw-alert-icon">
+      <i class="fas fa-info-circle"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">System Update</span>
+      <p>Please note that maintenance is scheduled for tonight at 02:00 AM.</p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+
+  <!-- Secondary: Generic Info -->
+  <div class="mw-alert mw-alert-secondary">
+    <div class="mw-alert-icon">
+      <i class="fas fa-bell"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Notification</span>
+      <p>You have unread messages in your inbox.</p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+
+  <!-- Success: Actions -->
+  <div class="mw-alert mw-alert-success">
+    <div class="mw-alert-icon">
+      <i class="fas fa-check-circle"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Profile Updated</span>
+      <p>Your settings have been saved successfully.</p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+
+  <!-- Warning: Caution needed -->
+  <div class="mw-alert mw-alert-warning">
+    <div class="mw-alert-icon">
+      <i class="fas fa-exclamation-triangle"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Storage Low</span>
+      <p>
+        You are running out of storage space (95% used). Consider upgrading your
+        plan.
+      </p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+
+  <!-- Danger: Critical Errors -->
+  <div class="mw-alert mw-alert-danger">
+    <div class="mw-alert-icon">
+      <i class="fas fa-times-circle"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Connection Failed</span>
+      <p>
+        Could not connect to database. Please check your credentials and try
+        again.
+      </p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+
+  <!-- Info: Context / Tips -->
+  <div class="mw-alert mw-alert-info">
+    <div class="mw-alert-icon">
+      <i class="fas fa-lightbulb"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Did you know?</span>
+      <p>
+        You can use keyboard shortcuts to navigate faster. Press
+        <strong>?</strong> to see help.
+      </p>
+    </div>
+    <button
+      type="button"
+      class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
+      onclick="this.closest('.mw-alert').remove()"
+    >
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+</div>

package/src/partials/avatars-container.html

@@ -0,0 +1,84 @@
+<h3 class="mw-section-subtitle">Avatars</h3>
+
+<div class="mw-grid-2">
+  <div>
+    <h3 class="mw-mb-4">Avatar Sizes</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-grid-stack-center">
+        <div class="mw-avatar mw-avatar-xs">
+          <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-sm">
+          <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" />
+        </div>
+        <div class="mw-avatar">
+          <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-lg">
+          <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-xl">
+          <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Avatar Shapes & Colors & Group</h3>
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mb-2">Avatar Shapes</h4>
+      <div>
+        <div class="mw-avatar">
+          <img src="https://i.pravatar.cc/150?img=6" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-square">
+          <img src="https://i.pravatar.cc/150?img=7" alt="Avatar" />
+        </div>
+      </div>
+
+      <h4 class="mw-mb-2 mw-mt-4">Avatar Colors</h4>
+      <div>
+        <div class="mw-avatar mw-avatar-primary">
+          <img src="https://i.pravatar.cc/150?img=9" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-secondary">
+          <img src="https://i.pravatar.cc/150?img=10" alt="Avatar" />
+        </div>
+      </div>
+      <div>
+        <div class="mw-avatar mw-avatar-success">
+          <img src="https://i.pravatar.cc/150?img=11" alt="Avatar" />
+        </div>
+
+        <div class="mw-avatar mw-avatar-warning">
+          <img src="https://i.pravatar.cc/150?img=12" alt="Avatar" />
+        </div>
+
+        <div class="mw-avatar mw-avatar-danger">
+          <img src="https://i.pravatar.cc/150?img=13" alt="Avatar" />
+        </div>
+
+        <div class="mw-avatar">
+          <img src="https://i.pravatar.cc/150?img=14" alt="Avatar" />
+        </div>
+      </div>
+
+      <h4 class="mw-mb-2 mw-mt-4">Avatar Group</h4>
+      <div class="mw-avatar-group mw-mt-3 mw-mb-5">
+        <div class="mw-avatar mw-avatar-sm">
+          <img src="https://i.pravatar.cc/150?img=19" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-sm">
+          <img src="https://i.pravatar.cc/150?img=20" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-sm">
+          <img src="https://i.pravatar.cc/150?img=21" alt="Avatar" />
+        </div>
+        <div class="mw-avatar mw-avatar-sm">
+          <img src="https://i.pravatar.cc/150?img=22" alt="Avatar" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/blog-posts-container.html

@@ -0,0 +1,157 @@
+<h3 class="mw-section-subtitle">Blog Posts</h3>
+
+<div class="mw-blog-post mw-mt-9">
+  <h2 class="mw-blog-post-title">Just a dummy blog post</h2>
+
+  <div class="mw-blog-post-header">
+    <div class="mw-blog-post-header-icon">
+      <i class="fas fa-code"></i>
+    </div>
+    <div class="mw-blog-post-meta">
+      <div class="mw-blog-post-meta-item">
+        <i class="far fa-calendar"></i>
+        <span>April 10, 2025</span>
+      </div>
+      <div class="mw-blog-post-meta-item">
+        <i class="far fa-user"></i>
+        <span>By Sarah Johnson</span>
+      </div>
+      <div class="mw-blog-post-meta-item">
+        <i class="far fa-clock"></i>
+        <span>8 min read</span>
+      </div>
+    </div>
+  </div>
+
+  <img
+    src="https://images.unsplash.com/photo-1603969072881-b0fc7f3d77d7?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+    alt="UI/UX design"
+    class="mw-blog-post-featured-image"
+  />
+
+  <div class="mw-blog-post-content-markdown">
+    <p>
+      The landscape of web development continues to evolve at a rapid pace. In
+      this article, we explore the latest frameworks, tools, and methodologies
+      that are shaping the industry in 2025.
+    </p>
+
+    <h3>The Rise of AI-Assisted Development</h3>
+    <p>
+      Artificial intelligence has transformed how we approach coding. Modern
+      IDEs now come equipped with sophisticated AI assistants that can generate
+      entire components, optimize performance, and even identify potential bugs
+      before they manifest.
+    </p>
+    <p>
+      <button type="button" class="mw-btn mw-btn-primary">
+        Just s simple button
+      </button>
+    </p>
+
+    <p>
+      The most significant advancement has been in the realm of natural language
+      programming, where developers can describe functionality in plain English
+      and have the AI generate the corresponding code.
+    </p>
+
+    <blockquote>
+      "AI hasn't replaced developers; it has elevated them. We now spend more
+      time on architecture and problem-solving rather than writing boilerplate
+      code." — Elena Vega, Lead Developer at TechFront
+    </blockquote>
+
+    <h3>Serverless Architecture: Beyond the Basics</h3>
+    <p>
+      Serverless computing has matured significantly, moving beyond simple
+      function execution to comprehensive application architectures. The new
+      generation of serverless platforms offers:
+    </p>
+
+    <ul class="mw-list-dot">
+      <li>Stateful serverless functions with built-in memory persistence</li>
+      <li>Edge-optimized execution for global performance</li>
+      <li>Integrated database connections with automatic scaling</li>
+      <li>Real-time monitoring and debugging capabilities</li>
+    </ul>
+
+    <h4>Code Example: Modern Serverless Function</h4>
+    <pre><code>// Modern serverless function with state management
+export async function handler(event, context) {
+  // Access persistent state across invocations
+  const state = await context.getState();
+
+  // Process the incoming request
+  const result = processRequest(event, state);
+
+  // Update the state for future invocations
+  await context.setState({
+    lastProcessed: new Date(),
+    counter: (state.counter || 0) + 1,
+    recentRequests: [...(state.recentRequests || []), event.id].slice(-10)
+  });
+
+  return {
+    statusCode: 200,
+    body: JSON.stringify(result)
+  };
+}</code></pre>
+
+    <h3>Web Components and Micro-Frontends</h3>
+    <p>
+      The component-based architecture has evolved into a more standardized
+      approach with Web Components becoming the foundation of modern frontend
+      development. This has enabled true interoperability between different
+      frameworks and libraries.
+    </p>
+
+    <p>
+      Micro-frontends have also gained widespread adoption, allowing teams to
+      develop, test, and deploy parts of a frontend independently, using
+      different technologies if necessary.
+    </p>
+
+    <ul>
+      <li>
+        DOP is not anti-OOP - it's a refinement for clearer thinking and
+        modeling.
+      </li>
+      <li>
+        With <code>record</code>, <code>sealed interface</code>, and Pattern
+        Matching, Java is finally ready for this style.
+      </li>
+      <li>
+        You’ll get:
+        <ul>
+          <li>Transparent and predictable models</li>
+          <li>Easier testing and logging</li>
+          <li>Less coupling and fewer side effects</li>
+        </ul>
+      </li>
+      <li>
+        This approach can make your domain models sharper and your codebase
+        easier to reason about.
+      </li>
+    </ul>
+
+    <h3>Conclusion</h3>
+    <p>
+      As we move further into 2025, the web development landscape continues to
+      prioritize developer experience, performance, and scalability. By
+      embracing these modern techniques, developers can create more robust,
+      efficient, and maintainable applications.
+    </p>
+  </div>
+
+  <div class="mw-blog-post-footer">
+    <button type="button" class="mw-btn mw-blog-post-footer-button">
+      <i class="fas fa-arrow-left"></i>
+      <span>Previous Post</span>
+    </button>
+    <button type="button" class="mw-btn mw-btn-primary">Back to Blog</button>
+    <button type="button" class="mw-btn mw-blog-post-footer-button next">
+      <i class="fas fa-arrow-right"></i>
+      <span>Next Post</span>
+    </button>
+  </div>
+</div>

package/src/partials/breadcrumbs-container.html

@@ -0,0 +1,126 @@
+<h3 class="mw-section-subtitle">Breadcrumbs</h3>
+<p class="mw-text-muted">
+  Modern skewed navigation breadcrumbs with overlapping design.
+</p>
+
+<div class="mw-grid-stack-stretch">
+  <div>
+    <h4 class="mw-mb-2">Basic Breadcrumbs</h4>
+    <nav class="mw-breadcrumbs" aria-label="Breadcrumb">
+      <ol class="mw-breadcrumbs-list">
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Products</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Electronics</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
+          <a href="#" class="mw-breadcrumbs-active">
+            <span>Phones</span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">With Home Icon</h4>
+    <nav class="mw-breadcrumbs" aria-label="Breadcrumb">
+      <ol class="mw-breadcrumbs-list">
+        <li class="mw-breadcrumbs-item">
+          <a href="#" aria-label="Home">
+            <i class="fas fa-home"></i>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Products</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Electronics</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
+          <a href="#" class="mw-breadcrumbs-active">
+            <span>Phones</span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Small Size Variant</h4>
+    <nav class="mw-breadcrumbs mw-breadcrumbs-sm" aria-label="Breadcrumb">
+      <ol class="mw-breadcrumbs-list">
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Admin</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Users</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
+          <a href="#" class="mw-breadcrumbs-active">
+            <span>Profile</span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+
+  <div>
+    <h4 class="mw-mb-2">Long Path (Responsive Collapse)</h4>
+    <p class="mw-text-muted mw-text-sm mw-mt-1">
+      Middle items collapse on smaller screens.
+    </p>
+    <nav class="mw-breadcrumbs mw-breadcrumbs-collapse" aria-label="Breadcrumb">
+      <ol class="mw-breadcrumbs-list">
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>E-commerce</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Electronics</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Computers</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Laptops</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item">
+          <a href="#">
+            <span>Gaming</span>
+          </a>
+        </li>
+        <li class="mw-breadcrumbs-item mw-breadcrumbs-current">
+          <a href="#" class="mw-breadcrumbs-active">
+            <span>RTX 4080</span>
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>