@hashtagcms/themes 1.0.0

package/src/themes/basic/sass/font-awesome/scss/font-awesome.scss

@@ -0,0 +1,18 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

package/src/themes/elegant/js/app.js

@@ -0,0 +1,126 @@
+import axios from "axios";
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+let token = document.head.querySelector('meta[name="csrf-token"]');
+if (token) {
+    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token.content;
+    axios.defaults.withCredentials = true;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+window.axios = axios;
+
+
+import Analytics from "../../../core/js/utils/analytics";
+import Subscribe from "../../../core/js/components/subscribe";
+import { AppConfig } from "../../../core/js/helpers/common";
+
+
+window.HashtagCms = { configData: {} };
+window.HashtagCms.Subscribe = new Subscribe();
+window.HashtagCms.Analytics = new Analytics();
+window.HashtagCms.AppConfig = new AppConfig();
+
+/**
+ * Elegant Theme - Modern Tech Aesthetic
+ * 
+ * Features:
+ * - Smooth scroll animations
+ * - Parallax effects
+ * - Modern card interactions
+ * - Dynamic Navbar
+ */
+
+class ElegantTheme {
+    constructor() {
+        this.initSubscribe();
+        this.initSmoothScroll();
+        this.initParallax();
+        this.initCardAnimations();
+        this.initNavbar();
+        console.log('Elegant Theme loaded');
+    }
+
+    initSubscribe() {
+        const subscribeElement = document.getElementById('subscribe-form');
+        if (subscribeElement) {
+            new Subscribe(subscribeElement);
+        }
+    }
+
+    initNavbar() {
+        const navbar = document.querySelector('.navbar');
+        if (navbar) {
+            window.addEventListener('scroll', () => {
+                if (window.scrollY > 50) {
+                    navbar.classList.add('scrolled');
+                } else {
+                    navbar.classList.remove('scrolled');
+                }
+            });
+            // Initial check
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            }
+        }
+    }
+
+    initSmoothScroll() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                const href = this.getAttribute('href');
+                if (href && href !== '#' && href !== '#!') {
+                    e.preventDefault();
+                    const target = document.querySelector(href);
+                    if (target) {
+                        target.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start'
+                        });
+                    }
+                }
+            });
+        });
+    }
+
+    initParallax() {
+        const parallaxElements = document.querySelectorAll('.parallax');
+
+        if (parallaxElements.length > 0) {
+            window.addEventListener('scroll', () => {
+                const scrolled = window.pageYOffset;
+
+                parallaxElements.forEach(element => {
+                    const speed = element.dataset.speed || 0.5;
+                    element.style.transform = `translateY(${scrolled * speed}px)`;
+                });
+            });
+        }
+    }
+
+    initCardAnimations() {
+        const cards = document.querySelectorAll('.feature-card, .tech-card, .card'); // Added generic .card
+
+        if (cards.length > 0) {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animate-in');
+                        observer.unobserve(entry.target); // Only animate once
+                    }
+                });
+            }, {
+                threshold: 0.1
+            });
+
+            cards.forEach(card => observer.observe(card));
+        }
+    }
+}
+
+// Initialize theme when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => new ElegantTheme());
+} else {
+    new ElegantTheme();
+}

package/src/themes/elegant/sass/_elegant.scss

