Some UI changes

Presentation/Nop.Web/App_Data/appsettings.json

@@ -1,6 +1,6 @@
 {
   "ConnectionStrings": {
-    "ConnectionString": "Data Source=195.26.231.218;Initial Catalog=FruitBank_DEV;Integrated Security=False;Persist Security Info=False;User ID=sa;Password=v6f_?xNfg9N1;Trust Server Certificate=True",
+    "ConnectionString": "Data Source=195.26.231.218;Initial Catalog=FruitBank_PROD;Integrated Security=False;Persist Security Info=False;User ID=sa;Password=v6f_?xNfg9N1;Trust Server Certificate=True",
     "DataProvider": "sqlserver",
     "SQLCommandTimeout": null,
     "WithNoLock": false

Presentation/Nop.Web/Themes/CarHaven/Content/css/styles.css

@@ -19,6 +19,7 @@
   --accent-lime: #8cb63c;
   --text-primary: #2c2c2c;
   --text-muted: #6b7c6e;
+  --warm-bg: #faebd7;
   --theme-border-radius: 8px;
   --itembox-picture-radius: 8px;
   --show-product-box-buttons: block; /* block or none */
@@ -2241,7 +2242,7 @@ label, label + * {
   text-transform: uppercase;
 }
 .item-box .product-box-add-to-cart-button::before {
-  content: "\f1b9";
+  content: "\f07a";
   font-family: FontAwesome;
   font-size: 16px;
   line-height: 21px;
@@ -2974,7 +2975,7 @@ label, label + * {
 }
 .overview .add-to-cart-button::before,
 .variant-overview .add-to-cart-button::before {
-  content: "\f1b9";
+  content: "\f07a";
   font-family: FontAwesome;
   font-size: 15px;
   line-height: 21px;
@@ -7673,6 +7674,384 @@ html.lenis, html.lenis body {
   letter-spacing: 1px;
 }
 
+/* =============================================
+   HOMEPAGE PRODUCTS SECTION (warm bg)
+   ============================================= */
+
+.homepage-products-section {
+  background: var(--warm-bg);
+  position: relative;
+  z-index: 5;
+  padding: 60px 0 40px;
+}
+
+/* Product cards need white bg to match photo backgrounds */
+.homepage-products-section .item-box {
+  background: #fff;
+}
+
+/* =============================================
+   IMMERSIVE FEATURES — "MIÉRT A FRUITBANK"
+   ============================================= */
+
+.fb-features {
+  position: relative;
+  z-index: 5;
+  background: var(--dark);
+}
+
+/* Section header */
+.fb-features-header {
+  text-align: center;
+  padding: 100px 20px 60px;
+  background: var(--dark);
+}
+
+.fb-features-header h2 {
+  font-family: 'Playfair Display', serif;
+  font-size: clamp(32px, 5vw, 56px);
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 16px;
+}
+
+.fb-features-header h2 em {
+  color: var(--active-color);
+  font-style: italic;
+}
+
+.fb-features-header p {
+  font-size: clamp(16px, 2vw, 20px);
+  color: rgba(255,255,255,0.5);
+  letter-spacing: 1px;
+}
+
+/* Individual feature row */
+.fb-feature {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 70vh;
+  overflow: hidden;
+}
+
+.fb-feature[data-align="right"] {
+  direction: rtl;
+}
+
+.fb-feature[data-align="right"] > * {
+  direction: ltr;
+}
+
+/* Image side */
+.fb-feature-img {
+  position: relative;
+  overflow: hidden;
+}
+
+.fb-feature-img img {
+  width: 100%;
+  height: 120%;  /* extra height for parallax travel */
+  object-fit: cover;
+  display: block;
+  transition: filter 0.5s ease;
+  will-change: transform;
+}
+
+.fb-feature:hover .fb-feature-img img {
+  filter: brightness(1.08);
+}
+
+/* Content side */
+.fb-feature-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 60px clamp(40px, 6vw, 100px);
+  background: var(--dark);
+}
+
+.fb-feature-num {
+  font-family: 'Playfair Display', serif;
+  font-size: clamp(48px, 6vw, 80px);
+  font-weight: 700;
+  color: rgba(255,255,255,0.06);
+  line-height: 1;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.fb-feature-content h3 {
+  font-family: 'Playfair Display', serif;
+  font-size: clamp(24px, 3vw, 36px);
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.3;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.fb-feature-content h3::after {
+  content: '';
+  display: block;
+  width: 50px;
+  height: 3px;
+  background: var(--active-color);
+  margin-top: 20px;
+  border-radius: 2px;
+}
+
+.fb-feature-content p {
+  font-size: clamp(15px, 1.5vw, 18px);
+  color: rgba(255,255,255,0.65);
+  line-height: 1.8;
+  max-width: 480px;
+}
+
+/* Alternating subtle bg tones */
+.fb-feature:nth-child(odd) .fb-feature-content {
+  background: var(--dark);
+}
+
+.fb-feature:nth-child(even) .fb-feature-content {
+  background: #162b1c;
+}
+
+/* Mobile: stack vertically */
+@media (max-width: 768px) {
+  .fb-feature {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .fb-feature[data-align="right"] {
+    direction: ltr;
+  }
+
+  .fb-feature-img {
+    height: 50vw;
+    min-height: 220px;
+  }
+
+  .fb-feature-img img {
+    height: 100%;  /* no parallax overshoot on mobile */
+  }
+
+  .fb-feature-content {
+    padding: 40px 24px 50px;
+  }
+
+  .fb-feature-num {
+    font-size: 48px;
+    margin-bottom: 8px;
+  }
+
+  .fb-features-header {
+    padding: 60px 20px 40px;
+  }
+}
+
+/* Tablet */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .fb-feature {
+    min-height: 50vh;
+  }
+
+  .fb-feature-content {
+    padding: 40px 40px;
+  }
+}
+
+/* =============================================
+   PRODUCT CARD MODERNIZATION
+   ============================================= */
+
+.html-home-page .item-box {
+  background: #fff;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  border: 1px solid rgba(0,0,0,0.04);
+  padding-bottom: 12px;
+}
+
+.html-home-page .item-box:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+}
+
+/* Picture area */
+.html-home-page .item-box .picture {
+  margin: 0;
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+
+.html-home-page .item-box .picture a img {
+  border-radius: 0;
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.html-home-page .item-box:hover .picture a img {
+  transform: scale(1.06);
+}
+
+/* Details area */
+.html-home-page .item-box .details {
+  padding: 16px 18px 8px;
+}
+
+.html-home-page .item-box .product-title {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  min-height: 42px;
+  margin-bottom: 10px;
+  color: var(--dark);
+}
+
+.html-home-page .item-box .product-title a:hover {
+  color: var(--theme-color);
+}
+
+.html-home-page .item-box .actual-price {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--theme-color);
+}
+
+.html-home-page .item-box .old-price {
+  font-size: 14px;
+}
+
+/* Buttons area */
+.html-home-page .item-box .buttons {
+  padding: 0 18px;
+  gap: 8px;
+}
+
+.html-home-page .item-box button {
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: none;
+  height: 42px;
+  transition: all 0.25s ease;
+  box-shadow: none;
+}
+
+.html-home-page .item-box .product-box-add-to-cart-button {
+  background: var(--theme-color);
+  font-size: 14px;
+}
+
+.html-home-page .item-box .product-box-add-to-cart-button:hover {
+  background: var(--dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(45,122,58,0.3);
+}
+
+.html-home-page .item-box .add-to-compare-list-button {
+  background: var(--light-bg);
+  color: var(--dark);
+  font-size: 14px;
+}
+
+.html-home-page .item-box .add-to-compare-list-button:hover {
+  background: #e8ece5;
+  color: var(--dark);
+}
+
+/* Wishlist heart */
+.html-home-page .item-box .add-to-wishlist-button {
+  top: 14px;
+  right: 14px;
+  width: 36px;
+  height: 36px;
+  background: rgba(255,255,255,0.9) !important;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.html-home-page .item-box .add-to-wishlist-button:hover {
+  background: #fff !important;
+  transform: scale(1.1);
+}
+
+.html-home-page .item-box .add-to-wishlist-button::before {
+  color: var(--accent-warm);
+}
+
+/* Product grid section title */
+.html-home-page .product-grid .title {
+  font-family: 'Playfair Display', serif;
+  font-size: clamp(28px, 4vw, 42px);
+  font-weight: 700;
+  border-bottom: none;
+  padding-bottom: 8px;
+  position: relative;
+  text-align: center;
+  text-transform: none;
+  color: var(--dark);
+  margin-bottom: 40px;
+}
+
+.html-home-page .product-grid .title::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 3px;
+  background: var(--active-color);
+  margin: 14px auto 0;
+  border-radius: 2px;
+}
+
+/* =============================================
+   SCROLL REVEAL ANIMATIONS
+   ============================================= */
+
+/* Initial hidden states — GSAP will animate these */
+.sr-fade-up {
+  opacity: 0;
+  transform: translateY(60px);
+}
+
+.sr-fade-left {
+  opacity: 0;
+  transform: translateX(-80px);
+}
+
+.sr-fade-right {
+  opacity: 0;
+  transform: translateX(80px);
+}
+
+.sr-scale-in {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.sr-stagger-item {
+  opacity: 0;
+  transform: translateY(50px);
+}
+
+/* Prevent horizontal scrollbar from slide-in animations */
+.html-home-page .master-wrapper-content {
+  overflow-x: hidden;
+}
+
 /* =============================================
    MOBILE — VAULT + FORKLIFT
    ============================================= */
@@ -7717,4 +8096,30 @@ html.lenis, html.lenis body {
   .forklift-body {
     transform: scale(0.7);
   }
+
+  /* Product cards mobile */
+  .html-home-page .item-box {
+    border-radius: 12px;
+    padding-bottom: 8px;
+  }
+
+  .html-home-page .item-box .details {
+    padding: 12px 14px 6px;
+  }
+
+  .html-home-page .item-box .buttons {
+    padding: 0 14px;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .html-home-page .item-box button {
+    height: 38px;
+    border-radius: 8px;
+  }
+
+  .html-home-page .item-box .product-box-add-to-cart-button,
+  .html-home-page .item-box .add-to-compare-list-button {
+    width: 100%;
+  }
 }

Presentation/Nop.Web/Themes/CarHaven/Views/Home/Index.cshtml

@@ -32,15 +32,74 @@
              ========================================== -->
         <div class="vault-scroll-container" id="vaultScrollContainer"></div>
 
-        <!-- Transition: vault → product content -->
+        
-        <div class="vault-to-content-transition"></div>
 
         <!-- ==========================================
              STANDARD HOMEPAGE CONTENT (solid bg)
              ========================================== -->
-        <div style="background: #fff; position: relative; z-index: 5;">
+        <div style="background: #fff; position: relative; z-index: 5; padding-top: 70px;">
             @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageTop })
-            @await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "HomepageText" })
+            @* Topic block replaced by immersive feature section below *@
+        </div>
+
+        <!-- ==========================================
+             MIÉRT A FRUITBANK — IMMERSIVE FEATURES
+             ========================================== -->
+        <section class="fb-features" id="fbFeatures">
+            <div class="fb-features-header">
+                <h2>Miért a <em>FruitBank</em>?</h2>
+                <p>Nagykereskedelmi megoldás, ami másképp működik.</p>
+            </div>
+
+            <div class="fb-feature" data-align="left">
+                <div class="fb-feature-img">
+                    <img src="/images/uploaded/freshness.jpg" alt="Farmról frissen" loading="lazy" />
+                </div>
+                <div class="fb-feature-content">
+                    <span class="fb-feature-num">01</span>
+                    <h3>Farmról frissen, minden nap</h3>
+                    <p>A megbízható termelőktől történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban és kiváló ízminőségben érkeznek Önhöz.</p>
+                </div>
+            </div>
+
+            <div class="fb-feature" data-align="right">
+                <div class="fb-feature-img">
+                    <img src="/images/uploaded/delivery.jpg" alt="Másnapi kiszállítás" loading="lazy" />
+                </div>
+                <div class="fb-feature-content">
+                    <span class="fb-feature-num">02</span>
+                    <h3>Másnapi nagykereskedelmi kiszállítás</h3>
+                    <p>A hőmérséklet-szabályozott logisztika biztosítja, hogy rendelése minden alkalommal frissen és pontosan érkezzen meg.</p>
+                </div>
+            </div>
+
+            <div class="fb-feature" data-align="left">
+                <div class="fb-feature-img">
+                    <img src="/images/uploaded/variety.jpg" alt="Páratlan választék" loading="lazy" />
+                </div>
+                <div class="fb-feature-content">
+                    <span class="fb-feature-num">03</span>
+                    <h3>Páratlan választék</h3>
+                    <p>A mindennapi alapanyagoktól az egzotikus különlegességekig – egész évben több mint 500 féle gyümölcs és zöldség kínálatában.</p>
+                </div>
+            </div>
+
+            <div class="fb-feature" data-align="right">
+                <div class="fb-feature-img">
+                    <img src="/images/uploaded/sustainable.jpg" alt="Fenntartható forrásból" loading="lazy" />
+                </div>
+                <div class="fb-feature-content">
+                    <span class="fb-feature-num">04</span>
+                    <h3>Fenntartható forrásból</h3>
+                    <p>Olyan termelőkkel dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- ==========================================
+             STANDARD HOMEPAGE CONTENT continues
+             ========================================== -->
+        <div class="homepage-products-section">
             @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageBeforeCategories })
             @await Component.InvokeAsync(typeof(HomepageCategoriesViewComponent))
             @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageBeforeProducts })
