<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>متجرنا</title>

<style>

    body {

        font-family: 'Tajawal', sans-serif;

        margin: 0; padding: 0;

        direction: rtl;

        background: #f8f8f8;

    }

    header {

        background: #222;

        color: #fff;

        padding: 15px 20px;

        text-align: center;

        font-size: 22px;

    }

    nav {

        display: flex;

        justify-content: center;

        gap: 20px;

        background: #444;

        padding: 10px 0;

    }

    nav a {

        color: #fff;

        text-decoration: none;

        font-weight: bold;

    }

    .hero {

        background: url('https://via.placeholder.com/1200x400') no-repeat center/cover;

        color: #fff;

        text-align: center;

        padding: 80px 20px;

    }

    .hero h1 {

        font-size: 40px;

        margin-bottom: 10px;

    }

    .hero p {

        font-size: 18px;

        margin-bottom: 20px;

    }

    .btn {

        background: #ff5722;

        color: #fff;

        padding: 12px 25px;

        text-decoration: none;

        border-radius: 6px;

        font-size: 18px;

    }

    .products {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 20px;

        padding: 30px;

    }

    .product {

        background: #fff;

        border-radius: 10px;

        box-shadow: 0 3px 8px rgba(0,0,0,0.1);

        text-align: center;

        padding: 15px;

    }

    .product img {

        width: 100%;

        border-radius: 10px;

    }

    .product h3 {

        margin: 10px 0;

        font-size: 20px;

    }

    .price {

        color: #ff5722;

        font-size: 18px;

        margin-bottom: 10px;

    }

    footer {

        background: #222;

        color: #fff;

        text-align: center;

        padding: 15px;

        margin-top: 30px;

    }

    .whatsapp {

        position: fixed;

        bottom: 20px;

        left: 20px;

        background: #25d366;

        color: white;

        font-size: 25px;

        padding: 12px;

        border-radius: 50%;

        text-decoration: none;

        box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    }

</style>

</head>

<body>

<header>مرحباً بكم في متجرنا</header>

<nav>

    <a href="#products">منتجاتنا</a>

    <a href="#about">من نحن</a>

    <a href="#contact">اتصل بنا</a>

</nav>

<section class="hero">

    <h1>أفضل العروض بانتظارك!</h1>

    <p>تسوق الآن واستمتع بخصومات مذهلة</p>

    <a href="#products" class="btn">تسوق الآن</a>

</section>

<section id="products" class="products">

    <div class="product">

        <img src="https://via.placeholder.com/250" alt="منتج 1">

        <h3>منتج 1</h3>

        <div class="price">99 ر.س</div>

        <a href="#" class="btn">أضف للسلة</a>

    </div>

    <div class="product">

        <img src="https://via.placeholder.com/250" alt="منتج 2">

        <h3>منتج 2</h3>

        <div class="price">149 ر.س</div>

        <a href="#" class="btn">أضف للسلة</a>

    </div>

    <div class="product">

        <img src="https://via.placeholder.com/250" alt="منتج 3">

        <h3>منتج 3</h3>

        <div class="price">199 ر.س</div>

        <a href="#" class="btn">أضف للسلة</a>

    </div>

</section>

<footer>

    جميع الحقوق محفوظة © 2025 | متجرنا

</footer>

<a href="https://wa.me/966500000000" target="_blank" class="whatsapp">💬</a>

</body>

</html>