update ui to match data

cms/src/routes/+page.svelte

@@ -3,7 +3,6 @@
 	export let data: PageData;
 	const qualify_exams = data.qualify_exams;
     const competitive_exams = data.competitive_exams;
-    const detail = data.detail;
 	const patternVue = "/images/pattern.png";
 	const sel1 = "/images/sel1.png";
 	const sel2 = "/images/sel2.png";
@@ -13,7 +12,7 @@
 	const c3 = "/images/c3.jpg";
 
 </script>
-<section class="header relative items-start mt-12 flex max-h-860-px">
+<section class="reative flex bg-gradient pt-10 pb-48 md:pb-38">
     <div class="container mx-auto items-start flex flex-wrap">
         <div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
             <div class="pt-16 sm:pt-18">
@@ -24,8 +23,7 @@
                     Recruitment Division
                 </h2>
                 <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
-                    การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
+					{data.content}
-                    ชุมชน
                 </p>
                 <div class="mt-12">
                     <a
@@ -82,8 +80,7 @@
 						ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
 					</h6>
 					<a
-						href="/"
+						href="/qualifying"
-						target="_blank"
 						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
 					>
 						ประกาศทั้งหมด
@@ -96,15 +93,15 @@
 				>
 					<div class="card  bg-white shadow-xl w-full ">
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
-							<img src="{sel1}" alt="1" />
+							<img src={qualify_exams[0].img} alt="1" />
 						</figure>
 						<div class="card-body">
 							<div class="text-sm font-medium text-gray-500">
-								ข่าววันที่ : 24  มี.ค. 2566  
+								ข่าววันที่ : {qualify_exams[0].date}
 								<div class="badge badge-secondary text-white ml-4">NEW</div>
 							</div>
 							<div class="card-title font-medium">
-								ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
+								{qualify_exams[0].title}
 							</div>
 							<div class="mt-4 text-sm row-auto no-wrap">
 								<i class="fab fa-twitter text-blue-500"></i>
@@ -124,14 +121,14 @@
 						<div class="flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
 								<figure class="w-full lg:w-5/12 imgCard">
-									<img src="{sel2}" alt="1" class="h-full" />
+									<img src={qualify_exams[1].img} alt="1" class="h-full" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
-										ข่าววันที่ :  3  มี.ค. 2566
+										{qualify_exams[1].date}
 									</h2>
 									<div class="card-title font-medium">
-										ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
+										{qualify_exams[1].title}
 									</div>
 									<div class="mt-4 text-sm row-auto no-wrap">
 										<i class="fab fa-twitter text-blue-500"></i>
@@ -149,14 +146,14 @@
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
 								<figure class="w-full lg:w-5/12 imgCard">
-									<img src="{sel3}" alt="1"  class="h-full"/>
+									<img src={qualify_exams[2].img} alt="1"  class="h-full"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
-										ข่าววันที่ : 20  ธันวาคม 2566  
+										{qualify_exams[2].date} 
 									</div>
 									<div class="card-title font-medium">
-										ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
+										{qualify_exams[2].title}
 									</div>
 									<div class="mt-4 text-sm row-auto no-wrap">
 										<i class="fab fa-twitter text-blue-500"></i>
@@ -185,8 +182,7 @@
 						ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
 					</h6>
 					<a
-						href="/"
+						href="/competitive"
-						target="_blank"
 						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
 					>
 						ประกาศทั้งหมด
@@ -194,20 +190,18 @@
 					</a>
 				</div>
 				
-				<div
+				<div class="w-full lg:w-6/12 cardxl">
-					class="w-full lg:w-6/12 cardxl"
-				>
 					<div class="card  bg-white shadow-xl w-full ">
 						<figure style="height: 250px;" class="img-hover-zoom--brightness">
-							<img src="{c1}" alt="1" />
+							<img src={competitive_exams[0].img} alt="1" />
 						</figure>
 						<div class="card-body">
 							<div class="text-sm font-medium text-gray-500">
-								ข่าววันที่ : 24  มี.ค. 2566
+								ข่าววันที่ : {competitive_exams[0].date}
 								<div class="badge badge-secondary text-white ml-4">NEW</div>
 							</div>
 							<div class="card-title font-medium">
-								ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
+								{competitive_exams[0].title}
 							</div>
 							<div class="mt-4 text-sm row-auto no-wrap">
 								<i class="fab fa-twitter text-blue-500"></i>
