.drone.yml

@@ -3,16 +3,11 @@ type: docker
 name: deploy
 
 steps:
-  - name: install
+  - name: build
     image: node:18-alpine
     commands:
-      - npm install -D tailwindcss@^3.4.0
+      - npm ci || npm install
-
+      - npm run build || npm build
-  - name: build-css
-    image: node:18-alpine
-    commands:
-      # Generate optimized CSS from src/input.css styles/main.css
-      - npx tailwindcss -i ./src/input.css -o ./styles/main.css --minify
 
   - name: sync-files
     image: alpine:latest
@@ -21,9 +16,10 @@ steps:
         path: /host-target
     commands:
       - cp -a . /host-target
-      - chmod -R 755 /host-target
+
+      - chmod -R 777 /host-target
 
 volumes:
   - name: website-data
     host:
-      path: /root/khy/data/html
+      path: /root/khywebsite/data/html

index.html

@@ -68,62 +68,6 @@
         cursor: pointer;
       }
 
-      /* Attention animation for projects button */
-      .attention-animation {
-        animation: attention-pulse 3s ease-in-out infinite;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .attention-animation::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          rgba(255, 255, 255, 0.2),
-          transparent
-        );
-        animation: shimmer 4s ease-in-out infinite;
-      }
-
-      @keyframes attention-pulse {
-        0%,
-        100% {
-          transform: scale(1);
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-            0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        }
-        50% {
-          transform: scale(1.02);
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-            0 4px 6px -2px rgba(0, 0, 0, 0.05);
-        }
-      }
-
-      @keyframes shimmer {
-        0% {
-          left: -100%;
-        }
-        50% {
-          left: 100%;
-        }
-        100% {
-          left: 100%;
-        }
-      }
-
-      .attention-animation:hover {
-        animation: none;
-        transform: scale(1.05);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-          0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      }
-
       .product-card:hover {
         transform: translateY(-8px) scale(1.02);
         box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
@@ -390,11 +334,11 @@
           <!-- Main Content -->
           <div class="grid grid-cols-1 lg:grid-cols-2 gap-28 items-center">
             <!-- Left Side - Image -->
-            <div id="hero-image" class="relative">
+            <div class="relative">
               <img
                 src="assets/images/our_story.jpg"
                 alt="Modern office interior"
-                class="w-full h-auto rounded-lg transition-opacity duration-300"
+                class="w-full h-auto rounded-lg"
               />
               <!-- Navigation Arrow -->
               <div class="absolute top-1/2 right-4 transform -translate-y-1/2">
@@ -417,32 +361,6 @@
                   </svg>
                 </button>
               </div>
-
-              <!-- Carousel Indicators -->
-              <div
-                class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
-              >
-                <div
-                  id="carousel-indicator-0"
-                  class="w-3 h-3 bg-white rounded-full opacity-100 transition-opacity duration-300 cursor-pointer"
-                ></div>
-                <div
-                  id="carousel-indicator-1"
-                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
-                ></div>
-                <div
-                  id="carousel-indicator-2"
-                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
-                ></div>
-                <div
-                  id="carousel-indicator-3"
-                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
-                ></div>
-                <div
-                  id="carousel-indicator-4"
-                  class="w-3 h-3 bg-white rounded-full opacity-50 transition-opacity duration-300 cursor-pointer"
-                ></div>
-              </div>
             </div>
 
             <!-- Right Side - Text Content -->
@@ -468,7 +386,7 @@
 
               <button
                 id="projects-button"
-                class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm attention-animation"
+                class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
               >
                 Explore past projects
               </button>
@@ -1067,6 +985,6 @@
       </div>
     </footer>
 
-    <script src="scripts/main.js?v=4.7"></script>
+    <script src="scripts/main.js?v=1.1"></script>
   </body>
 </html>

package.json

@@ -1,11 +1,4 @@
 {
-  "name": "khy-website",
-  "version": "1.0.0",
-  "description": "KHY Furniture Website",
-  "scripts": {
-    "build": "npx tailwindcss -i ./src/input.css -o ./styles/main.css --minify",
-    "dev": "npx tailwindcss -i ./src/input.css -o ./styles/main.css --watch"
-  },
   "devDependencies": {
     "tailwindcss": "^3.4.17",
     "tailwindcss-textshadow": "^2.1.3"

scripts/main.js

@@ -661,6 +661,23 @@ function initSite() {
       });
     });
   }
