### Installation and Development Commands

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Commands for cloning the repository, installing dependencies, and managing Tailwind CSS build processes.

```bash
# Clone the repository
git clone https://github.com/PaulleDemon/landing-pages.git
cd landing-pages

# Install dependencies (use .package.json for minimal install)
npm install

# Or install from .package.json for minimal dev dependencies
npm install --package-lock-only .package.json

# Start Tailwind in development mode (watches for changes)
npm run start:tailwind

# Build Tailwind for production (minified)
npm run build:tailwind
```

--------------------------------

### Start Tailwind CSS Development Server

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawgroup/readme.md

Run this npm command in your terminal to start the Tailwind CSS development server. This command is used during the development phase.

```bash
npm run start:tailwind
```

--------------------------------

### Tailwind CSS Configuration

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/readme.md

Configure Tailwind CSS by defining prefixes, content sources, and theme extensions. Ensure Node.js is installed for modifications.

```javascript
module.exports = {
	prefix: 'tw-',
	important: false,
	content: [
		"./**/*.{html, jsx, js}",
	],
	theme: {
		extend: {},
	},
	plugins: [],
}
```

--------------------------------

### PostCSS Configuration for Tailwind

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/readme.md

Set up PostCSS with plugins like postcss-import, postcss-simple-vars, and postcss-nested for enhanced CSS processing with Tailwind.

```javascript
module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-simple-vars": {},
    "postcss-nested": {}
  },
}
```

--------------------------------

### Build Tailwind CSS for Production

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawgroup/readme.md

Execute this npm command to generate a production-ready build file for Tailwind CSS. This command is used when preparing the project for deployment.

```bash
npm run build:tailwind
```

--------------------------------

### Initialize Review Swiper

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/saas/finance/index.html

JavaScript configuration for the Swiper instance used in the review section.

```javascript
const reviewSwiper = new Swiper('.review-container', { //effect: "coverflow", // grabCursor: true, loop: true, centeredSlides: true, slidesPerView: 'auto', autoplay: { delay: 7000, }, pagination: { el: '.dots-container', clickable: true, renderBullet: function (index, className) { return `<span class="!tw-h-[3px] !tw-w-[40px] !tw-rounded-none ${className}"></span>` }, }, })
```

--------------------------------

### Initialize Swiper Slider

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawfire/index.html

JavaScript configuration to initialize a Swiper instance with pagination and navigation settings.

```javascript
const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: true, centeredSlides: true, // If we need pagination pagination: { el: '.pagination-container', clickable: true, renderBullet: function (index, className) { return `<span class="${className}"></span>` }, }, // Navigation arrows navigation: { nextEl: '.testmonial-next', prevEl: '.testmonial-prev', }, })
```

--------------------------------

### Configure Swiper Slider and Pagination

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/apps/AISales/index.html

Styles the pagination bullets and initializes the Swiper instance with navigation and custom pagination rendering.

```css
.swiper-pagination-bullet { width: 10px; height: 10px; text-align: center; /* font-size: 12px; */ opacity: 1; background: #f7f7f7fa; left: auto; } .swiper-pagination-bullet:hover { color: #000; opacity: 1; background: #ede0e0bd; } .swiper-pagination-bullet-active { background: #f39696 !important; } .swiper { padding: 10px !important; }
```

```javascript
const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: true, centeredSlides: true, // If we need pagination pagination: { el: '.pagination-container', clickable: true, renderBullet: function (index, className) { return `<span class="${className}"></span>` }, }, // Navigation arrows navigation: { nextEl: '.testmonial-next', prevEl: '.testmonial-prev', }, })
```

--------------------------------

### PostCSS Configuration

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Configuration for PostCSS plugins including import, variable, and nesting support.

```javascript
// postcss.config.js
module.exports = {
    plugins: {
        "postcss-import": {},
        "postcss-simple-vars": {},
        "postcss-nested": {}
    },
}
```

--------------------------------

### Initialize Swiper Carousel

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Configures the Swiper instance with autoplay and custom pagination bullet rendering.