@@ -0,0 +1,508 @@
+/**
+ * Elegant Theme - Modern Tech Aesthetic
+ * Sophisticated design for technology-focused websites
+ */
+
+// Import Google Fonts (if not imported in app.scss, but here for reference)
+// @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+// Base Styles
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: $font-primary;
+    background: linear-gradient(135deg, $primary-dark 0%, $primary-blue 100%);
+    background-attachment: fixed;
+    color: $text-primary;
+    line-height: 1.7;
+    overflow-x: hidden;
+}
+
+// Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: $text-primary;
+}
+
+h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, $accent-cyan, $accent-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 1.5rem;
+}
+
+h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+}
+
+// Navigation Overrides (for basic theme compatibility)
+.navbar {
+    background: rgba($surface-dark, 0.8) !important; // Override bg-light
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba($accent-cyan, 0.1);
+    padding: 1rem 0;
+    transition: $transition-smooth;
+
+    &.bg-light {
+        background: rgba($surface-dark, 0.8) !important;
+    }
+
+    &.scrolled {
+        background: rgba($surface-dark, 0.95) !important;
+        box-shadow: $shadow-elegant;
+        padding: 0.75rem 0;
+    }
+
+    .navbar-brand {
+        color: $accent-cyan !important;
+        font-weight: 700;
+        font-size: 1.5rem;
+        letter-spacing: -0.02em;
+        text-transform: uppercase;
+
+        &:hover {
+            color: $white !important;
+            text-shadow: $glow-cyan;
+        }
+    }
+
+    .nav-link {
+        color: $text-secondary !important;
+        font-weight: 500;
+        transition: $transition-smooth;
+        position: relative;
+        padding: 0.5rem 1rem !important;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 5px;
+            left: 50%;
+            width: 0;
+            height: 2px;
+            background: $accent-cyan;
+            transition: $transition-smooth;
+            transform: translateX(-50%);
+        }
+
+        &:hover,
+        &.active {
+            color: $accent-cyan !important;
+
+            &::after {
+                width: 80%;
+            }
+        }
+
+        i {
+            margin-right: 5px;
+        }
+    }
+
+    .navbar-toggler {
+        border-color: rgba($accent-cyan, 0.3);
+
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 212, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        }
+    }
+}
+
+// Hero Section (Basic Theme Compatibility)
+.hero {
+    min-height: 80vh; // Adjusted for better initial view
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background:
+            radial-gradient(circle at 20% 50%, rgba($accent-cyan, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 80%, rgba($accent-purple, 0.15) 0%, transparent 50%);
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .hero-inner {
+        position: relative;
+        z-index: 2;
+        width: 100%;
+        padding: 4rem 0;
+
+        /* Fallback backgrounds if basic theme uses them */
+        &.hero-bg-1 {
+            background: linear-gradient(45deg, rgba($primary-dark, 0.9), rgba($primary-blue, 0.8));
+        }
+
+        &.hero-bg-2 {
+            background: linear-gradient(to right, rgba($surface-dark, 0.95), rgba($surface-dark, 0.7));
+        }
+    }
+
+    .hero-text {
+        animation: fadeInUp 0.8s ease-out;
+
+        h1,
+        h2 {
+            font-size: 3.5rem;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
+
+            @media (max-width: 768px) {
+                font-size: 2.5rem;
+            }
+        }
+
+        p {
+            font-size: 1.25rem;
+            color: $text-secondary;
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+
+        .btn {
+            margin-right: 1rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    // Default hero styles if classes are missing
+    .hero-title {
+        font-size: 4rem;
+        margin-bottom: 1.5rem;
+        animation: fadeInUp 0.8s ease-out;
+    }
+
+    .hero-subtitle {
+        font-size: 1.5rem;
+        color: $text-secondary;
+        margin-bottom: 2rem;
+        animation: fadeInUp 0.8s ease-out 0.2s both;
+    }
+}
+
+// Feature/Content Cards
+.features-section,
+.section {
+    padding: $section-padding 0;
+    position: relative;
+}
+
+.feature-card,
+.tech-card,
+.card {
+    background: rgba($surface-light, 0.5);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba($accent-cyan, 0.1);
+    border-radius: $card-radius;
+    padding: 2rem;
+    transition: $transition-smooth;
+    margin-bottom: 1.5rem;
+
+    // "Basic" theme might use standard cards
+    &.card-body {
+        background: transparent;
+    }
+
+    &:hover {
+        transform: translateY(-5px);
+        border-color: rgba($accent-cyan, 0.3);
+        box-shadow: $shadow-elegant;
+        background: rgba($surface-light, 0.7);
+
+        .icon {
+            transform: scale(1.1) rotate(5deg);
+        }
+    }
+
+    .icon {
+        width: 60px;
+        height: 60px;
+        background: linear-gradient(135deg, $accent-cyan, $accent-purple);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 1.5rem;
+        font-size: 1.75rem;
+        color: white;
+        transition: $transition-smooth;
+    }
+
+    h3,
+    .card-title {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+        color: $text-primary;
+    }
+
+    p,
+    .card-text {
+        color: $text-secondary;
+        line-height: 1.6;
+    }
+}
+
+// Buttons
+.btn {
+    padding: 0.75rem 1.75rem;
+    font-weight: 600;
+    border-radius: 50px;
+    letter-spacing: 0.02em;
+    transition: $transition-smooth;
+
+    &-primary {
+        background: linear-gradient(135deg, $accent-cyan, $accent-purple);
+        border: none;
+        color: white;
+        box-shadow: 0 4px 15px rgba($accent-cyan, 0.3);
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba($accent-cyan, 0.5);
+            color: white;
+        }
+    }
+
+    &-outline-primary {
+        background: transparent;
+        border: 2px solid $accent-cyan;
+        color: $accent-cyan;
+
+        &:hover {
+            background: $accent-cyan;
+            color: $surface-dark;
+            transform: translateY(-2px);
+        }
+    }
+
+    &-link {
+        color: $accent-cyan;
+        text-decoration: none;
+
+        &:hover {
+            color: lighten($accent-cyan, 10%);
+        }
+    }
+}
+
+// Code Blocks
+pre,
+code {
+    font-family: $font-mono;
+}
+
+pre {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba($accent-cyan, 0.1);
+    border-radius: 8px;
+    padding: 1.5rem;
+    overflow-x: auto;
+
+    code {
+        color: inherit;
+        background: none;
+        border: none;
+    }
+}
+
+code {
+    background: rgba($accent-cyan, 0.1);
+    color: $accent-cyan;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+
+// Sections & Titles
+.section-title {
+    text-align: center;
+    margin-bottom: 4rem;
+    position: relative;
+
+    h2 {
+        display: inline-block;
+        background: linear-gradient(to right, $text-primary, $text-secondary);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 0.5rem;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 60px;
+        height: 4px;
+        background: linear-gradient(90deg, $accent-cyan, $accent-purple);
+        margin: 1rem auto 0;
+        border-radius: 2px;
+    }
+}
+
+// Footer
+footer.footer {
+    background: rgba($surface-dark, 0.9);
+    border-top: 1px solid rgba($accent-cyan, 0.1);
+    padding: 4rem 0 2rem;
+    margin-top: 5rem;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, $accent-cyan, transparent);
+        opacity: 0.5;
+    }
+
+    .widget-title {
+        color: $white;
+        font-weight: 700;
+        margin-bottom: 1.5rem;
+        font-size: 1.25rem;
+    }
+
+    .list-footer {
+        list-style: none;
+        padding: 0;
+
+        li {
+            margin-bottom: 0.75rem;
+
+            a {
+                color: $text-secondary;
+                transition: $transition-smooth;
+                text-decoration: none;
+                display: inline-block;
+
+                &:hover {
+                    color: $accent-cyan;
+                    transform: translateX(5px);
+                }
+            }
+        }
+    }
+
+    .socials {
+        display: flex;
+        gap: 1rem;
+
+        a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba($surface-light, 0.5);
+            color: $text-secondary;
+            transition: $transition-smooth;
+            border: 1px solid rgba($white, 0.1);
+
+            &:hover {
+                background: linear-gradient(135deg, $accent-cyan, $accent-purple);
+                color: white;
+                transform: translateY(-3px);
+                border-color: transparent;
+                box-shadow: $glow-cyan;
+            }
+        }
+    }
+
+    .copyright {
+        margin-top: 3rem;
+        padding-top: 2rem;
+        border-top: 1px solid rgba($white, 0.05);
+        color: darken($text-secondary, 10%);
+        font-size: 0.9rem;
+
+        a {
+            color: $text-secondary;
+
+            &:hover {
+                color: $accent-cyan;
+            }
+        }
+    }
+}
+
+// Animations
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-in {
+    animation: fadeInUp 0.6s ease-out forwards;
+}
+
+// Utility Classes
+.gradient-text {
+    background: linear-gradient(135deg, $accent-cyan, $accent-purple);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.glass-panel {
+    background: rgba($surface-light, 0.6);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba($accent-cyan, 0.1);
+    border-radius: $card-radius;
+    padding: 2rem;
+}
+
+// Responsive
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2.5rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+    }
+
+    .hero {
+        text-align: center;
+
+        .btn {
+            display: block;
+            width: 100%;
+            margin: 0 0 1rem 0;
+        }
+    }
+
+    .section {
+        padding: 60px 0;
+    }
+}

