Upload folder using huggingface_hub

index.html

@@ -7,41 +7,41 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary: #f59e0b;
-            --primary-dark: #d97706;
-            --secondary: #fbbf24;
-            --accent: #f472b6;
-            --text: #1f2937;
-            --text-light: #6b7280;
-            --bg: #fef7ed;
+            --primary: #ff6b6b;
+            --primary-dark: #ee5a52;
+            --secondary: #4ecdc4;
+            --accent: #ffd166;
+            --text: #2d3748;
+            --text-light: #718096;
+            --bg: #f8f9fa;
             --bg-card: #ffffff;
-            --border: #e5e7eb;
-            --success: #10b981;
-            --warning: #f59e0b;
-            --error: #ef4444;
-            --radius: 12px;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --transition: all 0.3s ease;
+            --border: #e2e8f0;
+            --success: #48bb78;
+            --warning: #ed8936;
+            --error: #f56565;
+            --radius: 16px;
+            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         .dark-mode {
-            --primary: #f59e0b;
-            --primary-dark: #d97706;
-            --secondary: #fbbf24;
-            --accent: #f472b6;
-            --text: #f9fafb;
-            --text-light: #d1d5db;
-            --bg: #1f2937;
-            --bg-card: #374151;
-            --border: #4b5563;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+            --primary: #ff6b6b;
+            --primary-dark: #ee5a52;
+            --secondary: #4ecdc4;
+            --accent: #ffd166;
+            --text: #f7fafc;
+            --text-light: #cbd5e0;
+            --bg: #1a202c;
+            --bg-card: #2d3748;
+            --border: #4a5568;
+            --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         }
 
         body {
@@ -49,23 +49,26 @@
             color: var(--text);
             transition: var(--transition);
             line-height: 1.6;
+            min-height: 100vh;
         }
 
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 1rem;
+            padding: 0 1.5rem;
         }
 
+        /* Header */
         header {
             background-color: var(--bg-card);
-            box-shadow: var(--shadow);
+            backdrop-filter: blur(10px);
             position: sticky;
             top: 0;
-            z-index: 100;
+            z-index: 1000;
+            border-bottom: 1px solid var(--border);
         }
 
