update

components/Header/HeaderImage.tsx

@@ -32,8 +32,8 @@ export default function HeaderImage({ dat }) {
       >
         <div className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed">
           <div className="flex max-h-full min-h-full items-center justify-center">
-            <div className="text-white">
+            <div className="text-white px-12 sm:px-2">
-              <h1 style={{textShadow: '0 0 20px #000'}} className="mb-5 text-center text-6xl font-bold leading-tight md:text-center md:text-7xl md:leading-none lg:text-6xl">
+              <h1 style={{textShadow: '0 0 20px #000'}} className="mb-5 text-center sm:text-6xl text-5xl font-bold leading-tight md:text-center md:text-7xl md:leading-none lg:text-6xl">
                 {dat.title}
               </h1>
               <h2 style={{ textShadow: '0 0 20px #000' }} className="mb-6 font-sans text-lg font-semibold uppercase tracking-widest">

components/Layout.tsx

@@ -14,6 +14,12 @@ export default function Layout({
 }) {
   return (
     <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap"
+        rel="stylesheet"
+      />
       <div className="min-h-screen">
         <AlertBanner preview={preview} loading={loading} />
         <Navbar />
@@ -23,3 +29,5 @@ export default function Layout({
     </>
   )
 }
+
+

components/Navbar/MobileMenu.tsx

@@ -99,6 +99,18 @@ function MobileMenu() {
                 The Story
               </Link>
             </li>
+            <li
+              className="block list-none odd:bg-white"
+              style={{ borderBottom: '1px solid #ddd' }}
+            >
+              <Link
+                onClick={hideMenus}
+                href="/pages/wedding"
+                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
+              >
+                Wedding
+              </Link>
+            </li>
             {/* <li
               className="block list-none odd:bg-white"
               style={{ borderBottom: '1px solid #ddd' }}
@@ -129,25 +141,14 @@ function MobileMenu() {
             >
               <Link
                 onClick={hideMenus}
-                
+
                 href="/media-corner/page/1"
                 className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
               >
                 News & Media
               </Link>
             </li>
-            <li
+
-              className="block list-none odd:bg-white"
-              style={{ borderBottom: '1px solid #ddd' }}
-            >
-              <Link
-                onClick={hideMenus}
-                href="/pages/the-story"
-                className="mainmenu block px-10 py-3 text-center font-Inter text-base font-light tracking-normal text-stone-600 duration-150 ease-in-out hover:bg-yellow-500 hover:text-white"
-              >
-                Wedding
-              </Link>
-            </li>
           </ul>
           <button
             onClick={hideMenus}

components/Navbar/NavPageItems.tsx

@@ -30,26 +30,26 @@ function NavPageItems() {
     <div className="font-sans">
       <ul className="space-x-7">
         {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
-          <Link href="/pages/the-story" className="text-stone-600 hover:text-yellow-500 font-light text-xl tracking-tight ease-in duration-150 mainmenu font-sans">The Story</Link>
+          <Link href="/pages/the-story" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu font-sans">The Story</Link>
         </li> */}
         <li className="even:bg-slate-50 inline list-none odd:bg-white">
           <Link
             href="/pages/the-cultural-heritage"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
           >
             Cultural Heritage
           </Link>
         </li>
         {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
-          <Link href="/pages/the-park" className="text-stone-600 hover:text-yellow-500 font-light text-xl tracking-tight ease-in duration-150 mainmenu">The Park</Link>
+          <Link href="/pages/the-park" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">The Park</Link>
         </li> */}
         {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
-          <Link href="/pages/function" className="text-stone-600 hover:text-yellow-500 font-light text-xl tracking-tight ease-in duration-150 mainmenu">Function</Link>
+          <Link href="/pages/function" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">Function</Link>
         </li> */}
         <li className="even:bg-slate-50 inline list-none odd:bg-white">
           <Link
             href="/pages/the-events"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
           >
             The Events
           </Link>
@@ -57,21 +57,29 @@ function NavPageItems() {
         <li className="even:bg-slate-50 inline list-none odd:bg-white">
           <Link
             href="/pages/the-story"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
           >
             The Story
           </Link>
         </li>
+        <li className="even:bg-slate-50 inline list-none odd:bg-white">
+          <Link
+            href="/pages/wedding"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+          >
+            Wedding
+          </Link>
+        </li>
         {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
-          <Link href="/pages/the-cultural-map" className="text-stone-600 hover:text-yellow-500 font-light text-xl tracking-tight ease-in duration-150 mainmenu">Map GWK Cultural Park</Link>
+          <Link href="/pages/the-cultural-map" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">Map GWK Cultural Park</Link>
         </li> */}
         {/* <li className='list-none inline odd:bg-white even:bg-slate-50'>
-          <Link href="/pages/faq" className="text-stone-600 hover:text-yellow-500 font-light text-xl tracking-tight ease-in duration-150 mainmenu">FAQ</Link> 
+          <Link href="/pages/faq" className="text-stone-600 hover:text-yellow-500  tracking-tight ease-in duration-150 mainmenu">FAQ</Link> 
         </li> */}
         <li className="even:bg-slate-50 inline list-none odd:bg-white">
           <Link
             href="/monthly-release/page/1"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
           >
             Monthly Update
           </Link>
@@ -79,19 +87,12 @@ function NavPageItems() {
         <li className="even:bg-slate-50 inline list-none odd:bg-white">
           <Link
             href="/media-corner/page/1"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+            className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
           >
             News & Media
           </Link>
         </li>
-        <li className="even:bg-slate-50 inline list-none odd:bg-white">
+
-          <Link
-            href="/pages/wedding"
-            className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
-          >
-            Wedding
-          </Link>
-        </li>
         {/* {navMenus.map(function (d, i) {
           return (
             <li
@@ -100,7 +101,7 @@ function NavPageItems() {
             >
               <Link
                 href={'/pages/id/' + d.slug}
-                className="mainmenu text-xl font-light tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
+                className="mainmenu  tracking-tight text-stone-600 duration-150 ease-in-out hover:text-yellow-500"
               >
                 {d.title}
               </Link>

components/Navbar/Navbar.tsx

@@ -35,7 +35,7 @@ export default function Navbar() {
               </Link>
             </div>
             <div className="hidden flex-auto sm:block sm:w-full">
-              <div className="pt-8 text-left ">
+              <div className="pt-10 text-left ">
                 <NavPageItems />
               </div>
             </div>

pages/pages/wedding.tsx

@@ -2,13 +2,15 @@ import axios from 'axios'
 import React, { useEffect, useState } from 'react'
 import { Fade, Slide } from 'react-awesome-reveal'
 import { NextSeo } from 'next-seo'
-
+import Link from 'next/link'
 import HeaderImage from '../../components/Header/HeaderImage'
 import Container from 'components/BlogContainer'
-import CTA from 'components/Cta'
 import Layout from 'components/Layout'
-import { GetServerSideProps } from 'next'
+import { GetServerSideProps, } from 'next'
 import { getWedding } from 'pages/api/wedding'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faWhatsapp } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 
 export interface TheEventsProps {
     preview?: boolean
@@ -70,7 +72,38 @@ const ContentTag2 = ({ dat }: any) => {
                             }
                         }
 
-                        return <div className={i == 0 ? 'text-paragraph mb-10 font-semibold text-2xl' : 'text-paragraph mb-5 font-sans font-light text-base '} key={cx} style={styles}>{i > 2 ? ' - ' : ''}{x.text}</div>
+                        return <div className={i == 0 ?
+                            'text-paragraph mb-10 font-semibold text-2xl'
+                            : 'text-paragraph mb-0 font-sans font-light text-base '
+                        } key={cx} style={styles}>
+                            {i == 0 ? <>
+                                <div dangerouslySetInnerHTML={{
+                                    __html: `
+                                    <h2 class="text-6xl text-yellow-500 mr-[100px] mb-[-20px]" style='font-family:"Pinyon Script", cursive'>${x.text.split(" ").shift()}</h2>
+                                    <p class="text-xl font-light">${(function () {
+                                            let o = x.text.split(" ")
+                                            o.shift();
+                                            return o.join(' ')
+                                        })()}</p>
+                                ` }}></div>
+                            </> : <>
+                                <div dangerouslySetInnerHTML={{
+                                    __html: `
+                                        ${i > 2 && x.text.replace(/\ /g, '') != '' ? `
+                                            <div style="display: flex; margin-bottom:0; padding-bottom:0;">
+                                                <!-- <div>&bull;</div> -->
+                                                <div style="padding:0.5em 0 1em; flex:1; border-bottom: 1px dashed #ccc;">${x.text}</div>
+                                            </div>    
+                                            ` : `
+                                            ${x.text}    
+                                        `}
+                                    ` }}>
+
+                                </div>
+
+                            </>}
+
+                        </div>
                     }
                     return <></>
                 })(x)
@@ -80,7 +113,7 @@ const ContentTag2 = ({ dat }: any) => {
 }
 
 export default function Wedding(props) {
-    console.log(props.dt)
+    //console.log(props.dt)
     const { loading, preview } = props
     const [dataHeader, setDataHeader] = useState({})
     const [dataEvent, dataContentSet] = useState([])
@@ -127,11 +160,11 @@ export default function Wedding(props) {
                     <Container>
                         <div className='mt-10 p-5 bg-white'>
 
-                            <div className='mx-auto w-2/3 text-center'>
+                            <div className='mx-auto sm:w-2/3 w-full text-center'>
                                 <h2 className="heading-h2 mb-14 text-4xl font-semibold sm:text-5xl">{props.dt?.descriptionTitle}</h2>
                             </div>
 
-                            <div className='mx-auto w-2/3 text-center'>
+                            <div className='mx-auto sm:w-2/3 w-full text-center'>
                                 <ContentTag dat={props.dt?.content} />
                             </div>
 
@@ -144,22 +177,22 @@ export default function Wedding(props) {
                                 ))}
                             </div>
                         </div>
-                        <div className='mt-10 p-5 bg-white text-center'>
+
-                            <button className="spacong animate-fade-up rounded-md bg-yellow-600 px-10 py-5 font-sans text-xl font-bold leading-7 tracking-wide text-stone-50 shadow-sm duration-300 ease-in animate-delay-[600ms] animate-duration-[1200ms] animate-once hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500">
+                        <div className='mt-10 p-5 bg-white text-center w-full'>
-                                See More Photo in Gallery
+                            <Link href={`https://gwkculturalpark.pixieset.com/enchantedweddingatgwkculturalpark/`} target='_blank' className="animate-fade-up rounded-md bg-yellow-600 px-5 py-4 font-sans text-xs sm:text-base font-semibold leading-7 tracking-wide text-stone-50 shadow-sm duration-300 ease-in animate-delay-[600ms] animate-duration-[1200ms] animate-once hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500">
-                            </button>
+                                Enchanted Wedding in GWK Cultural Park
+                            </Link>
 
                         </div>
-                        <div className='grid grid-cols-2 mt-10 p-5 bg-white gap-10'>
+                        <div className='grid grid-cols-1 md:grid-cols-2 mt-10 p-5 bg-white gap-10'>
                             {Array.isArray(props.dt?.package) && props.dt?.package.map((v: any, i: any) => (
                                 <div key={i}>
-                                    <div className='bg-stone-50 p-10 h-full rounded-md'>
+                                    <div className='bg-white hover:bg-stone-50 p-10 h-full rounded-md border'>
                                         <div>
-                                            <div className=""><ContentTag2 dat={v?.content} /></div>
+                                            <div className="text-center"><ContentTag2 dat={v?.content} /></div>
-                                            
                                         </div>
                                         <div className='text-center py-10'>
-                                            <a className="spacong animate-fade-up rounded-md bg-yellow-600 px-10 py-5 font-sans text-base font-bold leading-7 tracking-wide text-stone-50 shadow-sm  hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500" href={v?.fileWedding}>
+                                            <a className="animate-fade-up rounded-md bg-yellow-600 px-5 py-2 font-sans text-base font-medium leading-7 tracking-wide text-stone-50 shadow-sm  hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500" href={v?.fileWedding}>
                                                 See Details
                                             </a>
                                         </div>
@@ -167,20 +200,22 @@ export default function Wedding(props) {
                                 </div>
                             ))}
                         </div>
-                        
+
-                        {/* <div className='grid grid-cols-1 mt-10 p-5 bg-white gap-10'>
+                        <div className='grid grid-cols-1 mt-10 mb-10 p-5 bg-white gap-10'>
-                            <h1 className='text-center text-5xl'>Connect with us to get extraordinary offer</h1>
+                            <h3 className='text-center font-sans font-middle text-xl sm:text-3xl text-stone-600'>Connect With Us to Get Extraordinary Offer</h3>
-                            <div className='grid grid-cols-2'>
+                            <div className='flex justify-center'>
-                                <div className='text-center'>
+                                <div className='w-[600px]'>
-                                    <i></i>
+                                    <div className='text-center text-stone-600'>
-                                    <span>62 896-1059-5452</span>
+                                        <FontAwesomeIcon icon={faWhatsapp} />
-                                </div>
+                                        <span className='font-sans' style={{ marginLeft: '10px' }}>62 896-1059-5452</span>
-                                <div className='text-center'>
+                                    </div>
-                                    <i></i>
+                                    <div className='text-center text-stone-600'>
-                                    <span>bookmywedding@gwkbali.com</span>
+                                        <FontAwesomeIcon icon={faEnvelope} />
+                                        <span className='font-sans' style={{ marginLeft: '10px' }}>bookmywedding@gwkbali.com</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
                     </Container>
                 </Layout>
@@ -199,7 +234,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
             title: dt.title,
             subTitle: dt.subtitle,
             imageUrl: dt.coverImageUrl,
-            hideButton:true
+            hideButton: true
         };
 
         return {

schemas/wedding/wedding.ts

@@ -4,6 +4,7 @@ import { defineField, defineType } from 'sanity'
 
 import weddingpost from './weddingpost'
 import weddingPackage from './weddingPackage'
+import gallery from 'schemas/gallery'
 
 export default {
     name: 'WeddingSection',
@@ -50,16 +51,22 @@ export default {
         }),
         {
             name: 'Wedding',
-            title: 'Wedding Posts',
+            title: 'Wedding Gallery',
-            description: 'Pilih content untuk halaman',
+            description: 'Tambahkan gallery wedding',
             type: 'array',
             of: [
                 {
                     type: 'reference',
-                    to: { type: weddingpost.name },
+                    to: { type: gallery.name },
                 },
             ],
         },
+        defineField({
+            title: 'Pixieset URL',
+            name: 'pixiesetURL',
+            type: 'url',
+            description: 'Alamat album di Pixieset',
+        }),
         {
             name: 'Weddingpackage',
             title: 'Wedding Package',

schemas/wedding/weddingpost.ts

@@ -30,16 +30,12 @@ export default defineType({
         }),
         defineField({
             name: 'coverImage',
-            title: 'Thumbnail',
+            title: 'Image',
-            type: 'reference',
+            description: 'Image untuk cover',
-            to: [{ type: 'gallery' }],
+            type: 'image',
-            fields: [
+            options: {
-                {
+                hotspot: true,
-                    type: 'string',
+            },
-                    title: 'Alternative text',
-                    name: 'alt',
-                },
-            ],
         }),
         defineField({
             name: 'posterImage',