Feature/navbar

backend/MarketPlace/static/carousel.js

@@ -0,0 +1,64 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // Swiper root element
+    const el = document.querySelector(".mySwiper");
+    if (!el) return;
+
+    // We always render a fixed number of slides (products + placeholders)
+    const totalSlides = el.querySelectorAll(".swiper-slide").length;
+
+    // Init Swiper (single instance)
+    new Swiper(".mySwiper", {
+        // 3D coverflow look
+        effect: "coverflow",
+        grabCursor: true,
+        centeredSlides: true,
+
+        // Visible slides
+        slidesPerView: 3,
+        spaceBetween: 30,
+
+        // Move one slide at a time
+        slidesPerGroup: 1,
+
+        // Infinite loop
+        loop: true,
+        loopedSlides: totalSlides,
+        loopAdditionalSlides: totalSlides,
+
+        // Auto move every  5 seconds
+        autoplay: {
+            delay: 5000,
+            disableOnInteraction: false,
+            pauseOnMouseEnter: true,
+        },
+
+        // Allow clicking links inside slides
+        preventClicks: false,
+        preventClicksPropagation: false,
+
+        // Transition speed
+        speed: 650,
+
+        // Coverflow settings
+        coverflowEffect: {
+            rotate: 0,
+            stretch: 0,
+            depth: 140,
+            modifier: 1,
+            slideShadows: false,
+        },
+
+        // Arrow navigation
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+
+        // Responsive layout
+        breakpoints: {
+            0: { slidesPerView: 1, spaceBetween: 20 },
+            768: { slidesPerView: 2, spaceBetween: 25 },
+            1024: { slidesPerView: 3, spaceBetween: 30 },
+        },
+    });
+});

backend/MarketPlace/static/styles.css

@@ -0,0 +1,264 @@
+/* ========================= */
+/* BASE */
+/* ========================= */
+
+/* Remove default browser margin */
+body {
+    margin: 0;
+}
+
+/* ========================= */
+/* NAVBAR */
+/* ========================= */
+
+/* Top navigation bar */
+.navbar {
+    height: 72px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
+    position: relative;
+    /* Needed for the bottom gradient line */
+}
+
+/* Subtle bottom line */
+.navbar::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(to right,
+            transparent,
+            rgba(0, 0, 0, 0.08),
+            transparent);
+}
+
+/* Navbar layout container */
+.nav-inner {
+    width: 100%;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Left block (logo) */
+.nav-left {
+    height: 100%;
+    max-width: 260px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+/* Logo image (keep your size) */
+.logo {
+    height: 100%;
+    max-height: 98px;
+    width: auto;
+    object-fit: contain;
+}
+
+/* Right block (icons + buttons) */
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 22px;
+}
+
+/* Icon button wrapper */
+.icon-btn {
+    background: none;
+    border: none;
+    padding: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    text-decoration: none;
+    /* So <a> looks clean */
+}
+
+/* SVG icon style */
+.icon {
+    width: 22px;
+    height: 22px;
+    stroke: #000;
+    fill: none;
+    stroke-width: 1.8;
+}
+
+/* Icon hover effect */
+.icon-btn:hover {
+    transform: translateY(-2px);
+    opacity: 0.75;
+}
+
+/* Main nav buttons (profile / login / logout) */
+.login-btn {
+    height: 40px;
+    padding: 0 18px;
+    border: 2px solid #000;
+    border-radius: 6px;
+    background: transparent;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 1px;
+    text-decoration: none;
+    color: #000;
+    display: flex;
+    align-items: center;
+    transition: all 0.25s ease;
+}
+
+/* Button hover */
+.login-btn:hover {
+    background: #000;
+    color: #fff;
+    transform: translateY(-2px);
+}
+
+
+/* ========================= */
+/* HERO CAROUSEL (Swiper) */
+/* ========================= */
+
+/* Carousel section wrapper */
+.hero-carousel {
+    width: 100%;
+    padding: 60px 0;
+    overflow: hidden;
+    position: relative;
+    /* For nav arrows positioning */
+}
+
+/* Swiper container */
+.mySwiper {
+    width: 100%;
+    margin: 0 auto;
+    padding: 20px 0 70px;
+    /* Top / bottom spacing */
+}
+
+/* Each slide card */
+.hero-carousel .swiper-slide {
+    height: 420px;
+    border-radius: 28px;
+    overflow: hidden;
+    position: relative;
+    background: #f2f2f2;
+}
+
+/* Full-cover slide image */
+.hero-carousel .swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* Slide link covers the whole card */
+.slide-link {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+    text-decoration: none;
+    color: inherit;
+}
+
+/* Text overlay inside slide */
+.slide-info {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    color: #b6ff00;
+}
+
+/* Title styling */
+.slide-info h2 {
+    font-size: 28px;
+    margin: 0;
+}
+
+/* Price styling */
+.slide-info p {
+    font-size: 18px;
+    margin: 5px 0 0;
+}
+
+/* Swiper arrows */
+.swiper-button-prev,
+.swiper-button-next {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(8px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 9999;
+    pointer-events: auto;
+
+    opacity: 0;
+    /* Hidden until hover */
+    transition: all 0.35s ease;
+}
+
+/* Arrow positions */
+.swiper-button-prev {
+    left: 24px;
+}
+
+.swiper-button-next {
+    right: 24px;
+}
+
+/* Show arrows on carousel hover */
+.hero-carousel:hover .swiper-button-prev,
+.hero-carousel:hover .swiper-button-next {
+    opacity: 1;
+}
+
+/* Remove default Swiper arrow icon */
+.swiper-button-prev::after,
+.swiper-button-next::after {
+    content: "";
+}
+
+/* Arrow hover effect */
+.swiper-button-prev:hover,
+.swiper-button-next:hover {
+    transform: translateY(-50%) scale(1.15);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
+}
+
+/* Arrow active effect */
+.swiper-button-prev:active,
+.swiper-button-next:active {
+    transform: translateY(-50%) scale(1.05);
+}
+
+/* Mobile: smaller slide height */
+@media (max-width: 768px) {
+    .hero-carousel .swiper-slide {
+        height: 400px;
+    }
+
+    .slide-info h2 {
+        font-size: 22px;
+    }
+}

backend/MarketPlace/views.py

@@ -277,20 +277,6 @@ def upgrade_success(request):
     return render(request, "upgrade_success.html")
 
 
-from django.conf import settings 
-def product_detail(request, product_id):
-    product = get_object_or_404(Product, id=product_id)
-
-    if not product.is_available or product.is_sold:
-        return render(request, "product_unavailable.html")
-
-    return render(request, "product_detail.html", {
-        "product": product,
-        "STRIPE_PUBLIC_KEY": settings.STRIPE_PUBLIC_KEY
-    })
-
-
-
 @login_required
 def delete_product(request, product_id):
     product = get_object_or_404(Product, id=product_id)
@@ -428,3 +414,5 @@ def multi_success(request):
     return render(request, "multi_success.html")
 
 
+
+

backend/requirements.txt

@@ -18,3 +18,4 @@ stripe
 supabase
 supabase-auth
 stripe
+django-environ