@@ -514,6 +573,152 @@
         // Start loops
         requestAnimationFrame(mainLoop);
         requestAnimationFrame(forkliftLoop);
+
+        // =============================================
+        // SCROLL REVEAL ANIMATIONS
+        // Uses GSAP ScrollTrigger (already loaded)
+        // =============================================
+        (function initScrollReveal() {
+            // --- Section titles ---
+            document.querySelectorAll('.product-grid .title, .home-page-product-grid .title').forEach(function(el) {
+                el.classList.add('sr-fade-up');
+            });
+
+            // --- Immersive features header ---
+            var fbHeader = document.querySelector('.fb-features-header');
+            if (fbHeader) fbHeader.classList.add('sr-fade-up');
+
+            // --- Immersive feature rows: image parallax + content reveal ---
+            document.querySelectorAll('.fb-feature').forEach(function(feature) {
+                var img = feature.querySelector('.fb-feature-img img');
+                var content = feature.querySelector('.fb-feature-content');
+                var align = feature.getAttribute('data-align');
+
+                // Parallax on image
+                if (img) {
+                    gsap.fromTo(img, 
+                        { yPercent: -10 },
+                        {
+                            yPercent: 10,
+                            ease: 'none',
+                            scrollTrigger: {
+                                trigger: feature,
+                                start: 'top bottom',
+                                end: 'bottom top',
+                                scrub: 1
+                            }
+                        }
+                    );
+                }
+
+                // Content slide in from the side
+                if (content) {
+                    var xFrom = align === 'right' ? 60 : -60;
+                    gsap.from(content, {
+                        x: xFrom,
+                        opacity: 0,
+                        duration: 1,
+                        ease: 'power3.out',
+                        scrollTrigger: {
+                            trigger: feature,
+                            start: 'top 75%',
+                            toggleActions: 'play none none none'
+                        }
+                    });
+                }
+            });
+
+            // --- Product cards (staggered separately, not sr-fade-up) ---
+            document.querySelectorAll('.product-grid .item-box').forEach(function(el) {
+                el.classList.add('sr-stagger-item');
+            });
+
+            // --- Footer (staggered separately) ---
+            document.querySelectorAll('.footer-block').forEach(function(el) {
+                el.classList.add('sr-stagger-item');
+            });
+
+            // ---- Animate all sr-fade-up elements ----
+            gsap.utils.toArray('.sr-fade-up').forEach(function(el) {
+                gsap.to(el, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.8,
+                    ease: 'power3.out',
+                    scrollTrigger: {
+                        trigger: el,
+                        start: 'top 88%',
+                        toggleActions: 'play none none none'
+                    }
+                });
+            });
+
+            // ---- Animate sr-fade-left elements ----
+            gsap.utils.toArray('.sr-fade-left').forEach(function(el) {
+                gsap.to(el, {
+                    opacity: 1,
+                    x: 0,
+                    duration: 0.9,
+                    ease: 'power3.out',
+                    scrollTrigger: {
+                        trigger: el,
+                        start: 'top 88%',
+                        toggleActions: 'play none none none'
+                    }
+                });
+            });
+
+            // ---- Animate sr-fade-right elements ----
+            gsap.utils.toArray('.sr-fade-right').forEach(function(el) {
+                gsap.to(el, {
+                    opacity: 1,
+                    x: 0,
+                    duration: 0.9,
+                    ease: 'power3.out',
+                    scrollTrigger: {
+                        trigger: el,
+                        start: 'top 88%',
+                        toggleActions: 'play none none none'
+                    }
+                });
+            });
+
+            // ---- Stagger product cards within each grid ----
+            document.querySelectorAll('.product-grid').forEach(function(grid) {
+                var cards = grid.querySelectorAll('.item-box.sr-stagger-item');
+                if (cards.length === 0) return;
+                gsap.to(cards, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.7,
+                    ease: 'power3.out',
+                    stagger: 0.1,
+                    scrollTrigger: {
+                        trigger: grid,
+                        start: 'top 85%',
+                        toggleActions: 'play none none none'
+                    }
+                });
+            });
+
+            // ---- Stagger footer blocks ----
+            var footerBlocks = document.querySelectorAll('.footer-block.sr-stagger-item');
+            if (footerBlocks.length > 0) {
+                gsap.to(footerBlocks, {
+                    opacity: 1,
+                    y: 0,
+                    duration: 0.6,
+                    ease: 'power2.out',
+                    stagger: 0.12,
+                    scrollTrigger: {
+                        trigger: footerBlocks[0],
+                        start: 'top 90%',
+                        toggleActions: 'play none none none'
+                    }
+                });
+            }
+        })();
+
     });
 
 })();