added admin page

src/style.css

@@ -204,35 +204,12 @@ img {
   transition: transform 0.5s ease-in-out;
 }
 
-.carousel-slide {
-  flex: 0 0 100%;
-  width: 100%;
-  height: 100%;
-}
-
-.carousel-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.carousel-slide .placeholder-content {
   color: var(--white);
   text-align: center;
   padding: 20px;
 }
 
-#slide1 {
-  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-}
-
-#slide2 {
-  background: linear-gradient(135deg, #2d5a27 0%, #1a3a15 100%);
-}
-
-#slide3 {
-  background: linear-gradient(135deg, var(--accent) 0%, #8a6e2f 100%);
-}
-
 .placeholder-content h2 {
   font-size: 2.4rem;
   margin-bottom: 8px;
@@ -337,6 +314,103 @@ img {
   margin-top: 4px;
 }
 
+/* ===== Carousel Slide Backgrounds ===== */
+.carousel-slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-slide-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.carousel-slide-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.carousel-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 10, 60, 0.55);
+  z-index: 1;
+}
+
+.carousel-slide .placeholder-content {
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+}
+
+/* ===== Photo Filmstrip ===== */
+.filmstrip-section {
+  padding: 32px 0 0;
+  background: var(--white);
+  overflow: hidden;
+}
+
+.filmstrip-title {
+  font-size: 1.6rem;
+  color: var(--gray-900);
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.filmstrip-track {
+  display: flex;
+  width: max-content;
+  animation: filmstrip-scroll 40s linear infinite;
+}
+
+.filmstrip-track:hover {
+  animation-play-state: paused;
+}
+
+.filmstrip-scroll {
+  display: flex;
+  gap: 10px;
+  padding-right: 10px;
+}
+
+.filmstrip-frame {
+  flex-shrink: 0;
+  width: 220px;
+  height: 150px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.filmstrip-frame:hover {
+  transform: scale(1.06);
+  box-shadow: var(--shadow-lg);
+  z-index: 1;
+}
+
+.filmstrip-frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@keyframes filmstrip-scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
 /* ===== Tabs ===== */
 .tabs-section {
   padding: 0 20px;
@@ -351,7 +425,13 @@ img {
   display: flex;
   border-bottom: 2px solid var(--gray-200);
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.tab-nav::-webkit-scrollbar {
+  display: none;
 }
 
 .tab-btn {
@@ -1117,6 +1197,11 @@ img {
     font-size: 1rem;
   }
 
+  .filmstrip-frame {
+    width: 180px;
+    height: 120px;
+  }
+
   .footer-inner {
     grid-template-columns: 1fr;
     text-align: center;
@@ -1161,6 +1246,11 @@ img {
     height: 40px;
   }
 
+  .filmstrip-frame {
+    width: 150px;
+    height: 100px;
+  }
+
   .carousel {
     aspect-ratio: 4 / 3;
   }