Contact information
<!-- ============================================================
SECTION: meh-footer.liquid
DESCRIPTION: Premium footer section for MEH Luxe fashion brand
FEATURES: Glassmorphism, animated gradient, floating particles,
scroll reveal, luxury interactions
AUTHOR: MEH Luxe Creative Team
============================================================ -->
<!-- ============================================================
EXTERNAL ASSETS
============================================================ -->
{{ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css' | stylesheet_tag }}
<!-- ============================================================
SECTION WRAPPER
============================================================ -->
<div class="meh-footer" id="meh-footer" role="contentinfo" aria-label="MEH Luxe footer">
<!-- ============================================================
FLOATING PARTICLES CANVAS
============================================================ -->
<canvas id="particles-canvas" aria-hidden="true"></canvas>
<!-- ============================================================
MAIN GLASS CARD
============================================================ -->
<div class="meh-card" data-aos="fade-up">
<!-- ============================================================
LUXURY BADGE WITH ANIMATION
============================================================ -->
<span class="meh-badge" aria-label="MEH Luxe premium badge">
✨ MEH Luxe ✨
</span>
<!-- ============================================================
HERO HEADINGS
============================================================ -->
<h1 class="meh-title" data-aos="fade-up" data-aos-delay="100">
FOR EVERY VERSION OF YOU
</h1>
<h3 class="meh-subtitle" data-aos="fade-up" data-aos-delay="150">
<i class="fa-solid fa-crown" aria-hidden="true"></i>
Luxury Women's Clothing Brand
</h3>
<!-- ============================================================
DESCRIPTION
============================================================ -->
<p class="meh-description" data-aos="fade-up" data-aos-delay="200">
Welcome to <strong>MEH Luxe</strong>, your destination for elegant stitched &
unstitched outfits. We combine premium fabrics, timeless designs, and
exceptional craftsmanship to create collections that celebrate every
version of you. From everyday essentials to statement pieces, every
design is made with comfort, confidence, and style in mind.
</p>
<!-- ============================================================
MANUFACTURER CREDIT
============================================================ -->
<div class="meh-manufacturer" data-aos="fade-up" data-aos-delay="250">
<i class="fa-solid fa-heart" aria-hidden="true"></i>
Designed & Crafted with Love by
<strong>MEH Luxe Creative Team</strong>
</div>
<!-- ============================================================
COLLECTION TAGS
============================================================ -->
<div class="meh-collections" data-aos="fade-up" data-aos-delay="300">
<span>Premium Lawn</span>
<span>Printed Collection</span>
<span>Casual Wear</span>
<span>Semi Formal</span>
<span>New Arrivals</span>
<span>Coming Soon</span>
</div>
<!-- ============================================================
PRIMARY CTA BUTTON WITH LUXURY ANIMATION
============================================================ -->
<a class="meh-store-btn" href="https://mehluxe.store" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="350" aria-label="Visit MEH Luxe online store">
<i class="fa-solid fa-bag-shopping" aria-hidden="true"></i>
Visit Store
<span class="btn-shimmer" aria-hidden="true"></span>
</a>
<!-- ============================================================
SOCIAL TITLE
============================================================ -->
<div class="meh-social-title" data-aos="fade-up" data-aos-delay="400">
<span>Follow & Connect With Us</span>
</div>
<!-- ============================================================
SOCIAL GRID – PREMIUM BUTTONS
============================================================ -->
<div class="meh-social-grid" data-aos="fade-up" data-aos-delay="450">
<a href="https://www.instagram.com/meh.luxe?igsh=b3BhN2YyenJoNmh4" target="_blank" rel="noopener noreferrer" class="meh-social instagram" aria-label="Follow MEH Luxe on Instagram">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span>Instagram</span>
</a>
<a href="https://www.tiktok.com/@meh.luxe?_r=1&_t=ZN-988RpdhLZTS" target="_blank" rel="noopener noreferrer" class="meh-social tiktok" aria-label="Follow MEH Luxe on TikTok">
<i class="fab fa-tiktok" aria-hidden="true"></i>
<span>TikTok</span>
</a>
<a href="https://www.facebook.com/share/1F3q3uLPMJ/" target="_blank" rel="noopener noreferrer" class="meh-social facebook" aria-label="Follow MEH Luxe on Facebook">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
<span>Facebook</span>
</a>
<a href="https://wa.me/923019147703" target="_blank" rel="noopener noreferrer" class="meh-social whatsapp" aria-label="Contact MEH Luxe on WhatsApp">
<i class="fab fa-whatsapp" aria-hidden="true"></i>
<span>WhatsApp</span>
</a>
<a href="https://whatsapp.com/channel/0029VbD2bgmAO7RAAQE4fU22" target="_blank" rel="noopener noreferrer" class="meh-social channel" aria-label="Join MEH Luxe WhatsApp Channel and get 10% off">
<i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
<span>WhatsApp Channel</span>
<small class="channel-offer">GET 10% OFF</small>
</a>
<a href="https://youtube.com/@mehluxe1?si=3vHwV5BR4-l4u5es" target="_blank" rel="noopener noreferrer" class="meh-social youtube" aria-label="Subscribe to MEH Luxe on YouTube">
<i class="fab fa-youtube" aria-hidden="true"></i>
<span>YouTube</span>
</a>
</div>
<!-- ============================================================
FOOTER DIVIDER WITH LUXURY LINE
============================================================ -->
<div class="meh-footer-divider" aria-hidden="true">
<span class="divider-line"></span>
<i class="fa-solid fa-gem" aria-hidden="true"></i>
<span class="divider-line"></span>
</div>
<p class="meh-copyright" data-aos="fade-up" data-aos-delay="500">
© 2026 <strong>MEH Luxe</strong> — All Rights Reserved.
</p>
</div>
<!-- END meh-card -->
</div>
<!-- END meh-footer -->
<!-- ============================================================
STYLES – COMPLETE CSS WITH PREMIUM ANIMATIONS
============================================================ -->
<style>
/* ============================================================
FONT IMPORTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
/* ============================================================
ROOT VARIABLES
============================================================ */
:root {
--meh-primary: #6B5AA6;
--meh-primary-dark: #58428E;
--meh-primary-light: #8A76C4;
--meh-gold: #D4AF37;
--meh-rose: #E76BA8;
--meh-bg-start: #FFF8F5;
--meh-bg-mid: #FDEEEF;
--meh-bg-end: #F6F0FF;
--meh-glass-bg: rgba(255, 255, 255, 0.55);
--meh-glass-border: rgba(255, 255, 255, 0.70);
--meh-shadow: rgba(108, 83, 165, 0.12);
--meh-text-dark: #2C1F3D;
--meh-text-muted: #666;
--meh-radius: 28px;
--meh-transition: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ============================================================
SECTION WRAPPER – ANIMATED GRADIENT BACKGROUND
============================================================ */
.meh-footer {
position: relative;
padding: 80px 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--meh-bg-start), var(--meh-bg-mid), var(--meh-bg-end));
background-size: 400% 400%;
animation: meh-bgmove 12s ease-in-out infinite;
font-family: 'Poppins', sans-serif;
overflow: hidden;
isolation: isolate;
}
@keyframes meh-bgmove {
0% { background-position: 0% 50%; }
33% { background-position: 100% 50%; }
66% { background-position: 50% 100%; }
100% { background-position: 0% 50%; }
}
/* ============================================================
FLOATING PARTICLES CANVAS
============================================================ */
#particles-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* ============================================================
GLASSMORPHISM CARD
============================================================ */
.meh-card {
position: relative;
z-index: 1;
max-width: 1150px;
width: 100%;
margin: auto;
background: var(--meh-glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--meh-radius);
padding: 60px 65px;
text-align: center;
box-shadow:
0 20px 60px var(--meh-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
border: 1px solid var(--meh-glass-border);
transition: all var(--meh-transition);
}
.meh-card:hover {
box-shadow:
0 30px 80px rgba(108, 83, 165, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* ============================================================
LUXURY BADGE – FLOATING ANIMATION
============================================================ */
.meh-badge {
display: inline-block;
padding: 10px 28px;
background: linear-gradient(135deg, var(--meh-primary), var(--meh-primary-dark));
color: #fff;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 20px;
box-shadow: 0 8px 25px rgba(107, 90, 166, 0.30);
animation: meh-float 3.5s ease-in-out infinite;
transition: all var(--meh-transition);
position: relative;
}
.meh-badge:hover {
transform: scale(1.05);
box-shadow: 0 12px 35px rgba(107, 90, 166, 0.45);
}
@keyframes meh-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ============================================================
TYPOGRAPHY – ELEGANT
============================================================ */
.meh-title {
font-family: 'Playfair Display', serif;
font-size: 58px;
font-weight: 700;
color: var(--meh-text-dark);
margin: 10px 0 8px;
letter-spacing: 2px;
line-height: 1.15;
background: linear-gradient(135deg, #5A407A, var(--meh-primary), #8A76C4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.meh-subtitle {
font-size: 22px;
font-weight: 400;
color: #555;
margin-bottom: 25px;
letter-spacing: 0.5px;
}
.meh-subtitle i {
color: var(--meh-gold);
margin-right: 10px;
font-size: 18px;
}
.meh-description {
max-width: 880px;
margin: 0 auto;
font-size: 16.5px;
line-height: 1.9;
color: var(--meh-text-muted);
font-weight: 300;
letter-spacing: 0.3px;
}
.meh-description strong {
color: var(--meh-primary);
font-weight: 600;
}
/* ============================================================
MANUFACTURER
============================================================ */
.meh-manufacturer {
margin: 35px 0 30px;
font-size: 17px;
color: #555;
font-weight: 400;
letter-spacing: 0.3px;
}
.meh-manufacturer i {
color: var(--meh-rose);
margin-right: 8px;
animation: meh-heartbeat 1.8s ease-in-out infinite;
}
@keyframes meh-heartbeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.2); }
30% { transform: scale(1); }
45% { transform: scale(1.15); }
60% { transform: scale(1); }
}
.meh-manufacturer strong {
color: var(--meh-text-dark);
font-weight: 600;
}
/* ============================================================
COLLECTION TAGS – PREMIUM PILLS
============================================================ */
.meh-collections {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 38px;
}
.meh-collections span {
padding: 12px 26px;
background: rgba(255, 255, 255, 0.80);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 50px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
transition: all var(--meh-transition);
font-size: 14px;
font-weight: 500;
color: #444;
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: default;
letter-spacing: 0.3px;
}
.meh-collections span:hover {
background: linear-gradient(135deg, var(--meh-primary), var(--meh-primary-dark));
color: #fff;
transform: translateY(-6px) scale(1.03);
box-shadow: 0 15px 35px rgba(107, 90, 166, 0.30);
border-color: transparent;
}
/* ============================================================
PRIMARY STORE BUTTON – LUXURY WITH SHIMMER
============================================================ */
.meh-store-btn {
position: relative;
display: inline-block;
margin: 10px 0 45px;
padding: 18px 48px;
background: linear-gradient(135deg, var(--meh-primary), var(--meh-primary-dark));
color: #fff !important;
font-size: 18px;
font-weight: 600;
border-radius: 60px;
text-decoration: none;
transition: all var(--meh-transition);
box-shadow: 0 15px 40px rgba(107, 90, 166, 0.40);
overflow: hidden;
letter-spacing: 1px;
border: none;
cursor: pointer;
}
.meh-store-btn i {
margin-right: 12px;
font-size: 20px;
}
/* Shimmer effect overlay */
.btn-shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transform: skewX(-20deg);
transition: none;
animation: meh-shimmer 3.5s ease-in-out infinite;
}
@keyframes meh-shimmer {
0% { left: -100%; }
50% { left: 150%; }
100% { left: 150%; }
}
.meh-store-btn:hover {
transform: translateY(-6px) scale(1.04);
box-shadow: 0 22px 55px rgba(107, 90, 166, 0.50);
background: linear-gradient(135deg, var(--meh-primary-dark), #4A3578);
}
.meh-store-btn:active {
transform: scale(0.96);
}
/* ============================================================
SOCIAL TITLE
============================================================ */
.meh-social-title {
font-size: 24px;
font-weight: 600;
color: var(--meh-text-dark);
margin-bottom: 28px;
letter-spacing: 1px;
}
.meh-social-title span {
position: relative;
display: inline-block;
}
.meh-social-title span::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--meh-primary), var(--meh-gold));
border-radius: 3px;
}
/* ============================================================
SOCIAL GRID – PREMIUM BUTTONS
============================================================ */
.meh-social-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
.meh-social {
padding: 16px 34px;
border-radius: 60px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all var(--meh-transition);
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}
.meh-social i {
font-size: 20px;
transition: transform var(--meh-transition);
}
.meh-social span {
position: relative;
z-index: 1;
}
/* Individual social gradients with luxury depth */
.meh-social.instagram {
background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
}
.meh-social.tiktok {
background: linear-gradient(135deg, #111, #1A1A1A, #333);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}
.meh-social.facebook {
background: linear-gradient(135deg, #1877F2, #0D65D9);
}
.meh-social.whatsapp {
background: linear-gradient(135deg, #25D366, #1DA85C);
}
.meh-social.channel {
background: linear-gradient(135deg, #0B8457, #0E9E6A);
padding: 16px 28px;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.meh-social.channel .channel-offer {
background: rgba(255, 215, 0, 0.25);
padding: 4px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
color: #FFD700;
text-transform: uppercase;
animation: meh-pulse-offer 2s ease-in-out infinite;
border: 1px solid rgba(255, 215, 0, 0.3);
}
@keyframes meh-pulse-offer {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
}
.meh-social.youtube {
background: linear-gradient(135deg, #FF0000, #CC0000);
}
/* Social hover effects – premium lift + glow */
.meh-social:hover {
transform: translateY(-8px) scale(1.04);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.meh-social:hover i {
transform: scale(1.2) rotate(-5deg);
}
.meh-social.channel:hover .channel-offer {
animation: none;
transform: scale(1.1);
background: rgba(255, 215, 0, 0.35);
}
/* Social active state */
.meh-social:active {
transform: scale(0.95);
}
/* ============================================================
FOOTER DIVIDER
============================================================ */
.meh-footer-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 40px 0 20px;
}
.divider-line {
flex: 1;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--meh-primary), transparent);
}
.meh-footer-divider i {
color: var(--meh-gold);
font-size: 18px;
animation: meh-float 3s ease-in-out infinite;
}
/* ============================================================
COPYRIGHT
============================================================ */
.meh-copyright {
font-size: 14px;
color: #888;
font-weight: 300;
margin: 5px 0 0;
letter-spacing: 0.5px;
}
.meh-copyright strong {
color: var(--meh-primary);
font-weight: 500;
}
/* ============================================================
SCROLL REVEAL ANIMATIONS (AOS-like)
============================================================ */
[data-aos] {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-aos].aos-animate {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays are handled via inline data-aos-delay */
/* ============================================================
RESPONSIVE LAYOUT – MOBILE FIRST REFINED
============================================================ */
@media (max-width: 992px) {
.meh-card {
padding: 45px 35px;
}
.meh-title {
font-size: 46px;
}
.meh-social {
padding: 14px 26px;
font-size: 15px;
}
}
@media (max-width: 768px) {
.meh-footer {
padding: 50px 16px;
}
.meh-card {
padding: 32px 20px;
border-radius: 22px;
}
.meh-title {
font-size: 34px;
letter-spacing: 1px;
}
.meh-subtitle {
font-size: 18px;
}
.meh-description {
font-size: 15px;
line-height: 1.8;
}
.meh-badge {
font-size: 12px;
padding: 8px 20px;
}
.meh-store-btn {
width: 100%;
padding: 16px 20px;
font-size: 17px;
text-align: center;
justify-content: center;
}
.meh-social-grid {
flex-direction: column;
align-items: stretch;
}
.meh-social {
justify-content: center;
width: 100%;
padding: 15px 20px;
font-size: 15px;
}
.meh-social.channel {
padding: 15px 20px;
gap: 8px;
}
.meh-social.channel .channel-offer {
font-size: 10px;
padding: 3px 12px;
}
.meh-collections span {
font-size: 13px;
padding: 10px 18px;
}
.meh-manufacturer {
font-size: 15px;
}
.meh-social-title {
font-size: 20px;
}
.meh-footer-divider {
margin: 30px 0 15px;
}
.divider-line {
max-width: 50px;
}
.meh-copyright {
font-size: 13px;
}
}
@media (max-width: 480px) {
.meh-card {
padding: 24px 16px;
border-radius: 18px;
}
.meh-title {
font-size: 28px;
}
.meh-subtitle {
font-size: 16px;
}
.meh-description {
font-size: 14px;
}
.meh-collections {
gap: 8px;
}
.meh-collections span {
font-size: 12px;
padding: 8px 14px;
}
.meh-store-btn {
font-size: 15px;
padding: 14px 16px;
}
.meh-social {
font-size: 14px;
padding: 13px 16px;
}
.meh-social.channel .channel-offer {
font-size: 9px;
padding: 2px 10px;
}
}
/* ============================================================
ACCESSIBILITY – REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.meh-footer,
.meh-badge,
.meh-store-btn .btn-shimmer,
.meh-manufacturer i,
.meh-footer-divider i,
.meh-social.channel .channel-offer,
[data-aos] {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-aos] {
opacity: 1 !important;
transform: none !important;
}
.meh-card:hover {
transform: none !important;
}
.meh-collections span:hover,
.meh-store-btn:hover,
.meh-social:hover {
transform: none !important;
}
}
/* ============================================================
FOCUS VISIBLE – KEYBOARD NAVIGATION
============================================================ */
.meh-store-btn:focus-visible,
.meh-social:focus-visible {
outline: 3px solid var(--meh-primary);
outline-offset: 4px;
transform: scale(1.02);
}
.meh-badge:focus-visible {
outline: 3px solid var(--meh-gold);
outline-offset: 4px;
}
</style>
<!-- ============================================================
SCRIPT – FLOATING PARTICLES & SCROLL REVEAL
============================================================ -->
<script>
(function() {
'use strict';
// ============================================================
// 1. FLOATING PARTICLES (Canvas)
// ============================================================
const canvas = document.getElementById('particles-canvas');
if (canvas) {
const ctx = canvas.getContext('2d');
let particles = [];
const particleCount = 45;
let w, h;
function resizeCanvas() {
const rect = canvas.parentElement.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
w = canvas.width;
h = canvas.height;
}
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.size = Math.random() * 5 + 2;
this.speedX = (Math.random() - 0.5) * 0.5;
this.speedY = (Math.random() - 0.5) * 0.5;
this.opacity = Math.random() * 0.4 + 0.1;
this.color = `hsla(${Math.random() * 60 + 260}, 50%, 70%, ${this.opacity})`;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > w) this.speedX *= -1;
if (this.y < 0 || this.y > h) this.speedY *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.shadowColor = 'rgba(107, 90, 166, 0.15)';
ctx.shadowBlur = 10;
ctx.fill();
ctx.shadowBlur = 0;
}
}
function initParticles() {
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
function animateParticles() {
ctx.clearRect(0, 0, w, h);
for (const p of particles) {
p.update();
p.draw();
}
requestAnimationFrame(animateParticles);
}
resizeCanvas();
initParticles();
animateParticles();
window.addEventListener('resize', () => {
resizeCanvas();
initParticles();
});
}
// ============================================================
// 2. SCROLL REVEAL (Intersection Observer)
// ============================================================
const revealElements = document.querySelectorAll('[data-aos]');
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const el = entry.target;
const delay = parseInt(el.getAttribute('data-aos-delay')) || 0;
setTimeout(() => {
el.classList.add('aos-animate');
}, delay);
observer.unobserve(el);
}
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -40px 0px'
});
revealElements.forEach((el) => observer.observe(el));
} else {
// Fallback: show all
revealElements.forEach((el) => el.classList.add('aos-animate'));
}
// ============================================================
// 3. ACCESSIBILITY: Ensure particles canvas is hidden from screen readers
// ============================================================
if (canvas) {
canvas.setAttribute('aria-hidden', 'true');
}
})();
</script>