-        .header-content {
+        .nav-container {
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -75,48 +78,18 @@
         .logo {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
+            gap: 0.75rem;
             font-weight: 700;
             font-size: 1.5rem;
             color: var(--primary);
-        }
-
-        .logo i {
-            font-size: 1.75rem;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-        }
-
-        .nav-links a {
             text-decoration: none;
-            color: var(--text);
-            font-weight: 500;
-            transition: var(--transition);
-            position: relative;
-        }
-
-        .nav-links a:hover {
-            color: var(--primary);
-        }
-
-        .nav-links a.active {
-            color: var(--primary);
         }
 
-        .nav-links a.active::after {
-            content: '';
-            position: absolute;
-            bottom: -0.5rem;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background-color: var(--primary);
+        .logo-icon {
+            font-size: 1.75rem;
         }
 
-        .header-actions {
+        .nav-actions {
             display: flex;
             align-items: center;
             gap: 1rem;
@@ -129,28 +102,33 @@
             cursor: pointer;
             font-size: 1.25rem;
             transition: var(--transition);
+            padding: 0.5rem;
+            border-radius: var(--radius);
         }
 
         .theme-toggle:hover {
+            background-color: var(--bg);
             color: var(--primary);
         }
 
-        .add-review-btn {
-            background-color: var(--primary);
+        .primary-btn {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
             color: white;
             border: none;
-            padding: 0.5rem 1rem;
+            padding: 0.75rem 1.5rem;
             border-radius: var(--radius);
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             align-items: center;
             gap: 0.5rem;
+            text-decoration: none;
         }
 
-        .add-review-btn:hover {
-            background-color: var(--primary-dark);
+        .primary-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px -8px var(--primary);
         }
 
         .mobile-menu-btn {
@@ -160,44 +138,51 @@
             color: var(--text);
             font-size: 1.5rem;
             cursor: pointer;
+            padding: 0.5rem;
+            border-radius: var(--radius);
         }
 
+        /* Hero Section */
         .hero {
-            padding: 3rem 0;
+            padding: 4rem 0;
             text-align: center;
             background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
             color: white;
-            border-radius: 0 0 var(--radius) var(--radius);
-            margin-bottom: 2rem;
+            margin-bottom: 3rem;
         }
 
         .hero h1 {
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
+            font-size: 3rem;
+            font-weight: 800;
+            margin-bottom: 1.5rem;
+            line-height: 1.2;
         }
 
         .hero p {
             font-size: 1.25rem;
             max-width: 600px;
-            margin: 0 auto 1.5rem;
+            margin: 0 auto 2rem;
+            opacity: 0.95;
         }
 
         .hero-actions {
             display: flex;
             gap: 1rem;
             justify-content: center;
+            flex-wrap: wrap;
         }
 
         .btn {
-            padding: 0.75rem 1.5rem;
+            padding: 0.875rem 2rem;
             border-radius: var(--radius);
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
             transition: var(--transition);
             border: none;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
+            text-decoration: none;
         }
 
         .btn-primary {
@@ -206,7 +191,8 @@
         }
 
         .btn-primary:hover {
-            background-color: rgba(255, 255, 255, 0.9);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px -8px rgba(255, 255, 255, 0.3);
         }
 
         .btn-secondary {
@@ -220,356 +206,222 @@
             color: var(--primary);
         }
 
+        /* Main Content */
+        .main-content {
+            padding-bottom: 3rem;
+        }
+
         .section-title {
-            font-size: 1.75rem;
-            margin-bottom: 1.5rem;
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 2rem;
             display: flex;
             align-items: center;
-            gap: 0.5rem;
+            gap: 0.75rem;
         }
 
         .section-title i {
             color: var(--primary);
         }
 
-        .reviews-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 3rem;
+        /* Search & Filters */
+        .search-container {
+            margin-bottom: 2rem;
         }
 
-        .review-card {
+        .search-bar {
+            display: flex;
             background-color: var(--bg-card);
             border-radius: var(--radius);
             overflow: hidden;
             box-shadow: var(--shadow);
-            transition: var(--transition);
-        }
-
-        .review-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
 
-        .review-image {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-        }
-
-        .review-content {
-            padding: 1.25rem;
-        }
-
-        .review-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 0.75rem;
+        .search-input {
+            flex: 1;
+            padding: 1rem 1.5rem;
+            border: none;
+            background-color: var(--bg-card);
+            color: var(--text);
+            font-size: 1rem;
         }
 
-        .review-title {
-            font-size: 1.25rem;
-            font-weight: 600;
-            margin-bottom: 0.25rem;
+        .search-input:focus {
+            outline: none;
         }
 
-        .review-badge {
+        .search-btn {
             background-color: var(--primary);
             color: white;
-            padding: 0.25rem 0.5rem;
-            border-radius: 20px;
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-
-        .review-badge.exception {
-            background-color: var(--accent);
-        }
-
-        .review-meta {
-            color: var(--text-light);
-            font-size: 0.875rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .rating {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .rating-stars {
-            color: var(--primary);
-            display: flex;
-        }
-
-        .rating-value {
-            font-weight: 600;
-        }
-
-        .review-tags {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            margin-bottom: 1rem;
-        }
-
-        .tag {
-            background-color: var(--bg);
-            color: var(--text);
-            padding: 0.25rem 0.5rem;
-            border-radius: 20px;
-            font-size: 0.75rem;
+            border: none;
+            padding: 0 1.5rem;
+            cursor: pointer;
+            transition: var(--transition);
         }
 
-        .review-preview {
-            color: var(--text-light);
-            font-size: 0.875rem;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
+        .search-btn:hover {
+            background-color: var(--primary-dark);
         }
 
-        .filters {
+        .filters-container {
             display: flex;
-            flex-wrap: wrap;
             gap: 1rem;
+            flex-wrap: wrap;
             margin-bottom: 2rem;
-            background-color: var(--bg-card);
-            padding: 1.25rem;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-        }
-
-        .filter-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
         }
 
-        .filter-label {
-            font-size: 0.875rem;
-            font-weight: 500;
-        }
-
-        .filter-select, .filter-input {
-            padding: 0.5rem;
-            border-radius: var(--radius);
-            border: 1px solid var(--border);
-            background-color: var(--bg);
+        .filter-chip {
+            background-color: var(--bg-card);
             color: var(--text);
-        }
-
-        .search-bar {
-            display: flex;
-            gap: 0.5rem;
-            margin-bottom: 2rem;
-        }
-
-        .search-input {
-            flex: 1;
-            padding: 0.75rem 1rem;
-            border-radius: var(--radius);
+            padding: 0.75rem 1.5rem;
+            border-radius: 50px;
             border: 1px solid var(--border);
-            background-color: var(--bg);
-            color: var(--text);
+            cursor: pointer;
+            transition: var(--transition);
+            font-weight: 500;
         }
 
-        .search-btn {
+        .filter-chip.active {
             background-color: var(--primary);
             color: white;
-            border: none;
-            padding: 0 1.25rem;
-            border-radius: var(--radius);
-            cursor: pointer;
-        }
-
-        .form-container {
-            max-width: 800px;
-            margin: 0 auto;
-            background-color: var(--bg-card);
-            padding: 2rem;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
+            border-color: var(--primary);
         }
 
-        .form-group {
-            margin-bottom: 1.5rem;
+        .filter-chip:hover {
+            background-color: var(--bg);
         }
 
-        .form-label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
+        /* Reviews Grid */
+        .reviews-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 2rem;
+            margin-bottom: 4rem;
         }
 
-        .form-input, .form-textarea, .form-select {
-            width: 100%;
-            padding: 0.75rem;
+        .review-card {
+            background-color: var(--bg-card);
             border-radius: var(--radius);
-            border: 1px solid var(--border);
-            background-color: var(--bg);
-            color: var(--text);
+            overflow: hidden;
+            box-shadow: var(--shadow);
             transition: var(--transition);
         }
 
-        .form-input:focus, .form-textarea:focus, .form-select:focus {
-            outline: none;
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
-        }
-
-        .form-textarea {
-            min-height: 150px;
-            resize: vertical;
-        }
-
-        .form-row {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
+        .review-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
         }
 
-        .rating-slider {
+        .review-image {
             width: 100%;
-            margin: 0.5rem 0;
-        }
-
-        .rating-display {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 0.5rem;
-            font-size: 0.875rem;
-            color: var(--text-light);
+            height: 220px;
+            object-fit: cover;
         }
 
-        .sub-ratings {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-top: 1rem;
+        .review-content {
+            padding: 1.5rem;
         }
 
-        .checkbox-group {
+        .review-header {
             display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .checkbox {
-            width: 1.25rem;
-            height: 1.25rem;
-            accent-color: var(--primary);
-        }
-
-        .photo-upload {
-            border: 2px dashed var(--border);
-            border-radius: var(--radius);
-            padding: 2rem;
-            text-align: center;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .photo-upload:hover {
-            border-color: var(--primary);
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 1rem;
         }
 
-        .photo-preview {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            margin-top: 1rem;
+        .review-title {
+            font-size: 1.375rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
         }
 
-        .preview-image {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            border-radius: var(--radius);
+        .review-meta {
+            color: var(--text-light);
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
         }
 
-        .submit-btn {
+        .review-badge {
             background-color: var(--primary);
             color: white;
-            border: none;
-            padding: 0.75rem 2rem;
-            border-radius: var(--radius);
-            font-weight: 500;
-            cursor: pointer;
-            transition: var(--transition);
-            width: 100%;
-            font-size: 1rem;
-        }
-
-        .submit-btn:hover {
-            background-color: var(--primary-dark);
-        }
-
-        .toast {
-            position: fixed;
-            bottom: 1rem;
-            right: 1rem;
-            background-color: var(--bg-card);
-            color: var(--text);
-            padding: 1rem 1.5rem;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
+            padding: 0.375rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+
+        .review-badge.exception {
+            background-color: var(--secondary);
+        }
+
+        .rating {
             display: flex;
             align-items: center;
             gap: 0.75rem;
-            z-index: 1000;
-            transform: translateX(150%);
-            transition: transform 0.3s ease;
-        }
-
-        .toast.show {
-            transform: translateX(0);
+            margin-bottom: 1rem;
         }
 
-        .toast.success {
-            border-left: 4px solid var(--success);
+        .rating-stars {
+            color: var(--accent);
+            display: flex;
+            gap: 0.125rem;
         }
 
-        .toast.error {
-            border-left: 4px solid var(--error);
+        .rating-value {
+            font-weight: 700;
+            font-size: 1.125rem;
         }
 
-        .toast-icon {
-            font-size: 1.25rem;
+        .review-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
         }
 
-        .toast.success .toast-icon {
-            color: var(--success);
+        .tag {
+            background-color: var(--bg);
+            color: var(--text);
+            padding: 0.375rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.75rem;
+            font-weight: 500;
         }
 
-        .toast.error .toast-icon {
-            color: var(--error);
+        .review-preview {
+            color: var(--text-light);
+            font-size: 0.875rem;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
         }
 
+        /* Top Lists */
         .top-lists {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 3rem;
+            gap: 2rem;
         }
 
         .top-list {
             background-color: var(--bg-card);
             border-radius: var(--radius);
-            padding: 1.5rem;
+            padding: 2rem;
             box-shadow: var(--shadow);
         }
 
+        .top-list h3 {
+            font-size: 1.25rem;
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+        }
+
         .top-list-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 0.75rem 0;
+            padding: 1rem 0;
             border-bottom: 1px solid var(--border);
         }
 
@@ -577,20 +429,10 @@
             border-bottom: none;
         }
 
-        .premium-badge {
-            background: linear-gradient(135deg, #f59e0b, #f472b6);
-            color: white;
-            padding: 0.25rem 0.5rem;
-            border-radius: 20px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            margin-left: 0.5rem;
-        }
-
+        /* Footer */
         footer {
             background-color: var(--bg-card);
-            padding: 2rem 0;
-            margin-top: 3rem;
+            padding: 3rem 0;
             border-top: 1px solid var(--border);
         }
 
@@ -602,7 +444,7 @@
 
         .footer-links {
             display: flex;
-            gap: 1.5rem;
+            gap: 2rem;
         }
 
         .footer-links a {
@@ -623,167 +465,42 @@
         .built-with a {
             color: var(--primary);
             text-decoration: none;
+            font-weight: 600;
         }
 
         .built-with a:hover {
             text-decoration: underline;
         }
 
-        .detail-container {
-            max-width: 900px;
-            margin: 0 auto;
+        /* Toast */
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
             background-color: var(--bg-card);
+            color: var(--text);
+            padding: 1rem 1.5rem;
             border-radius: var(--radius);
-            overflow: hidden;
             box-shadow: var(--shadow);
-        }
-
-        .detail-gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 1rem;
-            padding: 1.5rem;
-        }
-
-        .detail-image {
-            width: 100%;
-            height: 150px;
-            object-fit: cover;
-            border-radius: var(--radius);
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .detail-image:hover {
-            transform: scale(1.05);
-        }
-
-        .detail-content {
-            padding: 1.5rem;
-        }
-
-        .detail-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 1rem;
-        }
-
-        .detail-meta {
-            color: var(--text-light);
-            margin-bottom: 1.5rem;
-        }
-
-        .detail-ratings {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-        }
-
-        .rating-bar {
-            height: 8px;
-            background-color: var(--border);
-            border-radius: 4px;
-            overflow: hidden;
-            margin-top: 0.25rem;
-        }
-
-        .rating-fill {
-            height: 100%;
-            background-color: var(--primary);
-            border-radius: 4px;
-        }
-
-        .detail-text {
-            line-height: 1.7;
-            margin-bottom: 1.5rem;
-        }
-
-        .modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
             display: flex;
-            justify-content: center;
             align-items: center;
+            gap: 0.75rem;
             z-index: 1000;
-            opacity: 0;
-            visibility: hidden;
-            transition: var(--transition);
-        }
-
-        .modal.show {
-            opacity: 1;
-            visibility: visible;
-        }
-
-        .modal-content {
-            max-width: 90%;
-            max-height: 90%;
-            position: relative;
-        }
-
-        .modal-image {
-            max-width: 100%;
-            max-height: 90vh;
-            border-radius: var(--radius);
-        }
-
-        .modal-close {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            background-color: rgba(0, 0, 0, 0.5);
-            color: white;
-            border: none;
-            width: 2.5rem;
-            height: 2.5rem;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-
-        .modal-close:hover {
-            background-color: rgba(0, 0, 0, 0.7);
-        }
-
-        .skeleton {
-            background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
-            background-size: 200% 100%;
-            animation: loading 1.5s infinite;
-            border-radius: var(--radius);
-        }
-
-        @keyframes loading {
-            0% {
-                background-position: 200% 0;
-            }
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        .skeleton-image {
-            height: 200px;
-            width: 100%;
+            transform: translateX(150%);
+            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            border-left: 4px solid var(--success);
         }
 
-        .skeleton-text {
-            height: 1rem;
-            margin-bottom: 0.5rem;
+        .toast.show {
+            transform: translateX(0);
         }
 
-        .skeleton-text.short {
-            width: 60%;
+        .toast-icon {
+            font-size: 1.25rem;
+            color: var(--success);
         }
 
+        /* Mobile Navigation */
         .mobile-nav {
             position: fixed;
             top: 0;
@@ -791,12 +508,10 @@
             width: 100%;
             height: 100%;
             background-color: var(--bg);
-            z-index: 200;
-            display: flex;
-            flex-direction: column;
-            padding: 2rem;
+            z-index: 2000;
             transform: translateX(-100%);
             transition: var(--transition);
+            padding: 2rem;
         }
 
         .mobile-nav.show {
@@ -807,7 +522,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 2rem;
+            margin-bottom: 3rem;
         }
 
         .mobile-nav-close {
@@ -821,35 +536,40 @@
         .mobile-nav-links {
             display: flex;
             flex-direction: column;
-            gap: 1.5rem;
+            gap: 2rem;
         }
 
         .mobile-nav-links a {
             text-decoration: none;
             color: var(--text);
-            font-size: 1.25rem;
-            font-weight: 500;
+            font-size: 1.5rem;
+            font-weight: 600;
         }
 
         .mobile-nav-links a.active {
             color: var(--primary);
         }
 
+        /* Responsive Design */
         @media (max-width: 768px) {
-            .nav-links, .header-actions .add-review-btn {
-                display: none;
-            }
-
-            .mobile-menu-btn {
-                display: block;
+            .container {
+                padding: 0 1rem;
             }
 
             .hero h1 {
-                font-size: 2rem;
+                font-size: 2.25rem;
             }
 
             .hero p {
-                font-size: 1rem;
+                font-size: 1.125rem;
+            }
+
+            .nav-actions .primary-btn {
+                display: none;
+            }
+
+            .mobile-menu-btn {
+                display: block;
             }
 
             .hero-actions {
@@ -857,18 +577,39 @@
                 align-items: center;
             }
 
-            .form-row {
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .filters-container {
+                justify-content: center;
+            }
+
+            .reviews-grid {
                 grid-template-columns: 1fr;
+                gap: 1.5rem;
             }
 
             .footer-content {
                 flex-direction: column;
-                gap: 1.5rem;
+                gap: 2rem;
                 text-align: center;
             }
 
-            .reviews-grid {
-                grid-template-columns: 1fr;
+            .footer-links {
+                flex-direction: column;
+                gap: 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .hero {
+                padding: 3rem 0;
+            }
+
+            .hero h1 {
+                font-size: 2rem;
             }
         }
     </style>
@@ -876,25 +617,19 @@
 <body>
     <header>
         <div class="container">
-            <div class="header-content">
-                <div class="logo">
-                    <i class="fas fa-cheese"></i>
+            <div class="nav-container">
+                <a href="#" class="logo">
+                    <i class="fas fa-cheese logo-icon"></i>
                     <span>The Cheesecake Club</span>
-                </div>
-                <nav class="nav-links">
-                    <a href="#" class="active">Home</a>
-                    <a href="#">Explore</a>
-                    <a href="#">Top Lists</a>
-                    <a href="#">Premium</a>
-                </nav>
-                <div class="header-actions">
+                </a>
+                <div class="nav-actions">
                     <button class="theme-toggle" id="themeToggle">
                         <i class="fas fa-moon"></i>
                     </button>
-                    <button class="add-review-btn">
+                    <a href="#" class="primary-btn">
                         <i class="fas fa-plus"></i>
                         Add Review
-                    </button>
+                    </a>
                     <button class="mobile-menu-btn" id="mobileMenuBtn">
                         <i class="fas fa-bars"></i>
                     </button>
@@ -905,26 +640,26 @@
 
     <div class="mobile-nav" id="mobileNav">
         <div class="mobile-nav-header">
-            <div class="logo">
-                <i class="fas fa-cheese"></i>
+            <a href="#" class="logo">
+                <i class="fas fa-cheese logo-icon"></i>
                 <span>The Cheesecake Club</span>
+            </a>
+            <button class="mobile-nav-close" id="mobileNavClose">
+                <i class="fas fa-times"></i>
+            </button>
         </div>
-        <button class="mobile-nav-close" id="mobileNavClose">
-            <i class="fas fa-times"></i>
-        </button>
         <div class="mobile-nav-links">
             <a href="#" class="active">Home</a>
             <a href="#">Explore</a>
             <a href="#">Top Lists</a>
             <a href="#">Add Review</a>
-            <a href="#">Premium</a>
         </div>
     </div>
 
-    <div class="hero">
+    <section class="hero">
         <div class="container">
             <h1>Discover the World's Best Cheesecakes</h1>
-            <p>A community of dessert lovers sharing honest reviews, ratings, and photos of cheesecakes and other sweet treats from around the globe.</p>
+            <p>A community of dessert lovers sharing honest reviews, ratings, and photos of cheesecakes from around the globe.</p>
             <div class="hero-actions">
                 <button class="btn btn-primary" id="addReviewBtn">
                     <i class="fas fa-plus"></i>
@@ -936,53 +671,23 @@
                 </button>
             </div>
         </div>
-    </div>
-
-    <main class="container">
-        <div class="search-bar">
-            <input type="text" class="search-input" placeholder="Search by dessert, restaurant, city, or review text...">
-            <button class="search-btn">
-                <i class="fas fa-search"></i>
-            </button>
+    </section>
+
+    <main class="container main-content">
+        <div class="search-container">
+            <div class="search-bar">
+                <input type="text" class="search-input" placeholder="Search by dessert, restaurant, or city...">
+                <button class="search-btn">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
         </div>
 
-        <div class="filters">
-            <div class="filter-group">
-                <label class="filter-label">Dessert Type</label>
-                <select class="filter-select">
-                    <option>All Desserts</option>
-                    <option>Cheesecake Only</option>
-                    <option>Exceptions Only</option>
-                </select>
-            </div>
-            <div class="filter-group">
-                <label class="filter-label">City</label>
-                <select class="filter-select">
-                    <option>All Cities</option>
-                    <option>New York</option>
-                    <option>Lisbon</option>
-                    <option>Paris</option>
-                    <option>Tokyo</option>
-                </select>
-            </div>
-            <div class="filter-group">
-                <label class="filter-label">Min Rating</label>
-                <select class="filter-select">
-                    <option>Any Rating</option>
-                    <option>9+</option>
-                    <option>8+</option>
-                    <option>7+</option>
-                    <option>6+</option>
-                </select>
-            </div>
-            <div class="filter-group">
-                <label class="filter-label">Sort By</label>
-                <select class="filter-select">
-                    <option>Newest First</option>
-                    <option>Highest Rated</option>
-                    <option>Oldest First</option>
-                </select>
-            </div>
+        <div class="filters-container">
+            <div class="filter-chip active">All Desserts</div>
+            <div class="filter-chip">Cheesecake</div>
+            <div class="filter-chip">Exceptions</div>
+            <div class="filter-chip">Top Rated</div>
         </div>
 
         <h2 class="section-title">
@@ -1001,7 +706,7 @@
 
         <div class="top-lists">
             <div class="top-list">
-                <h3>Top Rated Cheesecakes</h3>
+                <h3>Top Cheesecakes</h3>
                 <div class="top-list-item">
                     <span>New York Cheesecake</span>
                     <span class="rating-value">9.8</span>
@@ -1018,38 +723,10 @@
                     <span>Basque Burnt Cheesecake</span>
                     <span class="rating-value">9.2</span>
                 </div>
-                <div class="top-list-item">
-                    <span>Strawberry Swirl Cheesecake</span>
-                    <span class="rating-value">9.0</span>
-                </div>
-            </div>
-
-            <div class="top-list">
-                <h3>Top Rated Exceptions</h3>
-                <div class="top-list-item">
-                    <span>Tiramisu</span>
-                    <span class="rating-value">9.7</span>
-                </div>
-                <div class="top-list-item">
-                    <span>Chocolate Lava Cake</span>
-                    <span class="rating-value">9.4</span>
-                </div>
-                <div class="top-list-item">
-                    <span>Crème Brûlée</span>
-                    <span class="rating-value">9.2</span>
-                </div>
-                <div class="top-list-item">
-                    <span>Apple Pie</span>
-                    <span class="rating-value">9.0</span>
-                </div>
-                <div class="top-list-item">
-                    <span>Panna Cotta</span>
-                    <span class="rating-value">8.8</span>
-                </div>
             </div>
 
             <div class="top-list">
-                <h3>By City</h3>
+                <h3>Top Cities</h3>
                 <div class="top-list-item">
                     <span>New York</span>
                     <span class="rating-value">9.4</span>
@@ -1066,10 +743,6 @@
                     <span>Tokyo</span>
                     <span class="rating-value">8.7</span>
                 </div>
-                <div class="top-list-item">
-                    <span>London</span>
-                    <span class="rating-value">8.5</span>
-                </div>
             </div>
         </div>
     </main>
@@ -1095,15 +768,6 @@
         <div class="toast-message">Review added successfully!</div>
     </div>
 
-    <div class="modal" id="imageModal">
-        <div class="modal-content">
-            <img class="modal-image" id="modalImage" src="" alt="">
-            <button class="modal-close" id="modalClose">
-                <i class="fas fa-times"></i>
-            </button>
-        </div>
-    </div>
-
     <script>
         // Sample review data
         const reviews = [
@@ -1145,7 +809,7 @@
                 },
                 wouldReturn: true,
                 tags: ['Caramel', 'Creamy', 'Rich'],
-                textReview: 'Incrível! A textura é perfeita, nem muito densa nem muito leve. O caramelo é divino - nem doce demais nem amargo. A combinação com a base de biscoito é perfeita. Definitivamente voltaria só por esta sobremesa.',
+                textReview: 'Incrível! A textura é perfeita, nem muito densa nem muito leve. O caramelo é divino - nem doce demais nem amargo. A combinação com a base de biscoito é perfeita.',
                 imageUrl: 'https://images.unsplash.com/photo-1524351199678-941a58a3df50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                 price: 7.80
             },
@@ -1166,7 +830,7 @@
                 },
                 wouldReturn: true,
                 tags: ['Coffee', 'Mascarpone', 'Italian'],
-                textReview: 'Um dos melhores tiramisù que já provei. O equilíbrio entre o café e o mascarpone é perfeito. Não é excessivamente doce e tem uma textura incrivelmente leve. Perfeito para terminar uma refeição.',
+                textReview: 'Um dos melhores tiramisù que já provei. O equilíbrio entre o café e o mascarpone é perfeito. Não é excessivamente doce e tem uma textura incrivelmente leve.',
                 imageUrl: 'https://images.unsplash.com/photo-1571877227200-a0d98ea1ae6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                 price: 9.20
             },
@@ -1187,30 +851,9 @@
                 },
                 wouldReturn: true,
                 tags: ['Oreo', 'Chocolate', 'Creamy'],
-                textReview: 'This cheesecake is a chocolate lover\'s dream. The Oreo crust is thick and crunchy, and the filling is perfectly balanced between cream cheese and cookie flavors. The chocolate ganache topping is rich but not overwhelming.',
+                textReview: 'This cheesecake is a chocolate lover\'s dream. The Oreo crust is thick and crunchy, and the filling is perfectly balanced.',
                 imageUrl: 'https://images.unsplash.com/photo-1623334044303-2410217754f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                 price: 6.50
-            },
-            {
-                id: 5,
-                dessertType: 'cheesecake',
-                dessertName: 'Basque Burnt Cheesecake',
-                restaurantName: 'La Fromagerie',
-                city: 'Paris',
-                country: 'France',
-                dateEaten: '2023-09-12',
-                overallRating: 9.2,
-                subRatings: {
-                    base: 8.5,
-                    texture: 9.5,
-                    sweetness: 9.0,
-                    topping: 8.0
-                },
-                wouldReturn: true,
-                tags: ['Burnt', 'Creamy', 'Rustic'],
-                textReview: 'A textura é incrível - cremosa por dentro com aquela crosta caramelizada por fora. Menos doce que um cheesecake tradicional, o que permite que o sabor do queijo realmente brilhe. A apresentação rústica é encantadora.',
-                imageUrl: 'https://images.unsplash.com/photo-1569670751316-4d5c5d5b5b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
-                price: 7.00
             }
         ];
 
@@ -1223,9 +866,7 @@
         const exploreBtn = document.getElementById('exploreBtn');
         const reviewsGrid = document.getElementById('reviewsGrid');
         const toast = document.getElementById('toast');
-        const imageModal = document.getElementById('imageModal');
-        const modalImage = document.getElementById('modalImage');
-        const modalClose = document.getElementById('modalClose');
+        const filterChips = document.querySelectorAll('.filter-chip');
 
         // Theme toggle functionality
         themeToggle.addEventListener('click', () => {
@@ -1234,7 +875,7 @@
             if (document.body.classList.contains('dark-mode')) {
                 icon.classList.remove('fa-moon');
                 icon.classList.add('fa-sun');
-            localStorage.setItem('theme', 'dark');
+                localStorage.setItem('theme', 'dark');
             } else {
                 icon.classList.remove('fa-sun');
                 icon.classList.add('fa-moon');
@@ -1263,17 +904,23 @@
         // Add review button functionality
         addReviewBtn.addEventListener('click', () => {
             showToast('Redirecting to add review form...', 'success');
-            // In a real app, this would navigate to the add review page
         });
 
         exploreBtn.addEventListener('click', () => {
             showToast('Loading explore page...', 'success');
-            // In a real app, this would navigate to the explore page
+        });
+
+        // Filter chip functionality
+        filterChips.forEach(chip => {
+            chip.addEventListener('click', () => {
+                filterChips.forEach(c => c.classList.remove('active'));
+                chip.classList.add('active');
+                showToast(`Filtered by: ${chip.textContent}`, 'success');
+            });
         });
 
         // Show toast notification
         function showToast(message, type) {
-            toast.className = `toast ${type}`;
             toast.querySelector('.toast-message').textContent = message;
             toast.classList.add('show');
 
@@ -1337,20 +984,9 @@
             
             // Add click event to review cards
             document.querySelectorAll('.review-card').forEach(card => {
-                card.addEventListener('click', (e) => {
-                    if (!e.target.classList.contains('review-image')) {
-                        const reviewId = card.getAttribute('data-id');
-                        showReviewDetail(reviewId);
-                    }
-                });
-            });
-            
-            // Add click event to review images
-            document.querySelectorAll('.review-image').forEach(img => {
-                img.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const reviewId = img.closest('.review-card').getAttribute('data-id');
-                    openImageModal(reviewId);
+                card.addEventListener('click', () => {
+                    const reviewId = card.getAttribute('data-id');
+                    showReviewDetail(reviewId);
                 });
             });
         }
@@ -1360,32 +996,9 @@
             const review = reviews.find(r => r.id == reviewId);
             if (!review) return;
             
-            // In a real app, this would navigate to the review detail page
             showToast(`Loading review: ${review.dessertName}`, 'success');
         }
 
-        // Open image modal
-        function openImageModal(reviewId) {
-            const review = reviews.find(r => r.id == reviewId);
-            if (!review) return;
-            
-            modalImage.src = review.imageUrl;
-            modalImage.alt = review.dessertName;
-            imageModal.classList.add('show');
-        }
-
-        // Close image modal
-        modalClose.addEventListener('click', () => {
-            imageModal.classList.remove('show');
-        });
-
-        // Close modal when clicking outside the image
-        imageModal.addEventListener('click', (e) => {
-            if (e.target === imageModal) {
-                imageModal.classList.remove('show');
-            }
-        });
-
         // Initialize the app
         document.addEventListener('DOMContentLoaded', () => {
             renderReviews();