+  // Story arrow button functionality
+  const storyArrowButton = document.getElementById("story-arrow-button");
+  if (storyArrowButton) {
+    storyArrowButton.addEventListener("click", function () {
+      // You can customize this action - for now, let's scroll to the products section
+      const productsSection = document.getElementById("products");
+      if (productsSection) {
+        const headerHeight = 112;
+        const targetPosition = productsSection.offsetTop - headerHeight;
+
+        window.scrollTo({
+          top: targetPosition,
+          behavior: "smooth",
+        });
+      }
+    });
+  }
 
   // Product detail page functionality
   (async function initProductDetail() {
@@ -1720,111 +1737,6 @@ if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", function () {
   initQuoteBadge();
   initAddToQuote();
-  initHeroCarousel();
 });
 
-// Hero Carousel Functionality
+// Version: 4.2 - Moved Show Less button to end of blog post content
-function initHeroCarousel() {
-  const arrowButton = document.getElementById("story-arrow-button");
-  const heroImage = document.querySelector("#hero-image img");
-
-  if (!arrowButton || !heroImage) return;
-
-  // Carousel images array
-  const carouselImages = [
-    "assets/images/our_story.jpg",
-    "assets/images/first_homepage.jpg",
-    "assets/images/conference_room.jpg",
-    "assets/images/lounge_chair.jpg",
-    "assets/images/kitchen.JPG",
-  ];
-
-  let currentImageIndex = 0;
-  let originalHeight = null;
-
-  // Function to capture original image height on first load
-  function captureOriginalHeight() {
-    if (!originalHeight) {
-      originalHeight = heroImage.offsetHeight;
-      console.log("Original image height captured:", originalHeight + "px");
-    }
-  }
-
-  // Function to update image with fade transition
-  function updateImage(newIndex) {
-    const newImage = new Image();
-    newImage.onload = function () {
-      // Fade out current image
-      heroImage.style.opacity = "0";
-
-      setTimeout(() => {
-        // Change image source
-        heroImage.src = carouselImages[newIndex];
-        heroImage.alt = `Carousel image ${newIndex + 1}`;
-
-        // Apply original height to maintain uniformity
-        if (originalHeight && newIndex !== 0) {
-          heroImage.style.height = originalHeight + "px";
-          heroImage.style.objectFit = "cover";
-        } else if (newIndex === 0) {
-          // Reset to original for the first image
-          heroImage.style.height = "auto";
-          heroImage.style.objectFit = "initial";
-        }
-
-        // Fade in new image
-        heroImage.style.opacity = "1";
-
-        // Update indicators
-        updateIndicators(newIndex);
-      }, 300);
-    };
-    newImage.src = carouselImages[newIndex];
-  }
-
-  // Function to update carousel indicators
-  function updateIndicators(activeIndex) {
-    for (let i = 0; i < 5; i++) {
-      const indicator = document.getElementById(`carousel-indicator-${i}`);
-      if (indicator) {
-        indicator.style.opacity = i === activeIndex ? "1" : "0.5";
-      }
-    }
-  }
-
-  // Arrow button click handler
-  arrowButton.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
-    updateImage(currentImageIndex);
-  });
-
-  // Indicator click handlers
-  for (let i = 0; i < 5; i++) {
-    const indicator = document.getElementById(`carousel-indicator-${i}`);
-    if (indicator) {
-      indicator.addEventListener("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        currentImageIndex = i;
-        updateImage(currentImageIndex);
-      });
-    }
-  }
-
-  // Capture original height after image loads
-  if (heroImage.complete) {
-    captureOriginalHeight();
-  } else {
-    heroImage.addEventListener("load", captureOriginalHeight);
-  }
-
-  // Auto-advance carousel every 5 seconds
-  setInterval(() => {
-    currentImageIndex = (currentImageIndex + 1) % carouselImages.length;
-    updateImage(currentImageIndex);
-  }, 5000);
-}
-
-// Version: 4.7 - Use original image height as standard for carousel uniformity