Rework the home page

Author: jedisct1

www/assets/css/main.css

@@ -1242,198 +1242,206 @@ section h2::after {
     background-color: var(--color-secondary-dark);
 }
 
-/* Examples Showcase Styles */
-.examples-showcase {
+/* Examples Showcase Styles - Compact Version */
+.examples-grid {
     display: grid;
-    gap: 3rem;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
     max-width: 1200px;
     margin: 0 auto;
 }
 
-.example-mode {
+.example-card {
     background: white;
-    border-radius: 12px;
-    padding: 2rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 1.75rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e5e7eb;
 }
 
-.mode-header h3 {
-    color: #1e40af;
+.example-card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+    border-color: #d1d5db;
+}
+
+.example-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.example-header h3 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1f2937;
     font-family: 'Courier New', monospace;
+    margin: 0;
 }
 
-.mode-header p {
-    line-height: 1.6;
+.badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
 }
 
-.example-box {
-    margin-top: 1.5rem;
-    background: #f8fafc;
-    border-radius: 8px;
-    padding: 1.5rem;
-    border: 1px solid #e2e8f0;
+.badge-blue {
+    background: #dbeafe;
+    color: #1e40af;
 }
 
-.key-display {
-    background: #1e293b;
-    color: white;
-    padding: 0.75rem 1rem;
-    border-radius: 6px;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    font-family: 'Courier New', monospace;
+.badge-green {
+    background: #d1fae5;
+    color: #065f46;
 }
 
-.key-label {
-    color: #94a3b8;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.badge-purple {
+    background: #ede9fe;
+    color: #6b21a8;
 }
 
-.key-value {
-    color: #fbbf24;
+.badge-orange {
+    background: #fed7aa;
+    color: #9a3412;
+}
+
+.example-description {
     font-size: 0.875rem;
-    word-break: break-all;
+    color: #6b7280;
+    margin-bottom: 1rem;
+    line-height: 1.4;
 }
 
-.transformations {
+.example-samples {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.5rem;
 }
 
-.transform-row {
+.sample {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    padding: 0.75rem;
-    background: white;
+    gap: 0.75rem;
+    padding: 0.625rem 0.75rem;
+    padding-right: 3.5rem;
+    background: #f9fafb;
     border-radius: 6px;
-    border: 1px solid #e2e8f0;
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
     position: relative;
-    flex-wrap: wrap;
+    border: 1px solid transparent;
 }
 
-.transform-row:hover {
-    border-color: #3b82f6;
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
-}
-
-.ip-input, .ip-output {
-    font-family: 'Courier New', monospace;
-    font-size: 0.95rem;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
+.sample:hover {
+    background: #f3f4f6;
 }
 
-.ip-input {
-    background: #f0f9ff;
+.sample .input {
     color: #1e40af;
-    border: 1px solid #bfdbfe;
-    min-width: 140px;
+    font-weight: 600;
+    min-width: 110px;
 }
 
-.ip-input.ipv6 {
-    min-width: 320px;
+.sample .arrow {
+    color: #9ca3af;
+    font-size: 1rem;
 }
 
-.ip-output {
-    background: #f0fdf4;
-    color: #14532d;
-    border: 1px solid #bbf7d0;
+.sample .output {
     flex: 1;
+    color: #059669;
     word-break: break-all;
+    font-size: 0.825rem;
+    margin-right: 0.5rem;
 }
 
-.ip-output.hex {
-    background: #fef3c7;
-    color: #78350f;
-    border: 1px solid #fde68a;
-    font-size: 0.85rem;
-}
-
-.ip-output.ipv6 {
-    min-width: 320px;
+.sample .output.hex {
+    color: #7c3aed;
+    font-size: 0.775rem;
 }
 
-.arrow {
-    color: #6b7280;
-    font-size: 1.25rem;
-    font-weight: bold;
-    flex-shrink: 0;
+.sample .output em {
+    font-style: normal;
+    font-weight: 700;
+    color: #059669;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: #10b981;
 }
 
-.transform-row .note {
+.indicator {
     position: absolute;
-    right: 1rem;
+    right: 0.375rem;
     top: 50%;
     transform: translateY(-50%);
-    background: #3b82f6;
-    color: white;
-    padding: 0.25rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.75rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    font-size: 0.625rem;
     font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    white-space: nowrap;
 }
 
-.highlight-duplicate {
-    background: #fef3c7 !important;
+.highlight-same {
+    background: #fef3c7;
+    border-color: #fbbf24;
 }
 
-.highlight-duplicate .note {
-    background: #f59e0b;
+.highlight-same .indicator {
+    color: #92400e;
 }
 
-.highlight-prefix .ip-output {
-    position: relative;
+.highlight-prefix {
+    background: #d1fae5;
+    border-color: #10b981;
 }
 
-.highlight-prefix .note {
-    background: #10b981;
+.highlight-prefix .indicator {
+    color: #065f46;
 }
 
 .highlight-different {
-    background: #ede9fe !important;
+    background: #ede9fe;
+    border-color: #8b5cf6;
 }
 
-.highlight-different .note {
-    background: #8b5cf6;
+.highlight-different .indicator {
+    color: #6b21a8;
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
-    .example-mode {
-        padding: 1.5rem;
+@media (max-width: 992px) {
+    .examples-grid {
+        grid-template-columns: 1fr;
     }
-    
-    .example-box {
-        padding: 1rem;
+}
+
+@media (max-width: 768px) {
+    .example-card {
+        padding: 1.25rem;
     }
 
-    .transform-row {
+    .sample {
+        font-size: 0.8rem;
         padding: 0.5rem;
     }
 
-    .transform-row .note {
-        position: static;
-        transform: none;
-        margin-top: 0.5rem;
-        display: inline-block;
+    .sample .input {
+        min-width: 85px;
+        font-size: 0.75rem;
     }
 
-    .ip-input, .ip-output {
-        font-size: 0.85rem;
-        min-width: auto;
-        width: 100%;
+    .sample .output {
+        font-size: 0.7rem;
     }
 
-    .key-value {
-        font-size: 0.75rem;
+    .indicator {
+        position: static;
+        transform: none;
+        margin-left: auto;
     }
 }