فوتر3

byكاتب المقال محمد بلقاسم -
0

 

<!-- ============================================= -->
<!--        PROFESSIONAL BLOGGER FOOTER            -->
<!-- ============================================= -->

<!-- Font Awesome 6 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&amp;display=swap' rel='stylesheet'/>

<style>
/*============================================
   PROFESSIONAL FOOTER - COMPLETE STYLES
============================================*/

/* === CSS Variables === */
#proFooter {
  --ft-bg-1: #0b0b1a;
  --ft-bg-2: #0f0f2a;
  --ft-bg-3: #141432;
  --ft-bg-card: rgba(255,255,255,0.025);
  --ft-accent: #6c63ff;
  --ft-accent2: #ff6b6b;
  --ft-gradient: linear-gradient(135deg, #6c63ff 0%, #ff6b6b 100%);
  --ft-gradient2: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
  --ft-text: #8b8baa;
  --ft-text-light: #a0a0c0;
  --ft-heading: #ffffff;
  --ft-link: #c0c0dd;
  --ft-border: rgba(255,255,255,0.06);
  --ft-border-hover: rgba(108,99,255,0.3);
  --ft-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --ft-radius: 14px;
  --ft-radius-sm: 8px;
  --ft-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --ft-font: 'Cairo', 'Segoe UI', sans-serif;
}

/* === Reset === */
#proFooter, #proFooter * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#proFooter {
  font-family: var(--ft-font);
  direction: rtl;
  text-align: right;
  position: relative;
  overflow: hidden;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
#proFooter a {
  text-decoration: none;
  transition: var(--ft-transition);
}

/* === Animated Background === */
#proFooter .ft-bg-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#proFooter .ft-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: ftOrbFloat 25s ease-in-out infinite;
}
#proFooter .ft-bg-orb:nth-child(1) {
  width: 500px; height: 500px;
  background: rgba(108,99,255,0.06);
  top: -150px; right: -100px;
}
#proFooter .ft-bg-orb:nth-child(2) {
  width: 400px; height: 400px;
  background: rgba(255,107,107,0.05);
  bottom: -100px; left: -80px;
  animation-delay: -8s;
}
#proFooter .ft-bg-orb:nth-child(3) {
  width: 300px; height: 300px;
  background: rgba(0,201,255,0.04);
  top: 40%; left: 30%;
  animation-delay: -15s;
}
@keyframes ftOrbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-40px) scale(1.1); }
  66% { transform: translate(-30px,30px) scale(0.95); }
}

/* === Wave Separator === */
#proFooter .ft-wave {
  position: relative;
  line-height: 0;
  margin-bottom: -3px;
  z-index: 1;
}
#proFooter .ft-wave svg {
  width: 100%;
  height: 110px;
  display: block;
}

/* === Features Bar === */
#proFooter .ft-features-bar {
  background: var(--ft-bg-2);
  border-bottom: 1px solid var(--ft-border);
  padding: 35px 0;
  position: relative;
  z-index: 1;
}
#proFooter .ft-features-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 25px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#proFooter .ft-feature-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  background: var(--ft-bg-card);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  transition: var(--ft-transition);
  cursor: default;
}
#proFooter .ft-feature-card:hover {
  background: rgba(108,99,255,0.06);
  border-color: var(--ft-border-hover);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(108,99,255,0.15);
}
#proFooter .ft-feature-icon {
  width: 52px;
  height: 52px;
  background: var(--ft-gradient);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(108,99,255,0.3);
}
#proFooter .ft-feature-info h4 {
  color: var(--ft-heading);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
#proFooter .ft-feature-info p {
  color: var(--ft-text);
  font-size: 12px;
  font-weight: 400;
}

/* === Main Footer Area === */
#proFooter .ft-main {
  background: var(--ft-bg-1);
  padding: 65px 0 45px;
  position: relative;
  z-index: 1;
}
#proFooter .ft-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 25px;
}
#proFooter .ft-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 45px;
}
#proFooter .ft-col {
  position: relative;
}

/* === Widget Titles === */
#proFooter .ft-section .widget > h2,
#proFooter .ft-section .widget > .title,
#proFooter .ft-section .widget-title {
  color: var(--ft-heading) !important;
  font-family: var(--ft-font) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin-bottom: 22px !important;
  padding-bottom: 14px !important;
  position: relative !important;
  border: none !important;
  background: none !important;
}
#proFooter .ft-section .widget > h2::after,
#proFooter .ft-section .widget > .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45px;
  height: 3px;
  background: var(--ft-gradient);
  border-radius: 10px;
}
#proFooter .ft-section .widget > h2::before,
#proFooter .ft-section .widget > .title::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 55px;
  width: 8px;
  height: 3px;
  background: var(--ft-accent2);
  border-radius: 10px;
}