```javascript
// Initialize Swiper
const reviewSwiper = new Swiper('.review-container', {
    loop: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    autoplay: {
        delay: 7000,
    },
    pagination: {
        el: '.dots-container',
        clickable: true,
        renderBullet: function (index, className) {
            return `<span class="!tw-h-[3px] !tw-w-[40px] !tw-rounded-none ${className}"></span>`
        },
    },
})
```

--------------------------------

### Retrieve user data using Python

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/portfolio/notion/content/about.md

Uses the universe module to fetch and display data for a specific user.

```py
from universe import earth

show(earth.get("paul"))
```

--------------------------------

### Include Tailwind CSS Build for Production

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawgroup/readme.md

Use this link tag in your head section for production builds to include the optimized Tailwind CSS file. Ensure 'tailwind-build.css' points to the correct path.

```html
<link rel="stylesheet" href="tailwind-build.css"><!--replace with path to your tailwind build-->
```

--------------------------------

### CSS Variables and Global Styles

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Base styles and CSS custom properties used for theming and responsive layout components.

```css
/* css/index.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --btn-color: #fdfdfd;       /* Button text color */
    --btn-bg: #101010;          /* Button background */
    --primary-text-color: #1d1b1b;
}

html {
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
}

.btn {
    padding: 10px 15px;
    width: max-content;
    border-radius: 10px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.input {
    padding: 10px;
    background-color: transparent;
    border-radius: 10px;
    min-width: 100px;
    border: 2px solid #818080;
    transition: border 0.3s;
}

.input:active, .input:focus, .input:focus-within {
    border: 2px solid #0c0c0c;
}

/* Collapsible mobile header */
@media not all and (min-width: 1024px) {
    header .collapsible-header {
        position: fixed;
        right: 0px;
        flex-direction: column;
        opacity: 0;
        height: 100vh;
        width: 0vw;
        background-color: #ffffff;
        overflow-y: auto;
        transition: width 0.3s ease;
    }
}
```

--------------------------------

### Run Tailwind CSS Commands

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/ngo/project-africa/readme.md

Use these npm scripts to manage Tailwind CSS during development or for production builds.

```bash
npm run start:tailwind
```

```bash
npm run build:tailwind
```

--------------------------------

### Implement Dark Mode Toggle

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Uses localStorage to persist theme preference and toggles the 'tw-dark' class on the document root.

```javascript
// Dark mode toggle with localStorage
if (localStorage.getItem('color-mode') === 'dark' ||
    (!('color-mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('tw-dark')
    updateToggleModeBtn()
} else {
    document.documentElement.classList.remove('tw-dark')
    updateToggleModeBtn()
}

function toggleMode() {
    document.documentElement.classList.toggle("tw-dark")
    updateToggleModeBtn()
}

function updateToggleModeBtn() {
    const toggleIcon = document.querySelector("#toggle-mode-icon")

    if (document.documentElement.classList.contains("tw-dark")) {
        toggleIcon.classList.remove("bi-sun-fill")
        toggleIcon.classList.add("bi-moon-fill")
        localStorage.setItem("color-mode", "dark")
    } else {
        toggleIcon.classList.add("bi-sun-fill")
        toggleIcon.classList.remove("bi-moon-fill")
        localStorage.setItem("color-mode", "light")
    }
}
```

```html
<!-- Dark mode toggle button -->
<button class="tw-w-[30px]" onclick="toggleMode()">
    <i class="bi bi-sun-fill" id="toggle-mode-icon"></i>
</button>
```

--------------------------------

### Include Tailwind CSS for Production

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/saas/pixaai/readme.md

Use this link in your head tag for production builds to include the optimized Tailwind CSS.

```html
<link rel="stylesheet" href="./css/tailwind-build.css">
```

--------------------------------

### Tailwind CSS Configuration

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Configuration file for customizing theme colors and setting the 'tw-' prefix to prevent CSS conflicts.

