diff --git a/Landing page/index.html b/Landing page/index.html new file mode 100644 index 00000000..e7116f0c --- /dev/null +++ b/Landing page/index.html @@ -0,0 +1,215 @@ + + + + + + Welcome - Modern Landing Page + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+ +
+ +
+
+

GIFTING MADE EASIER

+

Buy A Gift Card, Get Cash Back Rewards

+

Shop from over 250 brands and earn cashback on every purchase. Get instant digital delivery!

+ +
+
+
🎁
+
+
+ + +
+
+

EXCLUSIVE DEALS

+

Save More With Premium Membership

+

Get up to 10% extra cashback, exclusive deals, and priority customer support. Join today!

+ +
+
+
⭐
+
+
+ + +
+ + +
+
+ + +
+
+
+

Send gift cards instantly through text.

+
+ + +
+
+
📱
+
+
+
+

Invite a friend & get 1% Moola cash back on all their purchases.

+
+
📱
+
+
+
+
+ + +
+
+

Send A Gift Card and Collect Rewards

+

Moola provides unbeatable deals on the gift cards you love. Buy for a friend or better yet, for yourself and collect rewards. With Moola, giving the perfect gift and saving money on the brands you love has never been easier or more convenient. Shop over 250 brands across Canada.

+ +
+
+ +

Walmart Canada

+

Buy Now And Get

+ +
+
+ +

Esso™ and Mobil...

+

Buy Now And Get

+ +
+
+ +

Starbucks

+

Buy Now And Get

+ +
+
+ +

Petsmart

+

Buy Now And Get

+ +
+
+ +

DoorDash

+

Buy Now And Get

+ +
+
+ +

Amazon.ca

+

Buy Now And Get

+ +
+
+
+
+ + +
+
+

Moola Saves Money On Gifts & Everyday Essentials

+

When we think about saving money, we often think about cutting back on non-essentials. However, that's usually not possible for special occasions or everyday purchases - gifts and dinners add up. So, making some small tweaks + great deals can make a big impact on your wallet. Through Moola, you can easily buy gift cards to your favourite stores at a lower price. Why not shop smarter, score deals, and savour the savings!

+ +
+
+
🎁
+

Deals Each Week

+

Each week, we feature new deals in the Moola Marketplace where you can save up to 15% on popular brands. Check out this week's feature deal

+ +
+
+
🛒
+

Everyday Essentials

+

Moola has deals on all your everyday essentials such as grocery, fuel, pharmacy, food delivery, and more. It all adds up to great savings!

+ +
+
+
📱
+

Download App

+

Download the Moola App and start collecting cash back and bonus gift vouchers.

+ +
+
+
+
+ + +
+
+

Why Choose Us

+
+
+
⚡
+

Fast

+

Lightning quick performance optimized for your needs

+
+
+
🎨
+

Beautiful

+

Stunning design that looks great on all devices

+
+
+
🔒
+

Secure

+

Enterprise-grade security for your peace of mind