/* === Widget Content General === */
#proFooter .ft-section .widget {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#proFooter .ft-section .widget .widget-content {
  color: var(--ft-text);
  font-size: 14px;
  line-height: 1.9;
}

/* ========= ABOUT WIDGET STYLES ========= */
#proFooter .ft-about-wrap .ft-logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
#proFooter .ft-about-wrap .ft-logo-icon {
  width: 50px;
  height: 50px;
  background: var(--ft-gradient);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  box-shadow: 0 5px 20px rgba(108,99,255,0.35);
}
#proFooter .ft-about-wrap .ft-logo-text {
  font-size: 26px;
  font-weight: 900;
  background: var(--ft-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#proFooter .ft-about-wrap .ft-about-desc {
  color: var(--ft-text);
  font-size: 14px;
  line-height: 2;
  margin-bottom: 22px;
}
#proFooter .ft-about-wrap .ft-blog-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
#proFooter .ft-about-wrap .ft-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--ft-bg-card);
  border: 1px solid var(--ft-border);
  border-radius: 20px;
  color: var(--ft-text-light);
  font-size: 12px;
  font-weight: 600;
}
#proFooter .ft-about-wrap .ft-stat-badge i {
  color: var(--ft-accent);
  font-size: 11px;
}

/* Social Icons */
#proFooter .ft-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#proFooter .ft-social a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ft-border);
  border-radius: 12px;
  color: var(--ft-text-light);
  font-size: 17px;
  transition: var(--ft-transition);
}
#proFooter .ft-social a:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
#proFooter .ft-social a.s-fb:hover { background:#1877f2; color:#fff; border-color:#1877f2; }
#proFooter .ft-social a.s-tw:hover { background:#000; color:#fff; border-color:#000; }
#proFooter .ft-social a.s-ig:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; border-color:transparent; }
#proFooter .ft-social a.s-yt:hover { background:#ff0000; color:#fff; border-color:#ff0000; }
#proFooter .ft-social a.s-tg:hover { background:#0088cc; color:#fff; border-color:#0088cc; }
#proFooter .ft-social a.s-wa:hover { background:#25d366; color:#fff; border-color:#25d366; }
#proFooter .ft-social a.s-li:hover { background:#0077b5; color:#fff; border-color:#0077b5; }
#proFooter .ft-social a.s-pi:hover { background:#e60023; color:#fff; border-color:#e60023; }
#proFooter .ft-social a.s-tk:hover { background:#000; color:#fff; border-color:#000; }
#proFooter .ft-social a.s-sc:hover { background:#fffc00; color:#000; border-color:#fffc00; }
#proFooter .ft-social a.s-gh:hover { background:#333; color:#fff; border-color:#333; }
#proFooter .ft-social a.s-em:hover { background:var(--ft-gradient); color:#fff; border-color:transparent; }
#proFooter .ft-social a.s-rs:hover { background:#f26522; color:#fff; border-color:#f26522; }

/* ========= LINKS LIST STYLES ========= */
#proFooter .ft-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#proFooter .ft-links-list li {
  margin-bottom: 5px;
}
#proFooter .ft-links-list li a {
  color: var(--ft-link);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--ft-radius-sm);
  border: 1px solid transparent;
  transition: var(--ft-transition);
}
#proFooter .ft-links-list li a .link-icon {
  width: 28px;
  height: 28px;
  background: rgba(108,99,255,0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ft-accent);
  transition: var(--ft-transition);
  flex-shrink: 0;
}
#proFooter .ft-links-list li a:hover {
  color: var(--ft-heading);
  background: rgba(108,99,255,0.06);
  border-color: var(--ft-border-hover);
  padding-right: 20px;
}
#proFooter .ft-links-list li a:hover .link-icon {
  background: var(--ft-gradient);
  color: #fff;
}