```javascript
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    prefix: 'tw-',
    important: false,
    content: [
        "**/*.{html,jsx,js}",
        "**/*.js",
        "**/*.html",
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                primary: '#7e22ce',    // Customize primary color
                secondary: '#ed7a36',  // Customize secondary color
            }
        },
    },
    plugins: [],
}
```

--------------------------------

### Implement Responsive Header Toggle

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Handles mobile menu toggling and click-outside-to-close functionality. Requires elements with IDs 'collapse-btn' and 'collapsed-header-items'.

```javascript
// index.js - Responsive header toggle
const RESPONSIVE_WIDTH = 1024

let isHeaderCollapsed = window.innerWidth < RESPONSIVE_WIDTH
const collapseBtn = document.getElementById("collapse-btn")
const collapseHeaderItems = document.getElementById("collapsed-header-items")

function onHeaderClickOutside(e) {
    if (!collapseHeaderItems.contains(e.target)) {
        toggleHeader()
    }
}

function toggleHeader() {
    if (isHeaderCollapsed) {
        collapseHeaderItems.classList.add("opacity-100")
        collapseHeaderItems.style.width = "60vw"
        collapseBtn.classList.remove("bi-list")
        collapseBtn.classList.add("bi-x", "max-lg:tw-fixed")
        isHeaderCollapsed = false
        setTimeout(() => window.addEventListener("click", onHeaderClickOutside), 1)
    } else {
        collapseHeaderItems.classList.remove("opacity-100")
        collapseHeaderItems.style.width = "0vw"
        collapseBtn.classList.remove("bi-x", "max-lg:tw-fixed")
        collapseBtn.classList.add("bi-list")
        isHeaderCollapsed = true
        window.removeEventListener("click", onHeaderClickOutside)
    }
}

function responsive() {
    if (window.innerWidth > RESPONSIVE_WIDTH) {
        collapseHeaderItems.style.width = ""
    } else {
        isHeaderCollapsed = true
    }
}

window.addEventListener("resize", responsive)
```

--------------------------------

### Template Directory Structure

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

The project organizes templates by category under the src directory.

```text
src/
├── apps/           # Mobile app landing pages
├── saas/           # SaaS product pages
├── portfolio/      # Personal portfolio sites
├── restaurant/     # Restaurant websites
├── law/            # Attorney/law firm pages
├── ngo/            # Non-profit organization pages
├── realestate/     # Real estate landing pages
├── others/         # Miscellaneous templates
└── products/       # Product showcase pages
```

--------------------------------

### Implement FAQ Accordion Functionality

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Toggles visibility of FAQ content by modifying max-height and padding styles.

```javascript
// FAQ accordion functionality
const faqAccordion = document.querySelectorAll('.faq-accordion')

faqAccordion.forEach(function (btn) {
    btn.addEventListener('click', function () {
        this.classList.toggle('active')

        let content = this.nextElementSibling

        if (content.style.maxHeight === '200px') {
            content.style.maxHeight = '0px'
            content.style.padding = '0px 18px'
        } else {
            content.style.maxHeight = '200px'
            content.style.padding = '20px 18px'
        }
    })
})
```

--------------------------------

### Include Tailwind CSS Runtime for Development

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawgroup/readme.md

Add this link tag to your head section during development to include the Tailwind CSS runtime. Replace 'tailwind-runtime.css' with the actual path to your file.

```html
<link rel="stylesheet" href="tailwind-runtime.css"><!--replace with path to your tailwind runtime-->
```

--------------------------------

### Configure Landing Page Data

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/portfolio/notion/readme.md

Modify the data.json file to customize your landing page content, including name, icon, and page links.

```json
{
    "name": "Paul's portfolio",
    "icon": "./assets/images/home/paul.png",

    "pages": [
        {
            "icon": "./assets/images/home/paul.png", // icon can be image, a bootstrap icon class or an emoji
            "name": "About",
            "link": "/about",
            "content": "content/about.md" // this has to be a path to your md or your html content
        },
        {
            "icon": "📖",
            "name": "Blogs",
            "link": "/blogs",
            "content": "content/about.md"
        },
        {
            "icon": "bi bi-suitcase-lg-fill",
            "name": "Work Experience",
            "link": "/experience",
            "content": "content/projects.html"
        },
    ]

}
```

