Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -21,267 +21,112 @@ export default function LandingPage() {
         sizing="largeSmallSizeLargeTitles"
         background="noiseDiagonalGradient"
         cardStyle="inset"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="diagonal-gradient"
         secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",
+              { name: "Rooms", id: "rooms" },
-          id: "hero",
+              { name: "Testimonials", id: "testimonials" },
-        },
+              { name: "FAQ", id: "faq" },
-        {
+            ]}
-          name: "Rooms",
+            brandName="Mawar Syariah"
-          id: "rooms",
+            button={{ text: "Book via WhatsApp", href: "https://wa.me/6282131697284" }}
-        },
+          />
-        {
+        </div>
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-      ]}
-      brandName="Mawar Syariah"
-      button={{
-        text: "Book via WhatsApp",
-        href: "https://wa.me/628123456789",
-      }}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitKpi
+          <HeroSplitKpi
-      background={{
+            background={{ variant: "radial-gradient" }}
-        variant: "radial-gradient",
+            title="Comfort & Peace in the Heart of Kepanjen"
-      }}
+            description="Guesthouse Mawar Syariah offers clean, syariah-compliant accommodation perfect for your stay in Malang. Experience true hospitality in a serene environment."
-      title="Comfort & Peace in the Heart of Malang"
+            kpis={[
-      description="Guesthouse Mawar Syariah offers clean, syariah-compliant accommodation perfect for your stay in Kepanjen. Experience true hospitality."
+              { value: "100%", label: "Syariah Compliant" },
-      kpis={[
+              { value: "Clean", label: "Certified Hygiene" },
-        {
+              { value: "Affordable", label: "Best Direct Rate" },
-          value: "100%",
+            ]}
-          label: "Syariah Compliant",
+            enableKpiAnimation={true}
-        },
+            buttons={[{ text: "Book via WhatsApp", href: "https://wa.me/6282131697284" }]}
-        {
+            imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-women-with-coffee-cup-bed_74190-9552.jpg"
-          value: "Clean",
+            mediaAnimation="slide-up"
-          label: "Certified Hygiene",
+            marqueeItems={[
-        },
+              { type: "text-icon", text: "AC Available", icon: Wind },
-        {
+              { type: "text-icon", text: "Free Wi-Fi", icon: Wifi },
-          value: "Affordable",
+              { type: "text-icon", text: "Secure Parking", icon: Car },
-          label: "Best Price Direct",
+              { type: "text-icon", text: "24/7 Security", icon: ShieldCheck },
-        },
+              { type: "text-icon", text: "Coffee Corner", icon: Coffee },
-      ]}
+            ]}
-      enableKpiAnimation={true}
+          />
-      buttons={[
+        </div>
-        {
-          text: "Book via WhatsApp",
-          href: "https://wa.me/628123456789",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-women-with-coffee-cup-bed_74190-9552.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg",
-          alt: "Guest 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
-          alt: "Guest 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-20640.jpg",
-          alt: "Guest 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-young-male-preparing-vacation-with-bag-posing-blue-wall_140725-89675.jpg",
-          alt: "Guest 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
-          alt: "Guest 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ happy guests"
-      marqueeItems={[
-        {
-          type: "text-icon",
-          text: "AC Available",
-          icon: Wind,
-        },
-        {
-          type: "text-icon",
-          text: "Free Wi-Fi",
-          icon: Wifi,
-        },
-        {
-          type: "text-icon",
-          text: "Secure Parking",
-          icon: Car,
-        },
-        {
-          type: "text-icon",
-          text: "24/7 Security",
-          icon: ShieldCheck,
-        },
-        {
-          type: "text-icon",
-          text: "Coffee Corner",
-          icon: Coffee,
-        },
-      ]}
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyOne
+          <FeatureCardTwentyOne
-      useInvertedBackground={false}
+            title="Benefits of Choosing Mawar Syariah"
-      title="Why Choose Mawar Syariah?"
+            description="We ensure a peaceful and comfortable stay for families and travelers visiting Malang."
-      description="We prioritize your comfort, privacy, and peace of mind during your stay in Malang."
+            accordionItems={[
-      accordionItems={[
+              { id: "1", title: "Syariah Compliant", content: "Strict adherence to family-friendly values for a peaceful stay." },
-        {
+              { id: "2", title: "Strategic Location", content: "Located in the heart of Kepanjen, easy access to local markets and transit." },
-          id: "1",
+              { id: "3", title: "Impeccable Hygiene", content: "High standards of cleanliness maintained daily by our professional team." },
-          title: "Syariah Compliant",
+            ]}
-          content: "We offer a comfortable, safe, and family-friendly environment adhering strictly to syariah principles.",
+            mediaAnimation="blur-reveal"
-        },
+            imageSrc="http://img.b2bpic.net/free-photo/lamp-indoors-interior-design_23-2151919436.jpg?_wi=1"
-        {
+            useInvertedBackground={false}
-          id: "2",
+          />
-          title: "Impeccable Cleanliness",
+        </div>
-          content: "Our team ensures every corner is cleaned and sanitized to the highest standards.",
-        },
-        {
-          id: "3",
-          title: "Strategic Location",
-          content: "Conveniently located in Kepanjen, near major public transport and local attractions.",
-        },
-      ]}
-      mediaAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/lamp-indoors-interior-design_23-2151919436.jpg?_wi=1"
-    />
-  </div>
 
-  <div id="rooms" data-section="rooms">
+        <div id="rooms" data-section="rooms">
-      <ProductCardThree
+          <ProductCardThree
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
+            gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+            title="Our Room Options"
-      products={[
+            description="From cozy standard rooms to family suites, find your perfect stay."
-        {
+            products={[
-          id: "room1",
+              { id: "r1", name: "Standard Room", price: "Rp 150.000", imageSrc: "http://img.b2bpic.net/free-photo/lamp-indoors-interior-design_23-2151919436.jpg?_wi=2" },
-          name: "Standard Room",
+              { id: "r2", name: "Deluxe Room", price: "Rp 250.000", imageSrc: "http://img.b2bpic.net/free-photo/soft-elegance-guest-bedding-comfortable_1203-4487.jpg?_wi=1" },
-          price: "Start from 150k",
+              { id: "r3", name: "Family Suite", price: "Rp 400.000", imageSrc: "http://img.b2bpic.net/free-photo/person-talking-video-call_23-2151228198.jpg?_wi=1" },
-          imageSrc: "http://img.b2bpic.net/free-photo/lamp-indoors-interior-design_23-2151919436.jpg?_wi=2",
+            ]}
-        },
+            useInvertedBackground={false}
-        {
+          />
-          id: "room2",
+        </div>
-          name: "Deluxe Room",
-          price: "Start from 250k",
-          imageSrc: "http://img.b2bpic.net/free-photo/soft-elegance-guest-bedding-comfortable_1203-4487.jpg?_wi=1",
-        },
-        {
-          id: "room3",
-          name: "Family Suite",
-          price: "Start from 400k",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-talking-video-call_23-2151228198.jpg?_wi=1",
-        },
-        {
-          id: "room4",
-          name: "Standard Room",
-          price: "Start from 150k",
-          imageSrc: "http://img.b2bpic.net/free-photo/lamp-indoors-interior-design_23-2151919436.jpg?_wi=3",
-        },
-        {
-          id: "room5",
-          name: "Deluxe Room",
-          price: "Start from 250k",
-          imageSrc: "http://img.b2bpic.net/free-photo/soft-elegance-guest-bedding-comfortable_1203-4487.jpg?_wi=2",
-        },
-        {
-          id: "room6",
-          name: "Family Suite",
-          price: "Start from 400k",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-talking-video-call_23-2151228198.jpg?_wi=2",
-        },
-      ]}
-      title="Our Comfortable Rooms"
-      description="Choose from our selection of well-maintained, comfortable rooms tailored to your needs."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+          <TestimonialCardTwelve
-      useInvertedBackground={false}
+            cardTitle="Guest Testimonials"
-      testimonials={[
+            cardTag="Trusted Experience"
-        {
+            cardAnimation="blur-reveal"
-          id: "1",
+            testimonials={[
-          name: "Ahmad R.",
+              { id: "t1", name: "Ibu Ratna", imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg",
+              { id: "t2", name: "Bpk. Yusuf", imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg" },
-        },
+            ]}
-        {
+            useInvertedBackground={false}
-          id: "2",
+          />
-          name: "Siti M.",
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
-        },
-        {
-          id: "3",
-          name: "Budi K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-girl-standing-summer-city_1157-20640.jpg",
-        },
-        {
-          id: "4",
-          name: "Dewi L.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-preparing-vacation-with-bag-posing-blue-wall_140725-89675.jpg",
-        },
-        {
-          id: "5",
-          name: "Hendra F.",
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
-        },
-      ]}
-      cardTitle="Loved by Guests"
-      cardTag="Reviews"
-      cardAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqDouble
+          <FaqDouble
-      textboxLayout="split"
+            title="Frequently Asked Questions"
-      useInvertedBackground={false}
+            description="Everything you need to know about Mawar Syariah."
-      faqs={[
+            faqs={[
-        {
+              { id: "q1", title: "Are guests required to provide marriage proof?", content: "Yes, for all couple bookings, marriage proof is mandatory per syariah standards." },
-          id: "q1",
+              { id: "q2", title: "Is there a curfew?", content: "No, but we appreciate guests maintaining a quiet environment for the comfort of all." },
-          title: "Do you require marriage proof?",
+            ]}
-          content: "Yes, for couples, we require valid marriage documentation per our syariah standards.",
+            faqsAnimation="slide-up"
-        },
+            textboxLayout="split"
-        {
+            useInvertedBackground={false}
-          id: "q2",
+          />
-          title: "What are the check-in times?",
+        </div>
-          content: "Check-in is at 14:00 and check-out is at 12:00.",
-        },
-        {
-          id: "q3",
-          title: "Is parking available?",
-          content: "Yes, we provide secure parking space for guests.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Find answers to common inquiries about booking and staying at Mawar Syariah."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterCard
+          <FooterCard
-      logoText="Mawar Syariah"
+            logoText="Mawar Syariah"
-      copyrightText="© 2025 | Guesthouse Mawar Syariah"
+            copyrightText="© 2025 | Mawar Syariah Kepanjen"
-    />
+          />
-  </div>
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -12,7 +12,7 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #002010;
+  --foreground: #001a0a;
   --primary-cta: #0a7039;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;