@@ -227,14 +221,14 @@
 						<div class="flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
 								<figure class="w-full lg:w-5/12 imgCard">
-									<img src="{c2}" alt="1" class="h-full" />
+									<img src={competitive_exams[1].img} alt="1" class="h-full" />
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<h2 class="text-sm font-medium text-gray-500">
-										ข่าววันที่ : 13  มี.ค. 2566
+										{competitive_exams[1].date}
 									</h2>
 									<div class="card-title font-medium">
-										ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
+										{competitive_exams[1].title}
 									</div>
 									<div class="mt-4 text-sm row-auto no-wrap">
 										<i class="fab fa-twitter text-blue-500"></i>
@@ -252,14 +246,14 @@
 						<div class=" flex flex-col w-full">
 							<div class="card card-side bg-white shadow-xl w-full">
 								<figure class="w-full lg:w-5/12 imgCard">
-									<img src="{c3}" alt="1"  class="h-full"/>
+									<img src={competitive_exams[2].img} alt="1"  class="h-full"/>
 								</figure>
 								<div class="card-body w-full lg:w-7/12">
 									<div class="text-sm font-medium text-gray-500">
-										ข่าววันที่ : 9  มี.ค. 2566
+										{competitive_exams[2].title}
 									</div>
 									<div class="card-title font-medium">
-										แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
+										{competitive_exams[2].title}
 									</div>
 									<div class="mt-4 text-sm row-auto no-wrap">
 										<i class="fab fa-twitter text-blue-500"></i>

cms/src/routes/about/+page.svelte

@@ -8,9 +8,8 @@
 <section class="items-start h-screen flex max-h-860-px pt-10  bg-blueGray-100">
     <div class="container mx-auto items-start flex flex-wrap px-4">
         <div >
-            {@html data.detail}
+            {@html data.content}
         </div>
-        <div>{data.contact.description}</div>
         <div>{ver.version}</div>
         <div>{ver.builddate}</div>
     </div>

cms/src/routes/competitive/+page.svelte

@@ -3,12 +3,29 @@
     export let data: PageData;
 	const exams = data.exams
 </script>
-
+<section>
-<section class="items-start h-screen flex max-h-860-px pt-12  bg-blueGray-100">
+    <div class="p-one parallax-inner">
-    <div class="container mx-auto items-start flex flex-wrap px-4">
+      <h2>การสอบแข่งขัน</h2>
-		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
+    </div>
-			การสอบแข่งขัน
+</section>
-		</h2>
+<section class="pb-40 relative bg-blueGray-100">
+	<div class="container mx-auto justify-center flex flex-wrap">
+		<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
+			<div class="text-sm breadcrumbs">
+				<ul>
+				  <li class="text-pink-500 hover:text-pink-700 ">
+					<a href="/" >
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+					</a>
+				  </li> 
+				  <li>
+					<span class="breadTaxt">การสอบแข่งขัน</span>
+				  </li>
+				</ul>
+			</div>
+		</div>
+	</div>
+    <div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
 		<div
 		class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
 		>

cms/src/routes/qualifying/+page.svelte

@@ -6,14 +6,31 @@
 	const events = data.events
 </script>
 
-<section class="items-start flex  pt-12 pb-20  bg-blueGray-100">
+<section>
-
+    <div class="p-one parallax-inner">
-	<div class="container mx-auto items-start flex flex-wrap px-4">
+      <h2>การสอบคัดเลือก</h2>
-		<h2 class="font-semibold text-2xl text-blueGray-600 mb-4 w-full">
+    </div>
-			การสอบคัดเลือก
+</section>
-		</h2>
+<section class="pb-40 relative bg-blueGray-100">
+	<div class="container mx-auto justify-center flex flex-wrap">
+		<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
+			<div class="text-sm breadcrumbs">
+				<ul>
+				  <li class="text-pink-500 hover:text-pink-700 ">
+					<a href="/" >
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+					</a>
+				  </li> 
+				  <li>
+					<span class="breadTaxt">การสอบคัดเลือก</span>
+				  </li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
 		<div class="w-full lg:w-6/12 cardxl">
-			<div class="card  bg-white shadow-xl w-full p-4">
+			<div class="card  bg-white shadow-xl w-full">
 				<ActivityCalendar {events} />
 			</div>
 		</div>
@@ -55,4 +72,6 @@
 		</div>
 	</div>
 </section>
+<style>
+</style>