--------------------------------

### Base Tailwind CSS File

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/readme.md

Initialize Tailwind CSS by including base, components, and utilities directives. Custom styles can be added within the @layer components block.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
}
```

--------------------------------

### Implement Swiper Carousel for Testimonials

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Requires Swiper.js CSS and JS files. The container uses specific classes for layout and pagination.

```html
<!-- Include Swiper CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

<!-- Swiper container -->
<div class="swiper review-container tw-mt-8 tw-max-w-[550px]">
    <div class="swiper-wrapper">
        <div class="swiper-slide review-card">
            <div class="tw-h-[50px] tw-w-[50px] tw-overflow-hidden tw-rounded-full">
                <img src="./assets/images/people/women.jpg" class="tw-h-full tw-w-full tw-object-cover" alt="reviewer" />
            </div>
            <p class="tw-mt-4 tw-italic tw-text-gray-600">
                "Amazing product! Highly recommended."
            </p>
            <p class="tw-mt-3">- Jane Doe</p>
        </div>
        <!-- More slides... -->
    </div>
    <div class="dots-container tw-mt-auto"></div>
</div>
```

--------------------------------

### Configure GSAP Scroll Animations

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Uses GSAP and ScrollTrigger to animate elements on scroll. Requires the GSAP library and ScrollTrigger plugin to be loaded.

```javascript
// GSAP scroll animations
gsap.registerPlugin(ScrollTrigger)

// Initial state - elements hidden below
gsap.to(".reveal-up", {
    opacity: 0,
    y: "100%",
})

// Animate dashboard on scroll
gsap.to("#dashboard", {
    scale: 1,
    translateY: 0,
    rotateX: "0deg",
    scrollTrigger: {
        trigger: "#hero-section",
        start: "top 80%",
        end: "bottom bottom",
        scrub: 1,
    }
})

// Reveal elements per section
const sections = gsap.utils.toArray("section")

sections.forEach((sec) => {
    const revealTimeline = gsap.timeline({
        paused: true,
        scrollTrigger: {
            trigger: sec,
            start: "10% 80%",
            end: "20% 90%",
        }
    })

    revealTimeline.to(sec.querySelectorAll(".reveal-up"), {
        opacity: 1,
        duration: 0.8,
        y: "0%",
        stagger: 0.2,
    })
})
```

--------------------------------

### Define Responsive Header HTML Structure

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

HTML structure for the responsive header component using Tailwind CSS classes.

```html
<!-- Header HTML structure -->
<header class="tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[60px] tw-w-full tw-px-[10%]">
    <a class="tw-h-[50px] tw-w-[50px] tw-p-[4px]" href="">
        <img src="./assets/logo/logo.png" alt="logo" class="tw-h-full tw-w-full" />
    </a>
    <div class="collapsible-header animated-collapse" id="collapsed-header-items">
        <div class="tw-flex tw-h-full tw-gap-5 lg:tw-mx-auto lg:tw-place-items-center">
            <a class="header-links" href="">About us</a>
            <a class="header-links" href="">Pricing</a>
            <a class="header-links" href="">Contact</a>
        </div>
        <div class="tw-flex tw-gap-[20px]">
            <a href="" class="btn">Get Started</a>
        </div>
    </div>
    <button
        class="bi bi-list tw-absolute tw-right-3 tw-top-3 tw-text-3xl lg:tw-hidden"
        onclick="toggleHeader()"
        aria-label="menu"
        id="collapse-btn"
    ></button>
</header>
```

--------------------------------

### Include Tailwind CSS for Development

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/saas/pixaai/readme.md

Add this link to your head tag during development to include the Tailwind CSS runtime.

```html
<link rel="stylesheet" href="./css/tailwind-runtime.css">
```

--------------------------------

### Utility Functions for Validation

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Helper functions for validating URLs, detecting file paths, and identifying emojis. These functions rely on regex patterns and the URL constructor.

```javascript
// URL validation
function isValidHttpUrl(link) {
    let url
    try {
        url = new URL(link)
    } catch (_) {
        return false
    }
    return url.protocol === "http:" || url.protocol === "https:"
}