package/src/themes/elegant/sass/_variables.scss

@@ -0,0 +1,42 @@
+// Elegant Theme Variables
+// Modern, sophisticated color palette for tech sites
+
+// Color Palette - Deep Blues & Accents
+$primary-dark: #0a1929;
+$primary-blue: #1e3a5f;
+$accent-cyan: #00d4ff;
+$accent-purple: #6366f1;
+$text-primary: #e8eaed;
+$text-secondary: #9ca3af;
+$surface-dark: #111827;
+$surface-light: #1f2937;
+
+// Typography
+$font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+// Spacing & Layout
+$container-max: 1280px;
+$section-padding: 120px;
+$card-radius: 16px;
+
+// Effects
+$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+$shadow-elegant: 0 20px 60px rgba(0, 0, 0, 0.3);
+$glow-cyan: 0 0 20px rgba(0, 212, 255, 0.3);
+
+// Bootstrap Overrides
+$body-bg: $primary-dark;
+$body-color: $text-primary;
+$font-family-sans-serif: $font-primary;
+$font-family-monospace: $font-mono;
+
+$theme-colors: (
+    "primary": $accent-cyan,
+    "secondary": $accent-purple,
+    "dark": $surface-dark,
+    "light": $surface-light
+);
+
+$link-color: $accent-cyan;
+$link-hover-color: lighten($accent-cyan, 10%);

package/src/themes/elegant/sass/app.scss

@@ -0,0 +1,14 @@
+// Elegant Theme - Main Entry Point
+// Modern tech aesthetic with sophisticated design
+
+// Import Google Fonts
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+// Theme Variables
+@import "variables";
+
+// Bootstrap Framework
+@import '~bootstrap/scss/bootstrap';
+
+// Theme Styles
+@import "elegant";