@hashtagcms/web-ui-kit 1.0.5

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";

package/src/themes/elegant/views/_layout_/index.blade.php

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    {!! app()->HashtagCms->layoutManager()->getHeaderContent(); !!}
+    {!! app()->HashtagCms->layoutManager()->getMetaContent(); !!}
+    <title>{!! app()->HashtagCms->layoutManager()->getTitle(); !!}</title>
+    @php
+        $lottieFile = app()->HashtagCms->layoutManager()->getViewThemeFolder()."._layout_.lottie";
+        $bodyCss = app()->HashtagCms->layoutManager()->getFestivalCss();
+        $bodyBackground = "";
+        if (!empty(app()->HashtagCms->layoutManager()->getBodyBackgroundImage())) {
+            $bodyBackground = app()->HashtagCms->layoutManager()->getBodyBackgroundImage(). ";background-repeat: no-repeat;background-attachment: fixed;background-position: center;";
+        }
+    @endphp
+
+    <script>
+        window.Laravel = {!! json_encode([
+            'csrfToken' => csrf_token()
+        ]) !!};
+        let _siteProps_ = <?php echo htcms_get_site_props(true); ?>;
+        window.Laravel.configData = {};
+        window.Laravel.configData.media = <?php echo json_encode(config('hashtagcms.media')) ?>;
+    </script>
+</head>
+<body class="{!!$bodyCss!!}"
+      style="{!!$bodyBackground!!}">
+@include($lottieFile)
+{!! app()->HashtagCms->layoutManager()->getBodyContent(); !!}
+<form id="logout-form" action="/login/doLogout" method="POST" style="display: none;">
+    @csrf
+    <input type="submit" value="Logout">
+</form>
+<div class="small" style="padding:10px; text-align: center;">
+    <a title="#CMS" href="https://www.hashtagcms.org/">Powered by HashtagCms.org</a>
+</div>
+
+{!! app()->HashtagCms->layoutManager()->getFooterContent(); !!}
+
+{!! app()->HashtagCms->layoutManager()->renderStack('scripts') !!}
+
+@if(env('GOOGLE_TAG_MANAGER_KEY') != '')
+    <script async
+            src="https://www.googletagmanager.com/gtag/js?id=<?php echo env('GOOGLE_TAG_MANAGER_KEY'); ?>"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        gtag('js', new Date());
+        gtag('config', "<?php echo env('GOOGLE_TAG_MANAGER_KEY'); ?>");
+
+        gtag('event', 'pageView', {
+            'pageName': (_siteProps_.pageId === -1) ? _siteProps_.categoryName : _siteProps_.pageName
+        });
+    </script>
+@endif
+<script>
+    try {
+        HashtagCms.Analytics.init(_siteProps_);
+        HashtagCms.AppConfig.setConfigData(window.Laravel.configData);
+        //HashtagCms.Analytics.trackPageView(_siteProps_.categoryName + ""+_siteProps_.pageName)
+    } catch (e) {
+        console.error(e.message, "@", e.fileName);
+    }
+</script>
+</body>
+</html>

package/src/themes/elegant/views/_layout_/lottie.blade.php

@@ -0,0 +1,50 @@
+@php
+    $lottieObj = app()->HashtagCms->layoutManager()->getFestivalObject();
+    $hasLottie = is_array($lottieObj) && sizeof($lottieObj) >= 1;
+@endphp
+<script>
+    let LottieHandler = {
+        hideOnComplete: function (lottieRef, lottieObj) {
+            if (lottieObj?.lottieHideOnComplete === true) {
+                document.getElementById(lottieRef).addEventListener('frame', (frame)=> {
+                    if(Math.round(frame.detail.seeker) === 100) {
+                        frame.target.remove();
+                    }
+                });
+            }
+
+        }
+    }
+</script>
+@if($hasLottie)
+    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+    @foreach($lottieObj as $lottieO)
+        @php
+            $attributes = '';
+            $styles = '';
+            //loop controls autoplay
+            foreach ($lottieO['lottieAttributes'] as $key => $value) {
+                //$value = is_bool($value) ? ($value ? 'true' : 'false') : $value;
+                if (is_bool($value)) {
+                    $attributes .= ($value === true) ? $key ." " : "";
+                } else {
+                    $attributes .= "$key=$value ";
+                }
+
+            }
+            //loop through lottieStyles
+             foreach ($lottieO['lottieStyles'] as $key => $value) {
+                $value = is_bool($value) ? ($value ? 'true' : 'false') : $value;
+                $styles .= $key.':'.$value.';';
+            }
+            $styles = "style=$styles";
+             $lottiePlayer = "lottiePlayer_".$lottieO['id'];
+        @endphp
+        <dotlottie-player id="{{$lottiePlayer}}" src="{{htcms_get_media($lottieO['lottie'])}}"
+                {{$attributes}}
+                {{$styles}}></dotlottie-player>
+        <script>
+            LottieHandler.hideOnComplete("{!! $lottiePlayer !!}", {!! json_encode($lottieO) !!});
+        </script>
+    @endforeach
+@endif

package/src/themes/elegant/views/_services_/index.blade.php

@@ -0,0 +1,10 @@
+@if($withCss)
+    <link rel="stylesheet" href="{{app()->HashtagCms->layoutManager()->parseStringForPath('%{css_path}%/app.css')}}" />
+@endif
+@if($withJs)
+    <script>
+        let _siteProps_ = <?php echo htcms_get_site_props(true); ?>;
+    </script>
+    <script src="{{app()->HashtagCms->layoutManager()->parseStringForPath('%{js_path}%/app.js')}}"></script>
+@endif
+{!! $data !!}