// File path detection
function isFilePath(str) {
    const unixPattern = /^(\/|~\/|\.\/)/
    const windowsPattern = /^[a-zA-Z]:\\/
    const fileExtensionPattern = /\.[a-zA-Z0-9]+$/

    return unixPattern.test(str) || windowsPattern.test(str) || fileExtensionPattern.test(str)
}

// Check if string is file or URL
function isFileOrLink(path) {
    return isFilePath(path) || isValidHttpUrl(path)
}

// Emoji detection
function isEmoji(str) {
    const emojiPattern = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2702}-\u{27B0}\u{24C2}-\u{1F251}]/u
    return emojiPattern.test(str)
}
```

--------------------------------

### Include Tailwind CSS Stylesheets

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/ngo/project-africa/readme.md

Add the appropriate stylesheet link to the HTML head tag based on the environment.

```html
<link rel="stylesheet" href="tailwind-runtime.css"><!--replace with path to your tailwind runtime-->
```

```html
<link rel="stylesheet" href="tailwind-build.css"><!--replace with path to your tailwind build-->
```

--------------------------------

### Implement Tab Navigation

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

Manages visibility of tab content sections based on data attributes and active button states.

```javascript
// Tab navigation
const tabs = document.querySelectorAll(".tab-content")
const tabButtons = document.querySelectorAll(".tab-btn")

function openTab(evt, tabName) {
    tabs.forEach((tab) => {
        tab.style.display = 'none'
    })

    tabButtons.forEach((btn) => btn.classList.remove("tab-active"))

    document.querySelector(`[data-tab-name=${tabName}]`).style.display = 'block'
    evt.target.classList.add("tab-active")
}
```

```html
<!-- Tab buttons -->
<div class="tw-flex tw-gap-4 tw-rounded-md tw-border-2 tw-border-primary tw-p-1">
    <button class="tab-btn tab-active" onclick="openTab(event, 'about')">About</button>
    <button class="tab-btn" onclick="openTab(event, 'skills')">Skills</button>
    <button class="tab-btn" onclick="openTab(event, 'experience')">Experience</button>
</div>

<!-- Tab content sections -->
<section class="tab-content" data-tab-name="about">
    <!-- About content -->
</section>
<section class="tab-content tw-hidden" data-tab-name="skills">
    <!-- Skills content -->
</section>
```

--------------------------------

### Define tab content section

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/portfolio/jrdev/readme.md

Create a section with the tab-content class and a data-tab-name attribute to display content for a specific tab.

```html
<section class="tab-content tw-w-full tw-h-full
                    max-lg:tw-p-4 tw-flex tw-flex-col 
                    tw-overflow-hidden tw-relative"
                data-tab-name="skills"
                >
    ...
</section>
```

--------------------------------

### HTML Template Structure

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

A boilerplate HTML structure including SEO meta tags, Open Graph support, and pre-configured links for Tailwind CSS and Bootstrap Icons.

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Page Title</title>
    <meta name="description" content="Page description for SEO" />
    <link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon" />

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Title of the project" />
    <meta property="og:description" content="Description" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://yoursite.com" />
    <meta property="og:image" content="./assets/og-image.png" />

    <!-- Tailwind CSS (use runtime for dev, build for production) -->
    <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css" />
    <!-- <link rel="stylesheet" href="./css/tailwind-build.css"> -->
    <link rel="stylesheet" href="./css/index.css" />

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" />
</head>
<body class="tw-flex tw-min-h-[100vh] tw-flex-col tw-bg-white">
    <header><!-- Responsive header --></header>

    <section class="hero-section"><!-- Hero section --></section>
    <section><!-- Features section --></section>
    <section><!-- Testimonials section --></section>
    <section><!-- CTA section --></section>

    <footer><!-- Footer with links --></footer>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>
```

--------------------------------

