Spaces:

Akshansh115
/

logo

Running

App Files Files Community

Akshansh115 commited on Jan 4

Commit

a28931c

verified ·

1 Parent(s): 5b7d61e

make the feront page like this in above image and rest of page normal

Browse files

Files changed (1) hide show

index.html +1488 -18

index.html CHANGED Viewed

@@ -1,20 +1,1490 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
-    <div class="w-full">
-      <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span>
-      <h1 class="text-4xl lg:text-6xl font-bold font-sans">
-        <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span>
-        Ask me anything.
-      </h1>
     </div>
-      <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
-    <script></script>
-  </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WiseFind - Personalized Product Recommendations</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #ffffff;
+            color: #333;
+            line-height: 1.6;
+        }
+        .container {
+            width: 90%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Header Styles */
+        header {
+            background-color: #fff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1000;
+        }
+        .header-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #4361ee;
+        }
+        .logo i {
+            margin-right: 10px;
+            color: #4361ee;
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+        }
+        nav ul li {
+            margin-left: 25px;
+        }
+        nav ul li a {
+            text-decoration: none;
+            color: #333;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+        nav ul li a:hover {
+            color: #4361ee;
+        }
+        .cta-buttons {
+            display: flex;
+        }
+        .btn {
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            text-decoration: none;
+            display: inline-block;
+            margin-left: 15px;
+        }
+        .btn-outline {
+            border: 2px solid #4361ee;
+            color: #4361ee;
+            background: transparent;
+        }
+        .btn-outline:hover {
+            background-color: #4361ee;
+            color: white;
+        }
+        .btn-primary {
+            background-color: #4361ee;
+            color: white;
+            border: none;
+        }
+        .btn-primary:hover {
+            background-color: #3a56d4;
+        }
+        /* Hero Section */
+        .hero {
+            padding: 100px 0;
+            background: white;
+        }
+        .hero .container {
+            display: flex;
+            align-items: center;
+            gap: 50px;
+        }
+        .hero-content {
+            flex: 1;
+        }
+        .hero-image {
+            flex: 1;
+        }
+        .hero-image img {
+            width: 100%;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .hero h1 {
+            font-size: 3rem;
+            margin-bottom: 15px;
+            color: #333;
+            line-height: 1.2;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: #666;
+            margin-bottom: 30px;
+        }
+        .search-box {
+            display: flex;
+            max-width: 600px;
+            margin-bottom: 30px;
+        }
+        .search-input {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            padding: 0 15px;
+            border: 2px solid #4361ee;
+            border-radius: 8px 0 0 8px;
+            background: white;
+        }
+        .search-input i {
+            color: #666;
+            margin-right: 10px;
+        }
+        .search-input input {
+            flex: 1;
+            border: none;
+            padding: 15px 0;
+            font-size: 1rem;
+            outline: none;
+        }
+        .search-btn {
+            background: #4361ee;
+            color: white;
+            border: none;
+            padding: 0 30px;
+            border-radius: 0 8px 8px 0;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .search-btn:hover {
+            background: #3a56d4;
+        }
+        .hero-categories {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .category-tag {
+            background: #f5f7ff;
+            color: #4361ee;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .category-tag:hover {
+            background: #4361ee;
+            color: white;
+        }
+.form-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #444;
+        }
+        .form-control {
+            width: 100%;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 1rem;
+            transition: border 0.3s;
+        }
+        .form-control:focus {
+            border-color: #4361ee;
+            outline: none;
+        }
+        .form-row {
+            display: flex;
+            gap: 20px;
+        }
+        .form-row .form-group {
+            flex: 1;
+        }
+        /* Budget Slider */
+        .budget-slider-container {
+            margin-top: 10px;
+        }
+        .budget-slider {
+            width: 100%;
+            height: 8px;
+            border-radius: 5px;
+            background: #ddd;
+            outline: none;
+            -webkit-appearance: none;
+        }
+        .budget-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #4361ee;
+            cursor: pointer;
+        }
+        .budget-slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #4361ee;
+            cursor: pointer;
+            border: none;
+        }
+        .budget-display {
+            text-align: center;
+            margin-top: 10px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #4361ee;
+        }
+        /* Features Section */
+        .features {
+            padding: 80px 0;
+            background-color: #f8f9fa;
+        }
+        .section-title {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+        .section-title h2 {
+            font-size: 2.5rem;
+            margin-bottom: 15px;
+            color: #333;
+        }
+        .section-title p {
+            font-size: 1.1rem;
+            color: #666;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+        }
+        .feature-card {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            text-align: center;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+        }
+        .feature-icon {
+            font-size: 3rem;
+            color: #4361ee;
+            margin-bottom: 20px;
+        }
+        .feature-card h3 {
+            font-size: 1.5rem;
+            margin-bottom: 15px;
+            color: #333;
+        }
+        .feature-card p {
+            color: #666;
+        }
+        /* Categories Section */
+        .categories {
+            padding: 80px 0;
+        }
+        .categories-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        .category-card {
+            background: white;
+            border: 1px solid #eee;
+            border-radius: 10px;
+            padding: 30px 20px;
+            text-align: center;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        .category-card:hover {
+            border-color: #4361ee;
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
+        }
+        .category-icon {
+            font-size: 2.5rem;
+            color: #4361ee;
+            margin-bottom: 15px;
+        }
+        .category-card h4 {
+            font-size: 1.2rem;
+            color: #333;
+        }
+        /* Recommendations Modal */
+        .recommendations-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1002;
+            overflow-y: auto;
+        }
+        .recommendations-content {
+            background-color: white;
+            margin: 3% auto;
+            padding: 30px;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 900px;
+            position: relative;
+        }
+        .close-modal {
+            position: absolute;
+            top: 15px;
+            right: 20px;
+            font-size: 2rem;
+            cursor: pointer;
+            color: #aaa;
+        }
+        .close-modal:hover {
+            color: #333;
+        }
+        .ai-recommendation {
+            background-color: #f8f9fa;
+            border-left: 4px solid #4361ee;
+            padding: 20px;
+            margin-bottom: 30px;
+            border-radius: 0 10px 10px 0;
+        }
+        .ai-disclaimer {
+            font-style: italic;
+            color: #e74c3c;
+            font-weight: 600;
+            margin-bottom: 15px;
+        }
+        .ai-suggestion {
+            margin-bottom: 15px;
+        }
+        .product-list {
+            margin-top: 20px;
+        }
+        .product-item {
+            background-color: white;
+            border: 1px solid #eee;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            transition: transform 0.3s;
+        }
+        .product-item:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        .product-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .product-name {
+            font-weight: bold;
+            font-size: 1.1rem;
+            color: #333;
+        }
+        .product-price {
+            font-weight: bold;
+            color: #4361ee;
+            font-size: 1.1rem;
+        }
+        .product-details {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .product-source {
+            display: flex;
+            align-items: center;
+            color: #666;
+            font-size: 0.9rem;
+        }
+        .product-source i {
+            margin-right: 5px;
+        }
+        .product-link {
+            background-color: #4361ee;
+            color: white;
+            padding: 6px 12px;
+            border-radius: 4px;
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: background-color 0.3s;
+        }
+        .product-link:hover {
+            background-color: #3a56d4;
+        }
+        .experts-section {
+            margin-top: 30px;
+        }
+        .experts-title {
+            font-size: 1.8rem;
+            margin-bottom: 20px;
+            color: #333;
+            text-align: center;
+        }
+        .experts-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+        }
+        .expert-card {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            transition: transform 0.3s;
+        }
+        .expert-card:hover {
+            transform: translateY(-5px);
+        }
+        .expert-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            margin: 0 auto 15px;
+            object-fit: cover;
+        }
+        .expert-name {
+            font-size: 1.2rem;
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #333;
+        }
+        .expert-specialty {
+            color: #4361ee;
+            margin-bottom: 10px;
+        }
+        .expert-rating {
+            color: #f39c12;
+            margin-bottom: 15px;
+        }
+        .btn-expert {
+            background-color: #4361ee;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background-color 0.3s;
+        }
+        .btn-expert:hover {
+            background-color: #3a56d4;
+        }
+        /* CTA Section */
+        .cta-section {
+            padding: 80px 0;
+            background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
+            color: white;
+            text-align: center;
+        }
+        .cta-section h2 {
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+        }
+        .cta-section p {
+            font-size: 1.2rem;
+            max-width: 700px;
+            margin: 0 auto 30px;
+        }
+        .btn-light {
+            background-color: white;
+            color: #4361ee;
+            border: none;
+            padding: 12px 30px;
+            font-size: 1.1rem;
+        }
+        .btn-light:hover {
+            background-color: #f8f9fa;
+        }
+        /* Footer */
+        footer {
+            background-color: #333;
+            color: #ddd;
+            padding: 60px 0 20px;
+        }
+        .footer-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        .footer-col h3 {
+            font-size: 1.3rem;
+            margin-bottom: 20px;
+            color: white;
+        }
+        .footer-col ul {
+            list-style: none;
+        }
+        .footer-col ul li {
+            margin-bottom: 10px;
+        }
+        .footer-col ul li a {
+            color: #ddd;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .footer-col ul li a:hover {
+            color: #4361ee;
+        }
+        .social-links {
+            display: flex;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .social-links a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            background-color: #444;
+            color: white;
+            border-radius: 50%;
+            transition: background-color 0.3s;
+        }
+        .social-links a:hover {
+            background-color: #4361ee;
+        }
+        .copyright {
+            text-align: center;
+            padding-top: 20px;
+            border-top: 1px solid #444;
+            font-size: 0.9rem;
+        }
+        /* Mobile Responsive */
+        .mobile-menu-btn {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #333;
+        }
+        @media (max-width: 992px) {
+            .hero .container {
+                flex-direction: column;
+            }
+            .hero-content,
+            .hero-image {
+                width: 100%;
+            }
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+        }
+@media (max-width: 768px) {
+            .header-container {
+                padding: 15px;
+            }
+            nav {
+                position: fixed;
+                top: 70px;
+                left: 0;
+                width: 100%;
+                background: white;
+                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+                padding: 20px;
+                transform: translateY(-150%);
+                transition: transform 0.3s;
+                z-index: 999;
+            }
+            nav.active {
+                transform: translateY(0);
+            }
+            nav ul {
+                flex-direction: column;
+            }
+            nav ul li {
+                margin: 10px 0;
+            }
+            .mobile-menu-btn {
+                display: block;
+            }
+            .cta-buttons {
+                display: none;
+            }
+            .hero {
+                padding: 120px 0 60px;
+            }
+            .hero h1 {
+                font-size: 2.2rem;
+            }
+            .hero-form {
+                padding: 20px;
+            }
+            .section-title h2 {
+                font-size: 2rem;
+            }
+            .features, .categories, .cta-section {
+                padding: 60px 0;
+            }
+            .footer-grid {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+            .social-links {
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header>
+        <div class="container header-container">
+            <div class="logo">
+                <i class="fas fa-check-circle"></i>
+              WiseFind
+            </div>
+            <button class="mobile-menu-btn" id="mobileMenuBtn">
+                <i class="fas fa-bars"></i>
+            </button>
+            <nav id="mainNav">
+                <ul>
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#features">How It Works</a></li>
+                    <li><a href="#categories">Categories</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="cta-buttons">
+                <a href="#" class="btn btn-outline">Log In</a>
+                <a href="#" class="btn btn-primary">Sign Up</a>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero" id="home">
+        <div class="container">
+            <div class="hero-content">
+                <h1>Find the Perfect Product for You</h1>
+                <p class="hero-subtitle">Get personalized recommendations from experts and community members</p>
+                <div class="search-box">
+                    <div class="search-input">
+                        <i class="fas fa-search"></i>
+                        <input type="text" placeholder="What are you looking for?">
+                    </div>
+                    <button class="search-btn">Search</button>
+                </div>
+                <div class="hero-categories">
+                    <div class="category-tag">Electronics</div>
+                    <div class="category-tag">Fashion</div>
+                    <div class="category-tag">Home & Kitchen</div>
+                    <div class="category-tag">Beauty</div>
+                    <div class="category-tag">Sports</div>
+                    <div class="category-tag">Books</div>
+                </div>
+            </div>
+            <div class="hero-image">
+                <img src="https://static.photos/technology/1200x630/42" alt="Smartphone and accessories">
+            </div>
+        </div>
+    </section>
+<!-- Features Section -->
+    <section class="features" id="features">
+        <div class="container">
+            <div class="section-title">
+                <h2>How It Works</h2>
+                <p>Our simple three-step process connects you with the perfect products for your needs</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-edit"></i>
+                    </div>
+                    <h3>Tell Us Your Needs</h3>
+                    <p>Share your budget, category, and purpose. The more details you provide, the better our recommendations.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3>Get Expert Advice</h3>
+                    <p>Our community of experts, moderators, and enthusiasts will provide tailored recommendations based on your needs.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-shopping-cart"></i>
+                    </div>
+                    <h3>Make Your Choice</h3>
+                    <p>Compare recommendations, read reviews, and make your purchase with confidence knowing you've made the right choice.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Categories Section -->
+    <section class="categories" id="categories">
+        <div class="container">
+            <div class="section-title">
+                <h2>Explore Categories</h2>
+                <p>We cover a wide range of product categories to meet all your needs</p>
+            </div>
+            <div class="categories-grid">
+                <div class="category-card" data-category="tech">
+                    <div class="category-icon">
+                        <i class="fas fa-laptop"></i>
+                    </div>
+                    <h4>Tech & Electronics</h4>
+                </div>
+                <div class="category-card" data-category="sports">
+                    <div class="category-icon">
+                        <i class="fas fa-football-ball"></i>
+                    </div>
+                    <h4>Sports Equipment</h4>
+                </div>
+                <div class="category-card" data-category="fitness">
+                    <div class="category-icon">
+                        <i class="fas fa-dumbbell"></i>
+                    </div>
+                    <h4>Gym & Fitness</h4>
+                </div>
+                <div class="category-card" data-category="home">
+                    <div class="category-icon">
+                        <i class="fas fa-home"></i>
+                    </div>
+                    <h4>Household Products</h4>
+                </div>
+                <div class="category-card" data-category="outdoor">
+                    <div class="category-icon">
+                        <i class="fas fa-campground"></i>
+                    </div>
+                    <h4>Outdoor & Recreation</h4>
+                </div>
+                <div class="category-card" data-category="fashion">
+                    <div class="category-icon">
+                        <i class="fas fa-tshirt"></i>
+                    </div>
+                    <h4>Fashion & Accessories</h4>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Recommendations Modal -->
+    <div id="recommendationsModal" class="recommendations-modal">
+        <div class="recommendations-content">
+            <span class="close-modal">&times;</span>
+            <div class="ai-recommendation">
+                <div class="ai-disclaimer">This is a suggestion of AI. Do not consider as expert advice.</div>
+                <div class="ai-suggestion" id="aiSuggestion">
+                    <!-- AI recommendation will be populated by JavaScript -->
+                </div>
+                <div class="product-list" id="productList">
+                    <!-- Product recommendations will be populated by JavaScript -->
+                </div>
+            </div>
+            <div class="experts-section">
+                <h2 class="experts-title">Our Experts</h2>
+                <div class="experts-grid" id="expertsGrid">
+                    <!-- Experts will be populated by JavaScript -->
+                </div>
+            </div>
+        </div>
     </div>
+    <!-- CTA Section -->
+    <section class="cta-section">
+        <div class="container">
+            <h2>Ready to Find Your Perfect Product?</h2>
+            <p>Join our community today and get personalized recommendations from experts and enthusiasts.</p>
+            <a href="#" class="btn btn-light">Get Started Now</a>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer id="contact">
+        <div class="container">
+            <div class="footer-grid">
+                <div class="footer-col">
+                    <h3>WiseFind
+                    </h3>
+                    <p>Your trusted platform for personalized product recommendations across all categories.</p>
+                    <div class="social-links">
+                        <a href="#"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#"><i class="fab fa-twitter"></i></a>
+                        <a href="#"><i class="fab fa-instagram"></i></a>
+                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
+                    </div>
+                </div>
+                <div class="footer-col">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#">How It Works</a></li>
+                        <li><a href="#">Categories</a></li>
+                        <li><a href="#">Contact Us</a></li>
+                    </ul>
+                </div>
+                <div class="footer-col">
+                    <h3>Categories</h3>
+                    <ul>
+                        <li><a href="#">Tech & Electronics</a></li>
+                        <li><a href="#">Sports Equipment</a></li>
+                        <li><a href="#">Gym & Fitness</a></li>
+                        <li><a href="#">Household Products</a></li>
+                        <li><a href="#">Outdoor & Recreation</a></li>
+                    </ul>
+                </div>
+                <div class="footer-col">
+                    <h3>Contact Us (India)</h3>
+                    <ul>
+                        <li><i class="fas fa-map-marker-alt"></i> 123, Brigade Road, Bangalore, Karnataka 560001</li>
+                        <li><i class="fas fa-phone"></i> +91 80 1234 5678</li>
+                        <li><i class="fas fa-envelope"></i> info@WiseFind
+        .in</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="copyright">
+                <p>&copy; 2025 WiseFind
+. All Rights Reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Subcategories data
+        const subcategories = {
+            tech: [
+                'Laptops & Computers',
+                'Smartphones & Tablets',
+                'TVs & Home Entertainment',
+                'Cameras & Photography',
+                'Audio & Headphones',
+                'Gaming Consoles',
+                'Wearables',
+                'Smart Home Devices',
+                'Computer Accessories',
+                'Networking Devices'
+            ],
+            sports: [
+                'Cricket Equipment',
+                'Football Gear',
+                'Badminton',
+                'Tennis',
+                'Basketball',
+                'Fitness Accessories',
+                'Outdoor Sports',
+                'Indoor Games',
+                'Cycling',
+                'Swimming'
+            ],
+            fitness: [
+                'Cardio Equipment',
+                'Strength Training',
+                'Yoga & Pilates',
+                'Fitness Accessories',
+                'Gym Wearables',
+                'Supplements',
+                'Home Gym Setup',
+                'Exercise Mats',
+                'Resistance Bands',
+                'Fitness Trackers'
+            ],
+            home: [
+                'Kitchen Appliances',
+                'Furniture',
+                'Home Decor',
+                'Cleaning Tools',
+                'Storage Solutions',
+                'Lighting',
+                'Bathroom Essentials',
+                'Home Security',
+                'Bedding',
+                'Laundry Appliances'
+            ],
+            outdoor: [
+                'Camping Gear',
+                'Hiking Equipment',
+                'Cycling',
+                'Water Sports',
+                'Travel Accessories',
+                'Adventure Sports',
+                'Picnic & Beach',
+                'Fishing',
+                'Climbing',
+                'Winter Sports'
+            ],
+            fashion: [
+                'Men\'s Clothing',
+                'Women\'s Clothing',
+                'Footwear',
+                'Bags & Wallets',
+                'Watches',
+                'Jewelry',
+                'Sunglasses',
+                'Winter Wear',
+                'Accessories',
+                'Ethnic Wear'
+            ]
+        };
+        // Products database
+        const products = {
+            'laptops-&-computers': [
+                {
+                    name: 'Dell Inspiron 15 3501',
+                    price: 34990,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '15.6 inch FHD Display, 11th Gen Intel Core i3, 8GB RAM, 1TB HDD'
+                },
+                {
+                    name: 'HP 15s-er0023AU',
+                    price: 32999,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: '15.6 inch FHD Display, AMD Ryzen 3, 8GB RAM, 512GB SSD'
+                },
+                {
+                    name: 'Lenovo IdeaPad Slim 3',
+                    price: 35990,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '15.6 inch FHD Display, 11th Gen Intel Core i3, 8GB RAM, 256GB SSD'
+                }
+            ],
+            'smartphones-&-tablets': [
+                {
+                    name: 'Redmi Note 12',
+                    price: 14999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '6.67 inch FHD+ AMOLED Display, Snapdragon 4 Gen 1, 6GB RAM, 128GB Storage'
+                },
+                {
+                    name: 'Samsung Galaxy M13',
+                    price: 13999,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: '6.6 inch FHD+ Display, Exynos 850, 6GB RAM, 128GB Storage'
+                },
+                {
+                    name: 'Realme 10',
+                    price: 15999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '6.4 inch FHD+ AMOLED Display, MediaTek Dimensity 700, 8GB RAM, 128GB Storage'
+                }
+            ],
+            'tvs-&-home-entertainment': [
+                {
+                    name: 'Mi 5X 43 inch',
+                    price: 24999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '43 inch 4K Ultra HD Smart Android TV, Dolby Vision, HDR10'
+                },
+                {
+                    name: 'Samsung Crystal 4K Pro',
+                    price: 27999,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: '43 inch 4K Ultra HD Smart TV, Crystal Processor 4K, HDR'
+                },
+                {
+                    name: 'LG UM7290PTD',
+                    price: 29999,
+                    source: 'Croma',
+                    link: '#',
+                    description: '43 inch 4K Ultra HD Smart TV, Active HDR, ThinQ AI'
+                }
+            ],
+            'cricket-equipment': [
+                {
+                    name: 'SG Sunny Tonny English Willow',
+                    price: 12999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: 'English Willow Cricket Bat, Short Handle, Size 6'
+                },
+                {
+                    name: 'Kookaburra Kahuna 150',
+                    price: 14999,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: 'English Willow Cricket Bat, Short Handle, Size 5'
+                },
+                {
+                    name: 'SS Ton Gold',
+                    price: 9999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: 'English Willow Cricket Bat, Short Handle, Size 6'
+                }
+            ],
+            'fitness-accessories': [
+                {
+                    name: 'Fitbit Charge 5',
+                    price: 12999,
+                    source: 'Amazon',
+                    link: '#',
+                    description: 'Advanced Health & Fitness Tracker with GPS, 24/7 Heart Rate'
+                },
+                {
+                    name: 'Mi Band 6',
+                    price: 3499,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: 'Fitness Tracker with 1.56 inch AMOLED Display, SpO2 Monitoring'
+                },
+                {
+                    name: 'Realme Band 2',
+                    price: 2499,
+                    source: 'Amazon',
+                    link: '#',
+                    description: 'Fitness Tracker with 1.4 inch Large Color Display, 50m Water Resistant'
+                }
+            ],
+            'kitchen-appliances': [
+                {
+                    name: 'Philips Air Fryer HD9252',
+                    price: 8995,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '4.1 Liters, 1400W, Rapid Air Technology, Black'
+                },
+                {
+                    name: 'Prestige PAF 4.0',
+                    price: 6495,
+                    source: 'Flipkart',
+                    link: '#',
+                    description: '4 Liters, 1500W, Air Fryer with Digital Control Panel'
+                },
+                {
+                    name: 'Inalsa Air Fryer',
+                    price: 7495,
+                    source: 'Amazon',
+                    link: '#',
+                    description: '4.2 Liters, 1500W, Digital Control Panel, 7 Presets'
+                }
+            ]
+        };
+        // Experts data
+        const experts = [
+            {
+                name: "Rajesh Sharma",
+                specialty: "Tech & Electronics",
+                rating: 4.8,
+                avatar: "https://randomuser.me/api/portraits/men/32.jpg"
+            },
+            {
+                name: "Priya Patel",
+                specialty: "Fashion & Accessories",
+                rating: 4.9,
+                avatar: "https://randomuser.me/api/portraits/women/44.jpg"
+            },
+            {
+                name: "Amit Kumar",
+                specialty: "Sports Equipment",
+                rating: 4.7,
+                avatar: "https://randomuser.me/api/portraits/men/67.jpg"
+            },
+            {
+                name: "Neha Singh",
+                specialty: "Home & Kitchen",
+                rating: 4.6,
+                avatar: "https://randomuser.me/api/portraits/women/28.jpg"
+            }
+        ];
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const mainNav = document.getElementById('mainNav');
+        mobileMenuBtn.addEventListener('click', () => {
+            mainNav.classList.toggle('active');
+        });
+        // Budget slider
+        const budgetSlider = document.getElementById('budget');
+        const budgetDisplay = document.getElementById('budgetDisplay');
+        budgetSlider.addEventListener('input', () => {
+            const value = parseInt(budgetSlider.value);
+            budgetDisplay.textContent = `₹${value.toLocaleString('en-IN')}`;
+        });
+        // Category and subcategory handling
+        const categorySelect = document.getElementById('category');
+        const subcategorySelect = document.getElementById('subcategory');
+        categorySelect.addEventListener('change', () => {
+            const selectedCategory = categorySelect.value;
+            // Clear existing subcategories
+            subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
+            if (selectedCategory && subcategories[selectedCategory]) {
+                // Populate subcategories
+                subcategories[selectedCategory].forEach(sub => {
+                    const option = document.createElement('option');
+                    option.value = sub.toLowerCase().replace(/\s+/g, '-');
+                    option.textContent = sub;
+                    subcategorySelect.appendChild(option);
+                });
+            }
+        });
+        // Category cards interaction
+        const categoryCards = document.querySelectorAll('.category-card');
+        categoryCards.forEach(card => {
+            card.addEventListener('click', () => {
+                const category = card.getAttribute('data-category');
+                const categoryName = card.querySelector('h4').textContent;
+                // Set category in form
+                categorySelect.value = category;
+                // Trigger change event to populate subcategory dropdown
+                const event = new Event('change');
+                categorySelect.dispatchEvent(event);
+                // Scroll to form
+                window.scrollTo({
+                    top: document.querySelector('.hero-form').offsetTop - 100,
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Close modal when clicking on X or outside modal
+        document.querySelectorAll('.close-modal').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.getElementById('recommendationsModal').style.display = 'none';
+            });
+        });
+        window.addEventListener('click', (e) => {
+            if (e.target === document.getElementById('recommendationsModal')) {
+                document.getElementById('recommendationsModal').style.display = 'none';
+            }
+        });
+        // Form submission
+        const recommendationForm = document.getElementById('recommendationForm');
+        const recommendationsModal = document.getElementById('recommendationsModal');
+        const aiSuggestion = document.getElementById('aiSuggestion');
+        const productList = document.getElementById('productList');
+        const expertsGrid = document.getElementById('expertsGrid');
+        recommendationForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const budget = document.getElementById('budget').value;
+            const category = document.getElementById('category').value;
+            const subcategory = document.getElementById('subcategory').value;
+            const purpose = document.getElementById('purpose').value;
+            // Get budget text for display
+            const budgetText = `₹${parseInt(budget).toLocaleString('en-IN')}`;
+            const categoryText = document.getElementById('category').options[document.getElementById('category').selectedIndex].text;
+            const subcategoryText = document.getElementById('subcategory').options[document.getElementById('subcategory').selectedIndex].text;
+            // Generate AI recommendation
+            aiSuggestion.innerHTML = `
+                <p>Based on your requirements for a <strong>${subcategoryText}</strong> in the <strong>${categoryText}</strong> category with a budget of <strong>${budgetText}</strong> for <strong>${purpose}</strong>, our AI suggests the following:</p>
+                <p>Consider products with high ratings in the mid-range of your budget. Look for items that offer the best value for money with features specifically suited to your stated purpose. Check for warranty options and after-sales service availability in your area.</p>
+                <p>Popular options in this category typically include brands that offer a good balance of quality and affordability. Be sure to read recent customer reviews focusing on durability and performance for your specific use case.</p>
+            `;
+            // Clear existing products
+            productList.innerHTML = '';
+            // Add product list heading
+            const productHeading = document.createElement('h3');
+            productHeading.textContent = 'Recommended Products';
+            productHeading.style.marginTop = '20px';
+            productHeading.style.marginBottom = '15px';
+            productHeading.style.color = '#333';
+            productList.appendChild(productHeading);
+            // Get products for the selected subcategory
+            const subcategoryKey = subcategory.toLowerCase().replace(/\s+/g, '-');
+            const categoryProducts = products[subcategoryKey] || [];
+            // Filter products by budget (within ±20% of user's budget)
+            const minBudget = parseInt(budget) * 0.8;
+            const maxBudget = parseInt(budget) * 1.2;
+            const filteredProducts = categoryProducts.filter(product =>
+                product.price >= minBudget && product.price <= maxBudget
+            );
+            // Display up to 3 products
+            const productsToShow = filteredProducts.slice(0, 3);
+            if (productsToShow.length > 0) {
+                productsToShow.forEach(product => {
+                    const productItem = document.createElement('div');
+                    productItem.className = 'product-item';
+                    productItem.innerHTML = `
+                        <div class="product-header">
+                            <div class="product-name">${product.name}</div>
+                            <div class="product-price">₹${product.price.toLocaleString('en-IN')}</div>
+                        </div>
+                        <div class="product-details">
+                            <div class="product-source">
+                                <i class="fas fa-shopping-cart"></i> ${product.source}
+                            </div>
+                            <a href="${product.link}" target="_blank" class="product-link">View Product</a>
+                        </div>
+                        <div style="margin-top: 10px; font-size: 0.9rem; color: #666;">
+                            ${product.description}
+                        </div>
+                    `;
+                    productList.appendChild(productItem);
+                });
+            } else {
+                const noProducts = document.createElement('div');
+                noProducts.style.padding = '15px';
+                noProducts.style.textAlign = 'center';
+                noProducts.style.color = '#666';
+                noProducts.textContent = 'No products found in your budget range. Please adjust your budget or try a different category.';
+                productList.appendChild(noProducts);
+            }
+            // Clear existing experts
+            expertsGrid.innerHTML = '';
+            // Populate experts
+            experts.forEach(expert => {
+                const expertCard = document.createElement('div');
+                expertCard.className = 'expert-card';
+                expertCard.innerHTML = `
+                    <img src="${expert.avatar}" alt="${expert.name}" class="expert-avatar">
+                    <div class="expert-name">${expert.name}</div>
+                    <div class="expert-specialty">${expert.specialty}</div>
+                    <div class="expert-rating">
+                        ${generateStars(expert.rating)} ${expert.rating}
+                    </div>
+                    <button class="btn-expert" data-expert="${expert.name}">Get Advice</button>
+                `;
+                expertsGrid.appendChild(expertCard);
+            });
+            // Add event listeners to expert buttons
+            document.querySelectorAll('.btn-expert').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const expertName = btn.getAttribute('data-expert');
+                    alert(`Your request has been sent to ${expertName}. They will contact you soon with personalized recommendations!`);
+                });
+            });
+            // Show recommendations modal
+            recommendationsModal.style.display = 'block';
+        });
+        // Generate star rating
+        function generateStars(rating) {
+            let stars = '';
+            const fullStars = Math.floor(rating);
+            const hasHalfStar = rating % 1 >= 0.5;
+            for (let i = 0; i < fullStars; i++) {
+                stars += '<i class="fas fa-star"></i>';
+            }
+            if (hasHalfStar) {
+                stars += '<i class="fas fa-star-half-alt"></i>';
+            }
+            const emptyStars = 5 - Math.ceil(rating);
+            for (let i = 0; i < emptyStars; i++) {
+                stars += '<i class="far fa-star"></i>';
+            }
+            return stars;
+        }
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    mainNav.classList.remove('active');
+                }
+            });
+        });
+    </script>
+</body>
+</html>