/* Blogger LinkList widget override */
#proFooter .ft-section .LinkList .widget-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#proFooter .ft-section .LinkList .widget-content ul li {
  margin-bottom: 5px !important;
}
#proFooter .ft-section .LinkList .widget-content ul li a {
  color: var(--ft-link) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  border-radius: var(--ft-radius-sm) !important;
  border: 1px solid transparent !important;
  transition: var(--ft-transition) !important;
}
#proFooter .ft-section .LinkList .widget-content ul li a::before {
  content: '\f0da';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--ft-accent);
  width: 28px;
  height: 28px;
  background: rgba(108,99,255,0.1);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--ft-transition);
}
#proFooter .ft-section .LinkList .widget-content ul li a:hover {
  color: var(--ft-heading) !important;
  background: rgba(108,99,255,0.06) !important;
  border-color: var(--ft-border-hover) !important;
  padding-right: 20px !important;
}
#proFooter .ft-section .LinkList .widget-content ul li a:hover::before {
  background: var(--ft-gradient);
  color: #fff;
}

/* ========= LABELS / CATEGORIES STYLES ========= */
#proFooter .ft-section .Label .widget-content {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#proFooter .ft-section .Label .widget-content ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#proFooter .ft-section .Label .widget-content li {
  display: inline-flex !important;
  margin: 0 !important;
}
#proFooter .ft-section .Label .widget-content a,
#proFooter .ft-section .Label .cloud-label-widget-content a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  background: var(--ft-bg-card) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 22px !important;
  color: var(--ft-link) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--ft-transition) !important;
  white-space: nowrap !important;
}
#proFooter .ft-section .Label .widget-content a:hover,
#proFooter .ft-section .Label .cloud-label-widget-content a:hover {
  background: var(--ft-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(108,99,255,0.3) !important;
}
#proFooter .ft-section .Label .widget-content .label-count,
#proFooter .ft-section .Label .label-count {
  background: rgba(255,255,255,0.15) !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  margin-right: 4px !important;
}

/* ========= CONTACT INFO STYLES ========= */
#proFooter .ft-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--ft-bg-card);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius);
  transition: var(--ft-transition);
}
#proFooter .ft-contact-item:hover {
  background: rgba(108,99,255,0.05);
  border-color: var(--ft-border-hover);
  transform: translateX(-3px);
}
#proFooter .ft-contact-icon {
  width: 42px;
  height: 42px;
  background: var(--ft-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(108,99,255,0.25);
}
#proFooter .ft-contact-info h5 {
  color: var(--ft-heading);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}
#proFooter .ft-contact-info p {
  color: var(--ft-text);
  font-size: 13px;
  line-height: 1.6;
}
#proFooter .ft-contact-info a {
  color: var(--ft-text);
  font-size: 13px;
}
#proFooter .ft-contact-info a:hover {
  color: var(--ft-accent);
}

/* Working Hours */
#proFooter .ft-hours {
  margin-top: 18px;
  padding: 16px;
  background: rgba(108,99,255,0.04);
  border: 1px solid rgba(108,99,255,0.1);
  border-radius: var(--ft-radius);
}
#proFooter .ft-hours h5 {
  color: var(--ft-heading);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#proFooter .ft-hours h5 i {
  color: var(--ft-accent);
}
#proFooter .ft-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ft-text);
  border-bottom: 1px dashed var(--ft-border);
}
#proFooter .ft-hours-row:last-child {
  border-bottom: none;
}
#proFooter .ft-hours-row .ft-open {
  color: #4ade80;
  font-weight: 700;
  font-size: 12px;
}
#proFooter .ft-hours-row .ft-closed {
  color: var(--ft-accent2);
  font-weight: 700;
  font-size: 12px;
}

/* ========= HTML Widget Override ========= */
#proFooter .ft-section .HTML .widget-content {
  color: var(--ft-text) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}
#proFooter .ft-section .HTML .widget-content a {
  color: var(--ft-accent) !important;
}
#proFooter .ft-section .HTML .widget-content a:hover {
  color: var(--ft-accent2) !important;
}

/* ========= DIVIDER ========= */
#proFooter .ft-divider {
  border: none;
  border-top: 1px solid var(--ft-border);
  margin: 0;
}

/* ========= FOOTER BOTTOM ========= */
#proFooter .ft-bottom {
  background: var(--ft-bg-2);
  padding: 28px 0;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--ft-border);
}
#proFooter .ft-bottom-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
#proFooter .ft-copyright {
  color: var(--ft-text);
  font-size: 14px;
  font-weight: 400;
}
#proFooter .ft-copyright i.fa-heart {
  color: var(--ft-accent2);
  animation: ftHeartBeat 1.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes ftHeartBeat {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
#proFooter .ft-copyright a {
  color: var(--ft-accent);
  font-weight: 700;
}
#proFooter .ft-copyright a:hover {
  color: var(--ft-accent2);
}
#proFooter .ft-bottom-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#proFooter .ft-bottom-nav a {
  color: var(--ft-text);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--ft-border);
  background: var(--ft-bg-card);
  transition: var(--ft-transition);
}
#proFooter .ft-bottom-nav a:hover {
  background: var(--ft-gradient);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* ========= SUPER BOTTOM BAR ========= */