### Define FAQ Accordion HTML Structure

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

HTML structure for the FAQ accordion component.

```html
<!-- FAQ HTML structure -->
<div class="faq tw-w-full tw-rounded-md tw-border-[1px] tw-border-[#1F2123] tw-bg-[#080808]">
    <div class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl">
        <span>What license are the source code?</span>
        <i class="bi bi-plus tw-ml-auto tw-font-semibold"></i>
    </div>
    <div class="content">
        All the templates are under MIT license
    </div>
</div>
```

--------------------------------

### Customize Swiper Pagination and Container

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/law/lawfire/index.html

CSS rules to define the appearance of pagination bullets and container padding for the Swiper component.

```css
.swiper-pagination-bullet { width: 10px; height: 10px; text-align: center; /* font-size: 12px; */ opacity: 1; background: #dad8d8fa; left: auto; } .swiper-pagination-bullet:hover { color: #000; opacity: 1; background: #ede0e0bd; } .swiper-pagination-bullet-active { background: #cf9455 !important; } .swiper { padding: 10px !important; }
```

--------------------------------

### Style Swiper Pagination Bullets

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/saas/finance/index.html

CSS rules for customizing the appearance and hover states of Swiper pagination bullets.

```css
.swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color: #000; opacity: 1; background: rgba(0, 0, 0, 0.2); } .swiper-pagination-bullet:hover { color: #000; opacity: 1; background: #1f1c1cbd; } .swiper-pagination-bullet-active { //color: #fff; background: #000 !important; } .swiper { padding: 10px !important; }
```

--------------------------------

### Add a new tab button

Source: https://github.com/paulledemon/awesome-landing-pages/blob/main/src/portfolio/jrdev/readme.md

Add a button element to the tabs section with the tab-btn class and an onclick handler.

```html
 <!-- tabs section -->
<div class="tw-absolute tw-left-[50%] tw-translate-x-[-50%]  
            tw-flex tw-p-1 tw-px-4 tw-rounded-md tw-gap-4 
            tw-border-2 tw-border-primary">
    ...
    <button class="tab-btn" onclick="openTab(event, 'newtab')">New tab</button>
    ...
</div>
```

--------------------------------

### Custom Dropdown Component

Source: https://context7.com/paulledemon/awesome-landing-pages/llms.txt

A class-based dropdown component that handles selection events and DOM toggling. Requires specific CSS classes like .dropdown-toggle and .dropdown-menu to function correctly.

```javascript
// Dropdown class
class Dropdown {
    constructor(selector, onChange) {
        this.dropdown = document.querySelector(selector)
        this.toggleButton = this.dropdown.querySelector('.dropdown-toggle')
        this.onChange = onChange
        this.defaultText = this.toggleButton.querySelector("span").innerText
        this.menu = this.dropdown.querySelector('.dropdown-menu')

        this.toggleButton.addEventListener('click', this.toggleDropdown.bind(this))
        document.addEventListener('click', this.closeDropdown.bind(this))

        this.lists = this.dropdown.querySelectorAll('li')
        this.lists.forEach(e => {
            e.addEventListener("click", () => this.selectItem(e))
        })

        this.value = ""
        this.dropDownInput = this.dropdown.querySelector(".dropdown-input")
    }

    toggleDropdown() {
        this.menu.style.display = (this.menu.style.display === 'block') ? 'none' : 'block'
    }

    selectItem(ele) {
        const selectedInput = this.toggleButton.querySelector(".dropdown-select-text")
        this.value = ele.querySelector(".dropdown-text").innerText.trim()
        selectedInput.innerText = this.value

        if (this.dropDownInput) this.dropDownInput.value = this.value
        if (this.onChange) this.onChange(this.value)

        this.closeDropdown()
    }

    closeDropdown(event) {
        if (event === undefined || !this.dropdown.contains(event.target)) {
            this.menu.style.display = 'none'
        }
    }
}

// Usage
const modelDropdown = new Dropdown("#model-dropdown", (value) => {
    console.log("Selected:", value)
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.