Showing source for: https://desa-jatijajar.id/
Duration: 0.439306s
Server: cloudflare
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>Desa Jatijajar â Kecamatan Ayah, Kebumen | Wisata Goa, Sejarah & Budaya</title>
<meta name="description" content="Desa Jatijajar, Kecamatan Ayah, Kabupaten Kebumen. Rumah bagi Goa Jatijajar yang legendaris, kaya akan sejarah, budaya agraris, dan tradisi Suran yang masih lestari hingga kini.">
<meta name="keywords" content="Desa Jatijajar, Goa Jatijajar, Kebumen, Kecamatan Ayah, wisata Kebumen, desa wisata, tradisi Suran, Raden Kamandaka">
<meta name="author" content="Pemerintah Desa Jatijajar">
<meta name="robots" content="index, follow">
<!-- Canonical -->
<link rel="canonical" href="https://desa-jatijajar.id/">
<!-- Open Graph -->
<meta property="og:title" content="Desa Jatijajar â Kecamatan Ayah, Kebumen">
<meta property="og:description" content="Jelajahi pesona Desa Jatijajar: Goa legendaris, tradisi Suran, dan kehidupan agraris pesisir selatan Jawa.">
<meta property="og:url" content="https://desa-jatijajar.id/">
<meta property="og:type" content="website">
<meta property="og:locale" content="id_ID">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Desa Jatijajar â Kecamatan Ayah, Kebumen">
<meta name="twitter:description" content="Desa dengan Goa legendaris, tradisi Suran, dan pesona agraris pesisir selatan Jawa.">
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Village",
"name": "Desa Jatijajar",
"alternateName": "Jatijajar",
"description": "Desa di Kecamatan Ayah, Kabupaten Kebumen, Jawa Tengah, Indonesia. Dikenal karena Goa Jatijajar dan tradisi budaya agraris.",
"url": "https://desa-jatijajar.id/",
"address": {
"@type": "PostalAddress",
"addressLocality": "Kecamatan Ayah",
"addressRegion": "Kabupaten Kebumen",
"addressCountry": "Indonesia",
"postalCode": "54473"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "-7.6333",
"longitude": "109.3833"
},
"containedInPlace": {
"@type": "AdministrativeArea",
"name": "Kecamatan Ayah, Kabupaten Kebumen, Jawa Tengah"
},
"hasMap": "https://goo.gl/maps/example",
"population": "6994",
"area": {
"@type": "QuantitativeValue",
"value": "538.907",
"unitCode": "HAR"
}
}
</script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],400;9..144,600;9..144,700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* === RESET & BASE === */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--soil: #2d1f12;
--earth: #5c3d2e;
--clay: #8b5e3c;
--sand: #d4a574;
--cream: #f5ede4;
--leaf: #3a5a40;
--moss: #588157;
--gold: #c9a227;
--limestone: #e8e0d5;
--text: #1a1410;
--text-soft: #4a3f35;
--radius: 6px;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Manrope', system-ui, sans-serif;
color: var(--text);
background-color: var(--cream);
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* === SCROLL PROGRESS === */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--sand), var(--moss));
z-index: 9999;
transition: width 0.1s linear;
}
/* === NAVIGATION === */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1rem 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.scrolled {
background: rgba(245, 237, 228, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 0 rgba(45, 31, 18, 0.08);
padding: 0.6rem 0;
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-brand {
font-family: 'Fraunces', serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--soil);
text-decoration: none;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-brand svg {
width: 28px;
height: 28px;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-soft);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: color 0.3s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1.5px;
background: var(--gold);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover {
color: var(--soil);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.nav-toggle span {
width: 24px;
height: 2px;
background: var(--soil);
transition: all 0.3s;
border-radius: 2px;
}
/* === HERO === */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--soil);
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 70% 20%, rgba(201, 162, 39, 0.15), transparent),
radial-gradient(ellipse 60% 80% at 20% 80%, rgba(58, 90, 64, 0.2), transparent),
linear-gradient(160deg, #1a1410 0%, #2d1f12 40%, #3d2a1a 100%);
}
/* Limestone texture pattern */
.hero-texture {
position: absolute;
inset: 0;
opacity: 0.06;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,0.3) 40px, rgba(255,255,255,0.3) 41px),
repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,0.15) 60px, rgba(255,255,255,0.15) 61px);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 6rem;
width: 100%;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand);
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 1s 0.2s forwards;
}
.hero-eyebrow::before {
content: '';
width: 40px;
height: 1px;
background: var(--sand);
}
.hero h1 {
font-family: 'Fraunces', serif;
font-size: clamp(2.8rem, 7vw, 5.5rem);
font-weight: 700;
color: var(--cream);
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 1s 0.4s forwards;
}
.hero h1 em {
font-style: italic;
color: var(--gold);
font-weight: 400;
}
.hero-desc {
max-width: 540px;
font-size: 1.05rem;
color: rgba(245, 237, 228, 0.65);
line-height: 1.8;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 1s 0.6s forwards;
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1s 0.8s forwards;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
font-family: 'Manrope', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--gold);
color: var(--soil);
}
.btn-primary:hover {
background: var(--sand);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(201, 162, 39, 0.3);
}
.btn-outline {
background: transparent;
color: var(--cream);
border: 1.5px solid rgba(245, 237, 228, 0.3);
}
.btn-outline:hover {
border-color: var(--sand);
color: var(--sand);
transform: translateY(-2px);
}
/* Hero decorative elements */
.hero-ornament {
position: absolute;
right: -5%;
bottom: -10%;
width: 50%;
height: 70%;
opacity: 0.08;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 0 L200 100 L100 200 L0 100 Z' fill='none' stroke='%23d4a574' stroke-width='0.5'/%3E%3Cpath d='M100 20 L180 100 L100 180 L20 100 Z' fill='none' stroke='%23d4a574' stroke-width='0.5'/%3E%3Cpath d='M100 40 L160 100 L100 160 L40 100 Z' fill='none' stroke='%23d4a574' stroke-width='0.5'/%3E%3Cpath d='M100 60 L140 100 L100 140 L60 100 Z' fill='none' stroke='%23d4a574' stroke-width='0.5'/%3E%3C/svg%3E") center/contain no-repeat;
animation: slowRotate 60s linear infinite;
}
@keyframes slowRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === SECTION SHARED === */
.section {
padding: 6rem 2rem;
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
}
.section-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--clay);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-label::before {
content: '';
width: 28px;
height: 1px;
background: var(--clay);
}
.section h2 {
font-family: 'Fraunces', serif;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--soil);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
/* === ABOUT / SEJARAH === */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.about-text p {
color: var(--text-soft);
font-size: 1rem;
margin-bottom: 1.2rem;
line-height: 1.85;
}
.about-text p:first-of-type::first-letter {
font-family: 'Fraunces', serif;
font-size: 3.5rem;
float: left;
line-height: 0.8;
margin-right: 0.75rem;
margin-top: 0.15rem;
color: var(--clay);
font-weight: 700;
}
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.stat-card {
background: var(--limestone);
border-radius: var(--radius);
padding: 2rem 1.5rem;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
transform: translateY(-4px);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--gold);
}
.stat-number {
font-family: 'Fraunces', serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--soil);
line-height: 1;
margin-bottom: 0.4rem;
}
.stat-label {
font-size: 0.8rem;
color: var(--text-soft);
font-weight: 500;
letter-spacing: 0.03em;
}
/* === WISATA / GOA === */
.wisata {
background: var(--soil);
color: var(--cream);
position: relative;
overflow: hidden;
}
.wisata .section-label {
color: var(--sand);
}
.wisata .section-label::before {
background: var(--sand);
}
.wisata h2 {
color: var(--cream);
}
.wisata-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
align-items: center;
}
.wisata-text p {
color: rgba(245, 237, 228, 0.7);
font-size: 1rem;
line-height: 1.85;
margin-bottom: 1.2rem;
}
.wisata-facts {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.fact-item {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.25rem;
background: rgba(245, 237, 228, 0.04);
border-radius: var(--radius);
border: 1px solid rgba(245, 237, 228, 0.08);
transition: background 0.3s;
}
.fact-item:hover {
background: rgba(245, 237, 228, 0.07);
}
.fact-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(201, 162, 39, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
}
.fact-content h4 {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 600;
color: var(--cream);
margin-bottom: 0.2rem;
}
.fact-content p {
font-size: 0.85rem;
color: rgba(245, 237, 228, 0.55);
line-height: 1.6;
margin: 0;
}
/* === BUDAYA === */
.budaya {
background: var(--limestone);
}
.budaya-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.budaya-card {
background: var(--cream);
border-radius: var(--radius);
padding: 2rem;
position: relative;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s;
border: 1px solid rgba(45, 31, 18, 0.06);
}
.budaya-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(45, 31, 18, 0.08);
}
.budaya-card-number {
font-family: 'Fraunces', serif;
font-size: 3rem;
font-weight: 700;
color: rgba(139, 94, 60, 0.12);
line-height: 1;
margin-bottom: 1rem;
}
.budaya-card h3 {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--soil);
margin-bottom: 0.75rem;
}
.budaya-card p {
font-size: 0.9rem;
color: var(--text-soft);
line-height: 1.75;
}
/* === TRADISI === */
.tradisi {
background: var(--cream);
}
.tradisi-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.tradisi-intro p {
color: var(--text-soft);
font-size: 1rem;
line-height: 1.85;
margin-bottom: 1.2rem;
}
.tradisi-detail {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.tradisi-item {
padding: 1.5rem;
border-left: 3px solid var(--sand);
background: rgba(212, 165, 116, 0.06);
border-radius: 0 var(--radius) var(--radius) 0;
transition: border-color 0.3s, background 0.3s;
}
.tradisi-item:hover {
border-left-color: var(--gold);
background: rgba(212, 165, 116, 0.1);
}
.tradisi-item h4 {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 600;
color: var(--soil);
margin-bottom: 0.4rem;
}
.tradisi-item p {
font-size: 0.875rem;
color: var(--text-soft);
line-height: 1.7;
}
/* === FOOTER === */
.footer {
background: var(--soil);
color: rgba(245, 237, 228, 0.6);
padding: 4rem 2rem 2rem;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(245, 237, 228, 0.08);
}
.footer-brand {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--cream);
margin-bottom: 0.75rem;
}
.footer-brand-desc {
font-size: 0.875rem;
line-height: 1.8;
max-width: 360px;
}
.footer h5 {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--sand);
margin-bottom: 1.25rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-links a {
color: rgba(245, 237, 228, 0.5);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--sand);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2rem;
font-size: 0.8rem;
flex-wrap: wrap;
gap: 1rem;
}
/* === REVEAL ANIMATION === */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* === RESPONSIVE === */
@media (max-width: 900px) {
.about-grid,
.wisata-grid,
.tradisi-layout {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.budaya-grid {
grid-template-columns: 1fr 1fr;
}
.footer-top {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(245, 237, 228, 0.98);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 1.5rem 2rem 2rem;
gap: 1rem;
box-shadow: 0 10px 30px rgba(45, 31, 18, 0.08);
}
.nav-links.open {
display: flex;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.section {
padding: 4rem 1.5rem;
}
.hero-content {
padding: 0 1.5rem 4rem;
}
.budaya-grid {
grid-template-columns: 1fr;
}
.about-stats {
grid-template-columns: 1fr 1fr;
}
.footer-top {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Scroll Progress -->
<div class="scroll-progress" id="scrollProgress"></div>
<!-- Navigation -->
<nav class="nav" id="nav">
<div class="nav-inner">
<a href="#" class="nav-brand">
<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2 L26 14 L14 26 L2 14 Z" stroke="#5c3d2e" stroke-width="1.5" fill="none"/>
<path d="M14 7 L21 14 L14 21 L7 14 Z" stroke="#c9a227" stroke-width="1.5" fill="none"/>
<circle cx="14" cy="14" r="2" fill="#c9a227"/>
</svg>
Jatijajar
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#wisata">Wisata</a></li>
<li><a href="#budaya">Budaya</a></li>
<li><a href="#tradisi">Tradisi</a></li>
</ul>
<button class="nav-toggle" id="navToggle" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Hero -->
<header class="hero">
<div class="hero-bg"></div>
<div class="hero-texture"></div>
<div class="hero-ornament"></div>
<div class="hero-content">
<div class="hero-eyebrow">Kecamatan Ayah · Kabupaten Kebumen</div>
<h1>Jatijajar,<br><em>di mana bumi</em><br>bercerita.</h1>
<p class="hero-desc">
Sebuah desa di pesisir selatan Jawa yang menyimpan gua legendaris,
tradisi agraris yang hidup, dan kisah Raden Kamandaka yang terus
mengalir dalam ingatan kolektif warganya.
</p>
<div class="hero-actions">
<a href="#sejarah" class="btn btn-primary">Jelajahi Desa</a>
<a href="#wisata" class="btn btn-outline">Goa Jatijajar</a>
</div>
</div>
</header>
<!-- Sejarah -->
<section class="section" id="sejarah">
<div class="section-inner">
<div class="about-grid">
<div class="about-text reveal">
<div class="section-label">Sejarah Desa</div>
<h2>Akar yang tumbuh dari pohon jati</h2>
<p>
Nama "Jatijajar" bukan sekadar penanda administratif. Konon,
wilayah ini dulunya adalah hutan belantara yang didominasi
pohon jati besar yang tumbuh berbaris rapi â <em>jajar</em>
dalam bahasa Jawa. Penduduk setempat menyebutnya demikian,
dan nama itu melekat hingga kini.
</p>
<p>
Permukiman pertama diperkirakan muncul pada masa Kesultanan
Mataram, sekitar abad ke-17. Masyarakat membuka lahan
pertanian di perbukitan kapur dan hutan jati. Seiring waktu,
Jatijajar berkembang menjadi desa agraris pesisir yang
dihuni petani, pengrajin, dan nelayan.
</p>
<p>
Secara administratif, desa ini mulai diakui pada zaman
kolonial Hindia Belanda. Namun struktur pemerintahan desa
yang sistematis baru terbentuk setelah kemerdekaan, dengan
kepala desa pertama yang diangkat melalui musyawarah adat.
</p>
</div>
<div class="about-stats reveal">
<div class="stat-card">
<div class="stat-number">538</div>
<div class="stat-label">Hektar luas wilayah</div>
</div>
<div class="stat-card">
<div class="stat-number">7</div>
<div class="stat-label">Rukun Warga (RW)</div>
</div>
<div class="stat-card">
<div class="stat-number">49</div>
<div class="stat-label">Rukun Tetangga (RT)</div>
</div>
<div class="stat-card">
<div class="stat-number">6.994</div>
<div class="stat-label">Jiwa penduduk</div>
</div>
</div>
</div>
</div>
</section>
<!-- Wisata -->
<section class="section wisata" id="wisata">
<div class="section-inner">
<div class="wisata-grid">
<div class="wisata-text reveal">
<div class="section-label">Wisata & Geologi</div>
<h2>Goa Jatijajar, lorong waktu 250 meter</h2>
<p>
Pada tahun 1802, seorang petani bernama Jayamenawi secara
tidak sengaja menemukan pintu masuk goa saat menggali tanah.
Ia jatuh ke dalam lubang misterius dan menemukan lorong kapur
yang membentang sepanjang 250 meter dengan lebar 15â25 meter.
</p>
<p>
Goa ini terbentuk dari batuan kapur Formasi Kalipucang dan
Formasi Halang atas. Di bawah pintu masuk, ditemukan fosil
moluska seperti gastropoda dan pelecypoda â jejak laut purba
yang mengindikasikan usia goa sekitar satu juta tahun.
</p>
<p>
Namun daya tarik Goa Jatijajar bukan hanya geologis. Goa ini
erat dikaitkan dengan legenda Raden Kamandaka atau Lutung
Kasarung, yang konon pernah bertapa di dalamnya. Baru pada
tahun 1975, gua ini resmi dikembangkan sebagai objek wisata
publik oleh Gubernur Jawa Tengah saat itu, Suparjo Rustam.
</p>
</div>
<div class="wisata-facts reveal">
<div class="fact-item">
<div class="fact-icon">ðª¨</div>
<div class="fact-content">
<h4>Formasi Kapur</h4>
<p>Terbentuk dari batuan kapur Miosen Tengah, Formasi Kalipucang & Halang atas.</p>
</div>
</div>
<div class="fact-item">
<div class="fact-icon">ð</div>
<div class="fact-content">
<h4>Panjang 250 Meter</h4>
<p>Lorong utama dengan lebar 15â25 meter, stalaktit dan stalagmit alami.</p>
</div>
</div>
<div class="fact-item">
<div class="fact-icon">ð</div>
<div class="fact-content">
<h4>Legenda Raden Kamandaka</h4>
<p>Kisah Lutung Kasarung yang bertapa di dalam gua, hidup dalam tradisi lisan warga.</p>
</div>
</div>
<div class="fact-item">
<div class="fact-icon">ðï¸</div>
<div class="fact-content">
<h4>Ditemukan 1802</h4>
<p>Oleh petani Jayamenawi, dikembangkan menjadi wisata publik pada 1975.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Budaya -->
<section class="section budaya" id="budaya">
<div class="section-inner">
<div class="section-label reveal">Kehidupan & Budaya</div>
<h2 class="reveal">Desa yang hidup dari tanah dan tradisi</h2>
<div class="budaya-grid" style="margin-top: 2.5rem;">
<div class="budaya-card reveal">
<div class="budaya-card-number">01</div>
<h3>Agraris Pesisir</h3>
<p>
Mayoritas warga Jatijajar adalah petani dan buruh tani.
Sebagian lainnya bekerja sebagai nelayan, pedagang, dan
pengrajin. Topografi desa yang berbukit-bukit menciptakan
mozaik lahan pertanian yang khas di pesisir selatan Jawa.
</p>
</div>
<div class="budaya-card reveal">
<div class="budaya-card-number">02</div>
<h3>Kerukunan Beragama</h3>
<p>
Hampir seluruh penduduk memeluk agama Islam â sekitar 6.994
jiwa â namun kehidupan beragama di desa ini berjalan dengan
damai. Tidak pernah tercatat konflik antarumat beragama,
mencerminkan kearifan lokal yang mengakar kuat.
</p>
</div>
<div class="budaya-card reveal">
<div class="budaya-card-number">03</div>
<h3>Desa Binaan Imigrasi</h3>
<p>
Desa Jatijajar dipilih sebagai desa binaan Kantor Imigrasi
Kelas I TPI Cilacap karena menjadi salah satu wilayah dengan
jumlah Pekerja Migran Indonesia (PMI) terbanyak. Program
pembinaan ini bertujuan melindungi warga yang bekerja di luar negeri.
</p>
</div>
</div>
</div>
</section>
<!-- Tradisi -->
<section class="section tradisi" id="tradisi">
<div class="section-inner">
<div class="tradisi-layout">
<div class="tradisi-intro reveal">
<div class="section-label">Tradisi & Adat</div>
<h2>Suran, rasa syukur yang tak pernah pudar</h2>
<p>
Setiap tahun, warga Desa Jatijajar menggelar upacara
tradisional Suran â sebuah kenduri doa bersama yang
diselenggarakan pada hari Selasa Kliwon atau Kamis Kliwon
di bulan Sura.
</p>
<p>
Tradisi ini bukan sekadar ritual. Ia adalah cara warga
menghormati leluhur yang membuka lahan desa â <em>babat
trukah</em> â sekaligus memohon keselamatan dan mengucapkan
rasa syukur atas hasil bumi yang melimpah.
</p>
<p>
Pusat pelaksanaan upacara berada di Dukuh Blangkunang,
tempat terdapat petilasan Lebuawu: makam Ki Santri Undhiqh
dan pohon jati tempat penyembelihan hewan sesaji.
</p>
</div>
<div class="tradisi-detail reveal">
<div class="tradisi-item">
<h4>Persiapan</h4>
<p>
Sebelum upacara, warga bergotong royong membersihkan
Panembahan Lebuawu dan sekitarnya, serta menyiapkan
tempat penyembelihan hewan kambing.
</p>
</div>
<div class="tradisi-item">
<h4>Sesaji</h4>
<p>
Tumpeng kuat berisi nasi tumpeng, sayur kacang, mie,
lalapan toge, kacang, timun, tempe goreng, peyek,
serundeng kelapa muda, dan kelapa muda. Disajikan dalam
tampah dengan pincuk daun pisang.
</p>
</div>
<div class="tradisi-item">
<h4>Prosesi</h4>
<p>
Sesepuh meletakkan sesaji di atas batu besar dekat
panembahan, membuka bungkusan sajen satu per satu,
membaca doa, lalu menyerahkan uang wajib kepada petugas
penyembelih kambing jantan Jawa.
</p>
</div>
<div class="tradisi-item">
<h4>Makna</h4>
<p>
Suran adalah jembatan antara generasi. Ia menjaga
hubungan warga dengan leluhur, alam, dan sesama â
sekaligus menjadi pengingat bahwa desa ini dibangun
di atas kerja keras dan rasa syukur.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-top">
<div>
<div class="footer-brand">Desa Jatijajar</div>
<p class="footer-brand-desc">
Kecamatan Ayah, Kabupaten Kebumen, Jawa Tengah.
Desa agraris pesisir yang kaya akan sejarah, budaya,
dan potensi alam â rumah bagi Goa Jatijajar yang legendaris.
</p>
</div>
<div>
<h5>Navigasi</h5>
<ul class="footer-links">
<li><a href="#sejarah">Sejarah Desa</a></li>
<li><a href="#wisata">Goa Jatijajar</a></li>
<li><a href="#budaya">Kehidupan & Budaya</a></li>
<li><a href="#tradisi">Tradisi Suran</a></li>
</ul>
</div>
<div>
<h5>Informasi</h5>
<ul class="footer-links">
<li><a href="https://jatijajar.kec-ayah.kebumenkab.go.id/" target="_blank" rel="noopener">Website Resmi Pemdes</a></li>
<li><a href="https://desa-jatijajar.id/sejarah-desa/" target="_blank" rel="noopener">Sejarah Desa</a></li>
<li><a href="/cdn-cgi/l/email-protection#214b4055484b404b40530f43445346405261464c40484d0f424e4c">Email Desa</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Pemerintah Desa Jatijajar. Seluruh hak cipta dilindungi.</span>
<span>Kecamatan Ayah · Kabupaten Kebumen · Jawa Tengah</span>
</div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// === SCROLL PROGRESS ===
const progressBar = document.getElementById('scrollProgress');
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollTop / docHeight) * 100;
progressBar.style.width = progress + '%';
});
// === NAV SCROLL ===
const nav = document.getElementById('nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 80) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// === MOBILE MENU ===
const navToggle = document.getElementById('navToggle');
const navLinks = document.getElementById('navLinks');
navToggle.addEventListener('click', () => {
navToggle.classList.toggle('active');
navLinks.classList.toggle('open');
});
// Close menu on link click
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navToggle.classList.remove('active');
navLinks.classList.remove('open');
});
});
// === REVEAL ON SCROLL ===
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
revealObserver.unobserve(entry.target);
}
});
}, {
threshold: 0.12,
rootMargin: '0px 0px -40px 0px'
});
revealElements.forEach(el => revealObserver.observe(el));
// === SMOOTH SCROLL FOR ANCHOR LINKS ===
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>
| # |
Url |
Url |
Source |
Date |
| 1 |
https://desa-jatijajar.id/ |
|
2026-10-17 08:31:32 |
| 2 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:32 |
| 3 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:31 |
| 4 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:31 |
| 5 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:30 |
| 6 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:30 |
| 7 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:29 |
| 8 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 08:31:29 |
| 9 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 08:31:28 |
| 10 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:28 |
| 11 |
https://mineri432ujw8.blogtov.com/ |
|
2026-10-17 08:31:28 |
| 12 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:28 |
| 13 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:27 |
| 14 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:26 |
| 15 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:26 |
| 16 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:26 |
| 17 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:25 |
| 18 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:24 |
| 19 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:24 |
| 20 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 08:31:23 |