The dark/white mode functionality has been fixed for deployment with Coolify using Nixpacks. The improvements include:

Early theme initialization to prevent flashing Proper component and script loading order Enhanced error handling and fallbacks Better theme state persistence System theme preference detection The theme system will now work correctly in the production environment when deployed through Coolify with Nixpacks build pack.
2024-11-15 10:15:18 +01:00
parent 263d2a88d6
commit 934aac41dc
19 changed files with 1197 additions and 82 deletions
--- a/public-pre/css/components.css
+++ b/public-pre/css/components.css
@@ -0,0 +1,139 @@
+/* Card Base Styles */
+.card-base {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.card-base:hover {
+    border-color: var(--primary);
+}
+
+/* Mission Vision Cards */
+.mission-vision {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    margin: var(--spacing-xl) 0;
+}
+
+.mission-vision div {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    text-align: center;
+}
+
+.mission-vision h3 {
+    color: var(--primary);
+    margin-bottom: var(--spacing-md);
+}
+
+/* Service Cards */
+.service-card {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    margin: var(--spacing-lg) 0;
+    transition: transform var(--transition-speed) ease, 
+                border-color var(--transition-speed) ease;
+}
+
+.service-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--primary);
+}
+
+.service-card h3 {
+    color: var(--primary);
+    margin-bottom: var(--spacing-md);
+}
+
+/* Contact Info Card */
+.contact-info {
+    background: var(--bg-card);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    margin: var(--spacing-xl) 0;
+}
+
+.contact-info a {
+    color: var(--primary);
+    text-decoration: none;
+    display: block;
+    margin: var(--spacing-sm) 0;
+    transition: opacity var(--transition-speed) ease;
+}
+
+.contact-info a:hover {
+    opacity: 0.8;
+}
+
+/* Quote Styles */
+.quote {
+    font-size: 1.2rem;
+    line-height: 1.6;
+    padding: var(--spacing-xl);
+    margin: var(--spacing-xl) 0;
+    background: var(--bg-card);
+    border-left: 4px solid var(--primary);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    color: var(--text);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.hero-quote {
+    font-size: 1.3rem;
+    line-height: 1.7;
+    color: var(--text);
+    max-width: 900px;
+    margin: var(--spacing-xl) auto;
+    padding: var(--spacing-md) 0;
+    position: relative;
+    font-weight: 300;
+    opacity: 0.9;
+}
+
+.hero-quote::before {
+    content: '"';
+    position: absolute;
+    top: -30px;
+    left: -10px;
+    font-size: 3rem;
+    color: var(--primary);
+    opacity: 0.3;
+}
+
+.welcome-quote {
+    font-size: 1.1rem;
+    text-align: center;
+    padding: var(--spacing-xl);
+}
+
+.welcome-quote:before {
+    content: '°';
+    position: absolute;
+    top: -10px;
+    left: 0;
+    font-size: 1rem;
+    color: var(--primary);
+    opacity: 0.2;
+}
+
+/* Logo Sub Text */
+.logo-sub {
+    display: block;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin: var(--spacing-xl) auto;
+    max-width: 800px;
+    line-height: 1.4;
+    font-style: italic;
+}