Template HTML Free : Bisnis Marketing Agency
gudanginformatika
90 x views • 1 year ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mediafy - Social Media Marketing Agency | Had Soualem, Morocco</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3B82F6;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: scale(1.05);
}
.stats-item {
transition: all 0.3s ease;
}
.stats-item:hover {
transform: scale(1.1);
}
.location-marker {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header/Navigation -->
<header class="fixed w-full bg-white shadow-md z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-blue-600 flex items-center">
<i class="fas fa-hashtag mr-2"></i> Mediafy
</a>
<span class="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Had Soualem</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
<a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Services</a>
<a href="#about" class="nav-link text-gray-700 hover:text-blue-600">About</a>
<a href="#portfolio" class="nav-link text-gray-700 hover:text-blue-600">Case Studies</a>
<a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-600">Testimonials</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
</div>
<div class="md:hidden">
<button id="menu-toggle" class="text-gray-700 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden mt-4">
<div class="flex flex-col space-y-4">
<a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Home</a>
<a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Services</a>
<a href="#about" class="nav-link text-gray-700 hover:text-blue-600">About</a>
<a href="#portfolio" class="nav-link text-gray-700 hover:text-blue-600">Case Studies</a>
<a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-600">Testimonials</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Contact</a>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-gradient pt-32 pb-20 text-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Boost Your Social Media Presence in Morocco</h1>
<p class="text-xl mb-8 opacity-90">Mediafy helps Moroccan businesses grow and engage their audience through powerful social media strategies.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold text-center hover:bg-gray-100 transition duration-300">Get Started</a>
<a href="#services" class="border-2 border-white px-8 py-3 rounded-lg font-semibold text-center hover:bg-white hover:text-blue-600 transition duration-300">Our Services</a>
</div>
<div class="mt-6 flex items-center">
<i class="fas fa-map-marker-alt mr-2 location-marker"></i>
<span>Based in Had Soualem, serving all Morocco</span>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://cdn.pixabay.com/photo/2017/07/31/16/12/people-2557399_1280.jpg" alt="Social Media Marketing" class="rounded-lg shadow-xl animate-float max-w-md w-full">
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-white py-12 shadow-sm">
<div class="container mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="stats-item p-6 rounded-lg bg-gray-50">
<div class="text-4xl font-bold text-blue-600 mb-2">180+</div>
<div class="text-gray-600">Clients in Morocco</div>
</div>
<div class="stats-item p-6 rounded-lg bg-gray-50">
<div class="text-4xl font-bold text-blue-600 mb-2">300%</div>
<div class="text-gray-600">Average Growth</div>
</div>
<div class="stats-item p-6 rounded-lg bg-gray-50">
<div class="text-4xl font-bold text-blue-600 mb-2">5+</div>
<div class="text-gray-600">Years Experience</div>
</div>
<div class="stats-item p-6 rounded-lg bg-gray-50">
<div class="text-4xl font-bold text-blue-600 mb-2">15M+</div>
<div class="text-gray-600">Total Reach</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Social Media Services</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Specialized services designed to maximize your social media impact in the Moroccan market.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
<i class="fab fa-facebook-f text-3xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Facebook Management</h3>
<p class="text-gray-600 mb-4">Complete Facebook page management including content creation, community engagement, and ad campaigns tailored for Moroccan audiences.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- Service 2 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center mb-6">
<i class="fab fa-instagram text-3xl text-pink-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Instagram Growth</h3>
<p class="text-gray-600 mb-4">Strategic Instagram content planning, hashtag research, influencer collaborations and engagement techniques specifically for Moroccan brands.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- Service 3 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6">
<i class="fab fa-tiktok text-3xl text-green-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">TikTok Marketing</h3>
<p class="text-gray-600 mb-4">Viral content creation and growth strategies for TikTok to reach Morocco's youth demographic with engaging video content.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- Service 4 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-ad text-3xl text-yellow-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Social Media Ads</h3>
<p class="text-gray-600 mb-4">Targeted paid advertising campaigns on Facebook, Instagram and LinkedIn focused on Moroccan consumers with precise audience targeting.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- Service 5 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-users text-3xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Influencer Marketing</h3>
<p class="text-gray-600 mb-4">Connecting you with top Moroccan influencers across niches to authentically promote your brand to their engaged followers.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<!-- Service 6 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300">
<div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-chart-line text-3xl text-red-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Analytics & Reporting</h3>
<p class="text-gray-600 mb-4">Detailed monthly reports measuring your social media performance with actionable insights for the Moroccan market.</p>
<a href="#" class="text-blue-600 font-semibold flex items-center">
Learn more <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<img src="https://cdn.pixabay.com/photo/2016/11/29/08/41/apple-1868496_1280.jpg" alt="Our Team in Had Soualem" class="rounded-lg shadow-xl w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">About Mediafy</h2>
<p class="text-gray-600 mb-6">Founded in 2019 in Had Soualem, Mediafy has become one of Morocco's fastest-growing social media marketing agencies. We combine local market knowledge with global digital strategies to help Moroccan businesses succeed online.</p>
<p class="text-gray-600 mb-8">Our team of young, creative professionals understands the unique aspects of Moroccan consumer behavior and tailors social media strategies accordingly.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-check text-blue-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-gray-800 font-medium">100% Moroccan team based in Had Soualem</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-check text-blue-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-gray-800 font-medium">In-depth understanding of Moroccan social media trends</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-check text-blue-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-gray-800 font-medium">Affordable packages for businesses of all sizes</p>
</div>
</div>
</div>
<div class="mt-8">
<a href="#contact" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-300">
<i class="fas fa-comment-dots mr-2"></i> Chat with Our Team
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Moroccan Success Stories</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Real results we've achieved for businesses across Morocco.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2015/05/02/10/13/online-749625_1280.jpg" alt="Fashion Brand" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Casablanca Fashion Brand</h3>
<p class="text-gray-600 mb-4">Grew Instagram followers from 1K to 25K in 6 months through strategic content and influencer partnerships.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Instagram</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Influencer Marketing</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Content Strategy</span>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2017/02/01/11/27/coffee-2029728_1280.jpg" alt="Cafe Chain" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Marrakech Cafe Chain</h3>
<p class="text-gray-600 mb-4">Increased Facebook engagement by 400% and boosted weekend sales through targeted promotions.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Facebook</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Paid Ads</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Local Marketing</span>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="h-48 overflow-hidden">
<img src="https://cdn.pixabay.com/photo/2017/05/20/20/22/chain-2330248_1280.jpg" alt="Handicraft Business" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Fes Handicraft Business</h3>
<p class="text-gray-600 mb-4">Built international client base through Pinterest and Instagram marketing, increasing online sales by 250%.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Instagram</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Pinterest</span>
<span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">E-commerce</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300">
<i class="fas fa-book-open mr-2"></i> View All Case Studies
</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">What Moroccan Clients Say</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Hear from businesses across Morocco that have grown with our help.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Karima El Fassi" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-800">Karima El Fassi</h4>
<p class="text-gray-600 text-sm">Owner, Kaftan Boutique - Casablanca</p>
</div>
</div>
<p class="text-gray-700 mb-6">"Mediafy understood exactly how to market our traditional Moroccan clothing to both local and international customers through Instagram. Our sales have tripled since working with them."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Youssef Benani" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-800">Youssef Benani</h4>
<p class="text-gray-600 text-sm">CEO, Tech Startup - Rabat</p>
</div>
</div>
<p class="text-gray-700 mb-6">"The TikTok strategy Mediafy developed helped us reach young Moroccans in a way we never could before. Our app downloads increased by 500% in just two months!"</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amina Khadiri" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-800">Amina Khadiri</h4>
<p class="text-gray-600 text-sm">Marketing Director, Restaurant Chain - Marrakech</p>
</div>
</div>
<p class="text-gray-700 mb-6">"Mediafy's Facebook ad campaigns targeting Moroccan food lovers have filled our restaurants every weekend. Their understanding of local tastes is unmatched."</p>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 hero-gradient text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Grow Your Moroccan Business on Social Media?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Let's discuss how we can help you reach more Moroccan customers through social media.</p>
<a href="#contact" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
<i class="fas fa-calendar-check mr-2"></i> Book Free Consultation
</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Contact Mediafy</h2>
<p class="text-gray-600 mb-8">Based in Had Soualem, we serve clients across Morocco. Contact us today to discuss your social media marketing needs.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Our Office</h4>
<p class="text-gray-600"> Had Soualem, Morocco</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-phone-alt text-blue-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Phone</h4>
<p class="text-gray-600">+212 6 60 19 64 53 </p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-envelope text-blue-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Email</h4>
<p class="text-gray-600">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-clock text-blue-600"></i>
</div>
</div>
<div class="ml-4">
<h4 class="font-bold text-gray-800">Working Hours</h4>
<p class="text-gray-600">Monday - Friday: 9AM - 6PM</p>
<p class="text-gray-600">Saturday: 9AM - 1PM</p>
</div>
</div>
</div>
<div class="mt-10">
<h4 class="font-bold text-gray-800 mb-4">Follow Us</h4>
<p class="text-gray-600 mb-4">See examples of our work and get social media tips:</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition duration-300">
<i class="fab fa-tiktok"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="md:w-1/2">
<form class="bg-gray-50 p-8 rounded-xl shadow-sm">
<div class="mb-6">
<label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your Name">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="+212 6 12 34 56 78">
</div>
<div class="mb-6">
<label for="business" class="block text-gray-700 font-medium mb-2">Your Business</label>
<input type="text" id="business" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Business Name">
</div>
<div class="mb-6">
<label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
<select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select a service</option>
<option value="facebook">Facebook Management</option>
<option value="instagram">Instagram Growth</option>
<option value="tiktok">TikTok Marketing</option>
<option value="ads">Social Media Ads</option>
<option value="influencer">Influencer Marketing</option>
<option value="analytics">Analytics & Reporting</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell us about your social media needs..."></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300">
<i class="fas fa-paper-plane mr-2"></i> Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="h-96 w-full">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106376.56000693036!2d-7.6670625!3d33.572872299999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7cd4778a113b1%3A0xe1a4e191866b408!2sHad%20Soualem%2C%20Morocco!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-hashtag mr-2"></i> Mediafy
</h3>
<p class="text-gray-400 mb-4">Morocco's premier social media marketing agency based in Had Soualem.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-tiktok"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Case Studies</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Facebook Management</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Instagram Growth</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">TikTok Marketing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Social Media Ads</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Influencer Marketing</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact Info</h4>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i>
<span class="text-gray-400">Had Soualem, Morocco</span>
</li>
<li class="flex items-start">
<i class="fas fa-phone-alt mt-1 mr-2 text-gray-400"></i>
<span class="text-gray-400">+212 6 60 1 964 53 </span>
</li>
<li class="flex items-start">
<i class="fas fa-envelope mt-1 mr-2 text-gray-400"></i>
<span class="text-gray-400">[email protected]</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Mediafy. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.add('hidden');
}
});
});
</script>
</body>
</html>