#proFooter .ft-super-bottom {
  background: #06060f;
  padding: 14px 0;
  text-align: center;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.03);
}
#proFooter .ft-super-bottom p {
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  font-family: var(--ft-font);
}
#proFooter .ft-super-bottom a {
  color: rgba(108,99,255,0.5);
}
#proFooter .ft-super-bottom a:hover {
  color: var(--ft-accent);
}

/* ========= BACK TO TOP ========= */
#ftBackToTop {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 52px;
  height: 52px;
  background: var(--ft-gradient, linear-gradient(135deg, #6c63ff, #ff6b6b));
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 30px rgba(108,99,255,0.45);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  outline: none;
}
#ftBackToTop.ft-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
#ftBackToTop:hover {
  transform: translateY(-6px) scale(1.1);
  box-shadow: 0 14px 40px rgba(108,99,255,0.55);
}
#ftBackToTop::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(108,99,255,0.3);
  animation: ftPulseRing 2s ease-out infinite;
}
@keyframes ftPulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ========= RESPONSIVE DESIGN ========= */
@media (max-width: 1100px) {
  #proFooter .ft-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
  }
  #proFooter .ft-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  #proFooter .ft-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  #proFooter .ft-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  #proFooter .ft-main {
    padding: 45px 0 30px;
  }
  #proFooter .ft-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
  #proFooter .ft-bottom-nav {
    justify-content: center;
  }
  #proFooter .ft-social {
    justify-content: center;
  }
  #proFooter .ft-wave svg {
    height: 60px;
  }
}
@media (max-width: 500px) {
  #proFooter .ft-features-grid {
    grid-template-columns: 1fr;
  }
  #proFooter .ft-feature-card {
    padding: 14px;
  }
  #proFooter .ft-grid {
    gap: 28px;
  }
  #proFooter .ft-bottom-nav a {
    font-size: 12px;
    padding: 5px 10px;
  }
  #ftBackToTop {
    bottom: 20px;
    left: 20px;
    width: 45px;
    height: 45px;
    font-size: 17px;
  }
}

/* ========= PRINT STYLES ========= */
@media print {
  #proFooter { display: none !important; }
  #ftBackToTop { display: none !important; }
}
</style>