+
+
+
+
+ + + + + + + diff --git a/Landing page/script.js b/Landing page/script.js new file mode 100644 index 00000000..32cf4d3d --- /dev/null +++ b/Landing page/script.js @@ -0,0 +1,128 @@ +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + + // Remove active class from all nav links + document.querySelectorAll('.nav-links a').forEach(link => { + link.classList.remove('active'); + }); + + // Add active class to clicked link + this.classList.add('active'); + + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Add scroll animation for feature cards +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +document.querySelectorAll('.feature-card').forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(card); +}); + +// Search bar functionality +const searchInput = document.querySelector('.search-input'); +const searchBtn = document.querySelector('.search-btn'); + +if (searchBtn) { + searchBtn.addEventListener('click', function() { + const query = searchInput.value.trim(); + if (query) { + console.log('Searching for:', query); + alert('Searching for: ' + query); + searchInput.value = ''; + } + }); +} + +if (searchInput) { + searchInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + const query = this.value.trim(); + if (query) { + console.log('Searching for:', query); + alert('Searching for: ' + query); + this.value = ''; + } + } + }); +} + +// Hero card slide indicators +const slideDots = document.querySelectorAll('.slide-dot'); +const heroSlides = document.querySelectorAll('.hero-slide'); +let currentSlide = 0; + +slideDots.forEach(dot => { + dot.addEventListener('click', function() { + const slideIndex = parseInt(this.getAttribute('data-slide')); + currentSlide = slideIndex; + updateSlides(); + }); +}); + +function updateSlides() { + // Update slide visibility + heroSlides.forEach((slide, index) => { + if (index === currentSlide) { + slide.classList.add('hero-slide-active'); + } else { + slide.classList.remove('hero-slide-active'); + } + }); + + // Update dot indicators + slideDots.forEach((dot, index) => { + if (index === currentSlide) { + dot.classList.add('active'); + } else { + dot.classList.remove('active'); + } + + }); +} + +// Auto-advance slides every 5 seconds +setInterval(() => { + currentSlide = (currentSlide + 1) % heroSlides.length; + updateSlides(); +}, 5000); + + +// Hamburger Menu +const menuToggle = document.getElementById('menu-toggle'); +const navLinks = document.getElementById('nav-links'); + +menuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + menuToggle.classList.toggle('active'); + + if (navbar.classList.contains("menu-open")) { + navLinks.appendChild(downloadBtn); // move inside + } else { + navbar.querySelector(".container").appendChild(downloadBtn); // move back outside + } +}); \ No newline at end of file diff --git a/Landing page/style.css b/Landing page/style.css new file mode 100644 index 00000000..27ee6aff --- /dev/null +++ b/Landing page/style.css @@ -0,0 +1,873 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --secondary-color: #ec4899; + --text-dark: #1f2937; + --text-light: #6b7280; + --bg-light: #f9fafb; + --bg-white: #ffffff; + --border-color: #e5e7eb; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + color: var(--text-dark); + line-height: 1.6; + background-color: var(--bg-white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Navigation */ +.navbar { + background-color: var(--bg-white); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 20px; +} + +.nav-brand { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + text-decoration: none; + transition: opacity 0.3s ease; +} + + +.nav-links { + display: flex; + list-style: none; + gap: 4rem; +} + +.nav-links a { + text-decoration: none; + color: #000000A6; + font-weight: 500; + transition: all 0.3s ease; + position: relative; + padding-bottom: 8px; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 3px; + background-color: #5b30f2; + transition: width 0.3s ease; +} + +.nav-links a:hover { + color: #000000; +} + +.nav-links a.active::after { + width: 100%; +} + +/* Hamburger Menu */ +.menu-toggle { + display: none; + flex-direction: column; + cursor: pointer; + gap: 5px; +} + +.menu-toggle span { + width: 25px; + height: 3px; + background: #333; + border-radius: 2px; + transition: all 0.3s ease; +} + +/* Mobile & Tablet View */ +@media (max-width: 768px) { + .menu-toggle { + display: flex; + } + + .nav-links { + position: absolute; + top: 70px; + right: 0; + background: #fff; + flex-direction: column; + width: 100%; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + text-align: center; + } + + .nav-links.active { + max-height: 400px; + padding: 1rem 0; + } + + .nav-links.active .btn-primary { + margin-top: 1rem; + display: none; + } + /* Make the button look full width when inside menu */ + #download-btn { + width: 80%; + margin-top: 1rem; + } + + /* Hide the button when menu is closed (on mobile) */ + .navbar:not(.menu-open) #download-btn { + display: none; + } + + .menu-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + .menu-toggle.active span:nth-child(2) { + opacity: 0; + } + .menu-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } +} + +/* Search Bar */ +.search-bar-container { + background-color: #7514e3; + border-bottom: 1px solid var(--border-color); + padding: 1rem 20px; +} + +.search-bar { + display: flex; + align-items: center; + gap: 0; + background-color: white; + border-radius: 25px; + overflow: hidden; + max-width: 1300px; + margin: 0 auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.search-input { + flex: 1; + border: none; + background: white; + font-size: 1rem; + outline: none; + color: var(--text-dark); + padding: 12px 16px; +} + +.search-input::placeholder { + color: #999; +} + +.search-btn { + background-color: #4C0D94; + color: white; + border: none; + font-size: 1.1rem; + cursor: pointer; + padding: 12px 16px; + transition: background-color 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.search-btn:hover { + background-color: #1a1a1a; +} + +/* Hero Section */ +.hero { + background-color: white; + color: var(--text-dark); + padding: 60px 20px; + text-align: center; +} + +.hero-card { + background: linear-gradient(135deg, #7514e3 0%, #9d4edd 100%); + color: white; + border-radius: 20px; + padding: 2rem; + margin-bottom: 2rem; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(117, 20, 227, 0.2); +} + + +.hero-card-top { + max-width: 100%; + height: 350px; + margin: 0 auto 2rem; + padding: 3rem !important; + position: relative; + overflow: hidden; +} + +.hero-slide { + display: none; + align-items: center; + justify-content: space-between; + width: 100%; + height: 100%; + animation: slideIn 0.5s ease-in-out; +} + +.hero-slide-active { + display: flex; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.hero-card-content { + flex: 1; + text-align: left; +} + +.hero-card-subtitle { + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 1px; + opacity: 0.9; + margin-bottom: 0.5rem; +} + +.hero-card-title { + font-size: 2.5rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 1rem; +} + +.hero-card-description { + font-size: 1rem; + line-height: 1.6; + opacity: 0.95; + margin-bottom: 1.5rem; +} + +.btn-shop-deals { + background-color: #ec4899; + color: white; + padding: 12px 28px; + border: none; + border-radius: 25px; + font-size: 0.9rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + letter-spacing: 0.5px; +} + +.btn-shop-deals:hover { + background-color: #db2777; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4); +} + +.hero-card-image { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; +} + +.hero-slide-indicators { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 10px; +} + +.slide-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.4); + cursor: pointer; + transition: all 0.3s ease; +} + +.slide-dot.active { + background-color: #5b30f2; + width: 10px; +} + +.slide-dot:hover { + background-color: rgba(255, 255, 255, 0.7); +} + +.hero-cards-bottom { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + margin-top: 3rem; +} + +.hero-card-bottom-left { + background: linear-gradient(135deg, #ff9a7b 0%, #ffb3a0 100%) !important; + display: flex !important; + align-items: center; + justify-content: space-between; + padding: 2.5rem !important; +} + +.hero-card-bottom-right { + background: linear-gradient(135deg, #8b7cff 0%, #a89eff 100%) !important; + display: flex !important; + align-items: center; + justify-content: space-between; + padding: 2.5rem !important; +} + +.card-content-left { + flex: 1; +} + +.card-content-left h3 { + font-size: 1.4rem; + font-weight: 700; + line-height: 1.4; + margin-bottom: 1.5rem; + color: white; +} + +.card-image-right { + flex: 0.8; + font-size: 3rem; + text-align: center; +} + +.app-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.app-btn { + background-color: rgba(0, 0, 0, 0.2); + color: white; + border: none; + padding: 10px 16px; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; +} + +.app-btn:hover { + background-color: rgba(0, 0, 0, 0.3); + transform: translateY(-2px); +} + +.card-icon { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.hero-card h3 { + font-size: 1.3rem; + margin-bottom: 0.5rem; + font-weight: 600; +} + +.hero-card p { + font-size: 0.95rem; + opacity: 0.9; +} + +.hero-content { + margin: 2rem 0; +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; + font-weight: 800; +} + +.hero-content p { + font-size: 1.25rem; + margin-bottom: 2rem; + opacity: 0.95; +} + +/* Tablets (≤1024px) */ +@media (max-width: 1024px) { + .hero-card-title { + font-size: 2rem; + } + + .hero-card-description { + font-size: 0.95rem; + } + + .hero-cards-bottom { + grid-template-columns: 1fr; /* stack bottom cards */ + gap: 1.5rem; + } + + .hero-card-bottom-left, + .hero-card-bottom-right { + flex-direction: column; + text-align: center; + } + + .card-content-left { + margin-bottom: 1rem; + } + + .card-image-right { + font-size: 2.5rem; + } +} + +/* Mobile (≤768px) */ +@media (max-width: 768px) { + .hero-card-top { + height: auto; /* let it grow naturally */ + padding: 2rem !important; + } + + /* ✅ Stack text and image vertically */ + .hero-slide { + flex-direction: column; + text-align: center; + } + + .hero-card-content { + text-align: center; + margin-bottom: 1rem; + } + + .hero-card-title { + font-size: 1.8rem; + } + + .hero-card-description { + font-size: 0.9rem; + } + + .btn-shop-deals { + padding: 10px 20px; + font-size: 0.85rem; + } + + /* ✅ Adjust dots */ + .hero-slide-indicators { + bottom: 10px; + } + + /* ✅ Bottom cards */ + .hero-cards-bottom { + grid-template-columns: 1fr; + } + + .hero-card-bottom-left, + .hero-card-bottom-right { + flex-direction: column; + padding: 2rem !important; + } + + .app-buttons { + justify-content: center; + } + + .hero-content h1 { + font-size: 2rem; + } + + .hero-content p { + font-size: 1rem; + } +} + +/* Small Phones (≤480px) */ +@media (max-width: 480px) { + .hero-card-title { + font-size: 1.5rem; + } + + .hero-card-description { + font-size: 0.85rem; + } + + .btn-shop-deals { + width: 100%; + } + + .hero-card { + padding: 1.5rem; + } +} + +/* Brands Section */ +.brands-section { + padding: 80px 20px; + background-color: var(--bg-light); +} + +.brands-section h2 { + font-size: 2.2rem; + color: #5b30f2; + text-align: center; + margin-bottom: 1.5rem; + font-weight: 500; +} + +.brands-section > .container > p { + text-align: center; + color: var(--text-light); + max-width: 700px; + margin: 0 auto 3rem; + font-size: 0.95rem; + line-height: 1.6; +} + +.brands-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 2rem; +} + +.brand-card { + background-color: white; + border-radius: 12px; + padding: 2rem 1.5rem; + text-align: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; +} + +.brand-card:hover { + transform: translateY(-8px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); +} + +.brand-logo { + font-size: 3rem; + margin-bottom: 1rem; +} + +.brand-card h4 { + font-size: 1rem; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 0.5rem; +} + +.brand-offer { + font-size: 0.85rem; + color: var(--text-light); + margin-bottom: 1rem; +} + +.brand-btn { + background-color: #22c55e; + color: white; + border: none; + padding: 8px 16px; + border-radius: 6px; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.brand-btn:hover { + background-color: #16a34a; + transform: translateY(-2px); +} + +/* Savings Section */ +.savings-section { + padding: 80px 20px; + background-color: white; +} + +.savings-section h2 { + font-size: 2.2rem; + color: #5b30f2; + text-align: center; + margin-bottom: 1.5rem; + font-weight: 600; +} + +.savings-section > .container > p { + text-align: center; + color: var(--text-light); + max-width: 800px; + margin: 0 auto 3rem; + font-size: 0.95rem; + line-height: 1.6; +} + +.savings-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.savings-card { + background-color: #f0f0f0; + border-radius: 16px; + padding: 2.5rem 2rem; + text-align: center; + transition: all 0.3s ease; + display: flex; + flex-direction: column; +} + + +.savings-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.savings-card h3 { + font-size: 1.2rem; + font-weight: 700; + color: #5b30f2; + margin-bottom: 1rem; +} + +.savings-card p { + font-size: 0.9rem; + color: var(--text-light); + margin-bottom: 1.5rem; + line-height: 1.5; + flex-grow: 1; +} + +.savings-btn { + background-color: #5b30f2; + color: white; + border: none; + padding: 12px 32px; + border-radius: 25px; + font-size: 0.85rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + letter-spacing: 0.5px; + margin-top: auto; +} + +.savings-btn:hover { + background-color: #4a1fb8; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(91, 48, 242, 0.3); +} + +/* Buttons */ +.btn { + padding: 12px 32px; + border: none; + border-radius: 25px; + font-size: 1rem; + font-weight: 100; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-block; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-primary:hover { + background-color: #4f46e5; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); +} + +.btn-secondary { + background-color: var(--primary-color); + color: white; +} + +.btn-secondary:hover { + background-color: #4f46e5; + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); +} + +/* Features Section */ +.features { + padding: 80px 20px; + background-color: var(--bg-light); +} + +.features h2 { + font-size: 2.5rem; + margin-bottom: 3rem; + text-align: center; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.feature-card { + background-color: var(--bg-white); + padding: 2rem; + border-radius: 8px; + text-align: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.feature-card p { + color: var(--text-light); +} + +/* About Section */ +.about { + padding: 80px 20px; + background-color: var(--bg-white); +} + +.about h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; +} + +.about p { + font-size: 1.1rem; + color: var(--text-light); + max-width: 600px; + margin: 0 auto; + text-align: center; +} + +/* Contact Section */ +.contact { + padding: 80px 20px; + background-color: var(--bg-light); +} + +.contact h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; +} + +.contact-form { + max-width: 500px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-form input, +.contact-form textarea { + padding: 12px 16px; + border: 1px solid var(--border-color); + border-radius: 6px; + font-family: inherit; + font-size: 1rem; + transition: border-color 0.3s ease; +} + +.contact-form input:focus, +.contact-form textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +/* Footer */ +.footer { + background-color: #7514e3; + color: white; + padding: 2rem 20px; + text-align: center; +} + +/* Responsive */ +@media (max-width: 768px) { + .nav-links { + gap: 1rem; + font-size: 0.9rem; + } + + .hero-content h1 { + font-size: 2rem; + } + + .hero-content p { + font-size: 1rem; + } + + .features h2, + .about h2, + .contact h2 { + font-size: 2rem; + } + + .features-grid { + grid-template-columns: 1fr; + } +}