<?php
/*
Template Name: Wahat Albaz Home
*/
get_header();
?>
<style>
.wahat-home-page{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(15,46,29,0.92), rgba(8,24,15,0.95)),
url('https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
padding: 60px 20px;
}
.wahat-home-page::before{
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(191,167,106,0.15), transparent 30%),
radial-gradient(circle at bottom left, rgba(191,167,106,0.10), transparent 25%);
pointer-events: none;
}
.wahat-home-container{
position: relative;
z-index: 2;
width: 100%;
max-width: 1100px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.wahat-left{
color: #ffffff;
}
.wahat-badge{
display: inline-block;
padding: 10px 18px;
border: 1px solid rgba(191,167,106,0.45);
border-radius: 999px;
background: rgba(255,255,255,0.04);
color: #BFA76A;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
backdrop-filter: blur(4px);
}
.wahat-title{
font-size: 58px;
line-height: 1.08;
font-weight: 800;
margin: 0 0 18px;
color: #ffffff;
}
.wahat-title span{
color: #BFA76A;
}
.wahat-text{
font-size: 18px;
line-height: 1.9;
color: rgba(255,255,255,0.92);
max-width: 580px;
margin-bottom: 28px;
}
.wahat-actions{
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}
.wahat-btn{
display: inline-block;
padding: 14px 26px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
}
.wahat-btn-primary{
background: #BFA76A;
color: #0F2E1D;
}
.wahat-btn-primary:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(191,167,106,0.25);
}
.wahat-btn-secondary{
border: 1px solid rgba(255,255,255,0.22);
color: #ffffff;
background: rgba(255,255,255,0.04);
}
.wahat-btn-secondary:hover{
background: rgba(255,255,255,0.10);
}
.wahat-features{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 10px;
}
.wahat-feature{
padding: 16px 14px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
border-radius: 18px;
text-align: center;
color: #ffffff;
backdrop-filter: blur(4px);
}
.wahat-feature strong{
display: block;
color: #BFA76A;
font-size: 15px;
margin-bottom: 6px;
}
.wahat-feature span{
font-size: 13px;
color: rgba(255,255,255,0.82);
}
.wahat-right{
display: flex;
justify-content: center;
}
.wahat-card{
width: 100%;
max-width: 420px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(191,167,106,0.20);
border-radius: 28px;
padding: 34px 28px;
box-shadow: 0 20px 60px rgba(0,0,0,0.30);
backdrop-filter: blur(10px);
text-align: center;
}
.wahat-logo-wrap{
width: 110px;
height: 110px;
margin: 0 auto 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(191,167,106,0.45);
background: rgba(15,46,29,0.55);
overflow: hidden;
}
.wahat-logo-wrap img{
max-width: 78px;
max-height: 78px;
object-fit: contain;
}
.wahat-logo-text{
font-size: 32px;
font-weight: 800;
color: #BFA76A;
line-height: 1;
}
.wahat-brand-ar{
font-size: 32px;
font-weight: 800;
color: #ffffff;
margin: 10px 0 8px;
}
.wahat-brand-en{
font-size: 14px;
letter-spacing: 4px;
color: #BFA76A;
margin-bottom: 18px;
text-transform: uppercase;
}
.wahat-divider{
width: 72px;
height: 3px;
background: #BFA76A;
border-radius: 999px;
margin: 0 auto 20px;
}
.wahat-card-text{
color: rgba(255,255,255,0.90);
line-height: 1.8;
font-size: 16px;
margin-bottom: 18px;
}
.wahat-coming{
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
background: rgba(191,167,106,0.12);
color: #BFA76A;
font-weight: 700;
font-size: 14px;
border: 1px solid rgba(191,167,106,0.22);
}
@media (max-width: 991px){
.wahat-home-container{
grid-template-columns: 1fr;
text-align: center;
}
.wahat-left{
order: 2;
}
.wahat-right{
order: 1;
}
.wahat-text{
margin-left: auto;
margin-right: auto;
}
.wahat-actions{
justify-content: center;
}
.wahat-title{
font-size: 42px;
}
}
@media (max-width: 640px){
.wahat-title{
font-size: 34px;
}
.wahat-text{
font-size: 16px;
}
.wahat-features{
grid-template-columns: 1fr;
}
.wahat-card{
padding: 28px 20px;
}
.wahat-brand-ar{
font-size: 28px;
}
}
</style>
<section class="wahat-home-page">
<div class="wahat-home-container">
<div class="wahat-left">
<div class="wahat-badge">Luxury Collection</div>
<h1 class="wahat-title">
Welcome to <span>Wahat Albaz</span>
</h1>
<p class="wahat-text">
We are coming soon with the world of Wahat Albaz — a refined destination for premium spices,
rare selections, exceptional quality, and elegant details crafted for those who appreciate true luxury.
</p>
<div class="wahat-actions">
<a href="#discover" class="wahat-btn wahat-btn-primary">Discover Soon</a>
<a href="#about" class="wahat-btn wahat-btn-secondary">About Wahat Albaz</a>
</div>
<div class="wahat-features">
<div class="wahat-feature">
<strong>Premium Quality</strong>
<span>Selected with care</span>
</div>
<div class="wahat-feature">
<strong>Luxury Identity</strong>
<span>Elegant and timeless</span>
</div>
<div class="wahat-feature">
<strong>Coming Soon</strong>
<span>Details will be revealed</span>
</div>
</div>
</div>
<div class="wahat-right">
<div class="wahat-card">
<div class="wahat-logo-wrap">
<!-- Replace the text below with your logo image if you have one -->
<!-- Example:
<img src="https://yourwebsite.com/wp-content/uploads/2026/03/wahat-logo.png" alt="Wahat Albaz Logo">
-->
<div class="wahat-logo-text">WB</div>
</div>
<div class="wahat-brand-ar">واحة الباز</div>
<div class="wahat-brand-en">WAHAT ALBAZ</div>
<div class="wahat-divider"></div>
<p class="wahat-card-text">
A distinguished brand preparing to unveil a premium collection inspired by elegance,
authenticity, and exceptional taste.
</p>
<div class="wahat-coming">We Are Coming Soon</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>