<!-- ============ FOOTER HTML ============ -->
<footer id='proFooter'>

  <!-- Background Effects -->
  <div class='ft-bg-effects'>
    <div class='ft-bg-orb'/>
    <div class='ft-bg-orb'/>
    <div class='ft-bg-orb'/>
  </div>

  <!-- Wave Separator -->
  <div class='ft-wave'>
    <svg preserveAspectRatio='none' viewBox='0 0 1440 110' xmlns='http://www.w3.org/2000/svg'>
      <path d='M0,64 C180,100 360,20 540,55 C720,90 900,30 1080,60 C1260,90 1380,40 1440,50 L1440,110 L0,110 Z' fill='#0f0f2a'/>
      <path d='M0,85 C240,40 480,100 720,70 C960,40 1200,95 1440,65 L1440,110 L0,110 Z' fill='#0b0b1a' fill-opacity='0.6'/>
      <path d='M0,95 C360,75 720,105 1080,80 C1260,68 1380,92 1440,85 L1440,110 L0,110 Z' fill='#0b0b1a'/>
    </svg>
  </div>

  <!-- Features Bar -->
  <div class='ft-features-bar'>
    <div class='ft-features-grid'>
      <div class='ft-feature-card'>
        <div class='ft-feature-icon'><i class='fas fa-pen-fancy'/></div>
        <div class='ft-feature-info'>
          <h4>محتوى حصري</h4>
          <p>مقالات متجددة يومياً</p>
        </div>
      </div>
      <div class='ft-feature-card'>
        <div class='ft-feature-icon'><i class='fas fa-shield-halved'/></div>
        <div class='ft-feature-info'>
          <h4>موثوق وآمن</h4>
          <p>مصادر موثوقة 100%</p>
        </div>
      </div>
      <div class='ft-feature-card'>
        <div class='ft-feature-icon'><i class='fas fa-comments'/></div>
        <div class='ft-feature-info'>
          <h4>دعم مستمر</h4>
          <p>تواصل معنا في أي وقت</p>
        </div>
      </div>
      <div class='ft-feature-card'>
        <div class='ft-feature-icon'><i class='fas fa-rocket'/></div>
        <div class='ft-feature-info'>
          <h4>أداء عالي</h4>
          <p>تصفح سريع وسلس</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Footer Content -->
  <div class='ft-main'>
    <div class='ft-container'>
      <div class='ft-grid'>

        <!-- Column 1: About -->
        <div class='ft-col'>
          <b:section class='ft-section' id='footer_col_about' maxwidgets='1' showaddelement='yes'>
          </b:section>
        </div>

        <!-- Column 2: Quick Links -->
        <div class='ft-col'>
          <b:section class='ft-section' id='footer_col_links' maxwidgets='1' showaddelement='yes'>
          </b:section>
        </div>

        <!-- Column 3: Categories -->
        <div class='ft-col'>
          <b:section class='ft-section' id='footer_col_categories' maxwidgets='1' showaddelement='yes'>
          </b:section>
        </div>

        <!-- Column 4: Contact -->
        <div class='ft-col'>
          <b:section class='ft-section' id='footer_col_contact' maxwidgets='1' showaddelement='yes'>
          </b:section>
        </div>

      </div>
    </div>
  </div>

  <!-- Footer Bottom -->
  <div class='ft-bottom'>
    <div class='ft-bottom-inner'>
      <div class='ft-copyright'>
        صُنع بـ <i class='fas fa-heart'/> | جميع الحقوق محفوظة &#169; 
        <span class='ft-auto-year'/> 
        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
      </div>
      <nav class='ft-bottom-nav'>
        <a href='/p/about.html'><i class='fas fa-info-circle'/> من نحن</a>
        <a href='/p/privacy-policy.html'><i class='fas fa-lock'/> الخصوصية</a>
        <a href='/p/terms.html'><i class='fas fa-file-contract'/> الشروط</a>
        <a href='/p/contact.html'><i class='fas fa-envelope'/> اتصل بنا</a>
        <a href='/sitemap.xml'><i class='fas fa-sitemap'/> خريطة الموقع</a>
      </nav>
    </div>
  </div>

  <!-- Super Bottom -->
  <div class='ft-super-bottom'>
    <p>مدعوم بواسطة <a href='https://www.blogger.com' rel='nofollow' target='_blank'>Blogger</a> | تم التصميم باحترافية &#x1F3A8;</p>
  </div>

</footer>

<!-- Back to Top Button -->
<button id='ftBackToTop' title='العودة للأعلى'>
  <i class='fas fa-arrow-up'/>
</button>

<!-- Footer JavaScript -->
<script>
//<![CDATA[
(function(){
  // Auto Year
  var yearEls = document.querySelectorAll('.ft-auto-year');
  var currentYear = new Date().getFullYear();
  for(var i=0; i<yearEls.length; i++){
    yearEls[i].textContent = currentYear;
  }

  // Back to Top
  var backBtn = document.getElementById('ftBackToTop');
  if(backBtn){
    var ticking = false;
    window.addEventListener('scroll', function(){
      if(!ticking){
        window.requestAnimationFrame(function(){
          if(window.pageYOffset > 450){
            backBtn.classList.add('ft-visible');
          } else {
            backBtn.classList.remove('ft-visible');
          }
          ticking = false;
        });
        ticking = true;
      }
    });
    backBtn.addEventListener('click', function(e){
      e.preventDefault();
      window.scrollTo({top:0, behavior:'smooth'});
    });
  }

  // Smooth reveal animation on scroll
  var observer = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if(entry.isIntersecting){
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, {threshold: 0.1});

  document.querySelectorAll('#proFooter .ft-col, #proFooter .ft-feature-card').forEach(function(el){
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
    observer.observe(el);
  });

  // Stagger animation delay
  document.querySelectorAll('#proFooter .ft-feature-card').forEach(function(el, index){
    el.style.transitionDelay = (index * 0.1) + 's';
  });
  document.querySelectorAll('#proFooter .ft-col').forEach(function(el, index){
    el.style.transitionDelay = (index * 0.15) + 's';
  });

})();
//]]>
</script>

<!-- END PROFESSIONAL FOOTER -->

كاتب المقال محمد بلقاسم

محمد ذويب، مدون مهتم بالربح من الإنترنت، العملات الرقمية، والتسويق الإلكتروني. أشارك شروحات ودروسًا تساعد المبتدئين على تحقيق دخل عبر الإنترنت.

You may like these posts

Previous Post Next Post

نموذج الاتصال