Spaces:
Running
Running
| <html lang="en-CA"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="ACFO-ACAF - Association of Canadian Financial Officers. Modernizing financial leadership in the Canadian public sector."> | |
| <title>ACFO-ACAF | Association of Canadian Financial Officers</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| display: ['Montserrat', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 500: '#10b981', | |
| 600: '#059669', | |
| 700: '#047857', | |
| }, | |
| canada: { | |
| red: '#ff0000', | |
| dark: '#1a365d', | |
| } | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-in', | |
| 'slide-up': 'slideUp 0.6s ease-out', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(30px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(135deg, #0284c7 0%, #059669 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #0c4a6e 0%, #065f46 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>'); | |
| opacity: 0.3; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 0; | |
| background-color: #0ea5e9; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .counter { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .mobile-menu { | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .mobile-menu.active { | |
| transform: translateX(0); | |
| } | |
| .search-overlay { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .search-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .sticky-nav { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 50; | |
| transform: translateY(-100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .sticky-nav.visible { | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans text-gray-800 antialiased bg-gray-50"> | |
| <!-- Sticky Navigation --> | |
| <nav class="sticky-nav glass-effect border-b border-gray-200 shadow-sm" id="stickyNav"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-primary-600 to-secondary-600 rounded-lg flex items-center justify-center text-white font-bold text-lg"> | |
| A | |
| </div> | |
| <div class="hidden sm:block"> | |
| <span class="font-display font-bold text-lg text-gray-900">ACFO-ACAF</span> | |
| <span class="text-xs text-gray-500 block -mt-1">Canada's Financial Leaders</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#about" class="nav-link text-sm font-medium text-gray-700 hover:text-primary-600 transition">About</a> | |
| <a href="#membership" class="nav-link text-sm font-medium text-gray-700 hover:text-primary-600 transition">Membership</a> | |
| <a href="#resources" class="nav-link text-sm font-medium text-gray-700 hover:text-primary-600 transition">Resources</a> | |
| <a href="#events" class="nav-link text-sm font-medium text-gray-700 hover:text-primary-600 transition">Events</a> | |
| <a href="#news" class="nav-link text-sm font-medium text-gray-700 hover:text-primary-600 transition">News</a> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button onclick="toggleSearch()" class="p-2 text-gray-600 hover:text-primary-600 transition"> | |
| <i data-lucide="search" class="w-5 h-5"></i> | |
| </button> | |
| <button onclick="toggleMobileMenu()" class="md:hidden p-2 text-gray-600 hover:text-primary-600 transition"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| <a href="#join" class="hidden md:inline-flex items-center px-4 py-2 bg-gradient-to-r from-primary-600 to-secondary-600 text-white text-sm font-medium rounded-full hover:shadow-lg hover:scale-105 transition-all"> | |
| Join Now | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Search Overlay --> | |
| <div class="search-overlay fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-32" id="searchOverlay"> | |
| <div class="w-full max-w-2xl mx-4 bg-white rounded-2xl shadow-2xl p-6 animate-slide-up"> | |
| <div class="flex items-center gap-4 border-b border-gray-200 pb-4"> | |
| <i data-lucide="search" class="w-6 h-6 text-gray-400"></i> | |
| <input type="text" placeholder="Search resources, news, events..." class="flex-1 text-lg outline-none text-gray-800 placeholder-gray-400" autofocus> | |
| <button onclick="toggleSearch()" class="p-2 hover:bg-gray-100 rounded-full transition"> | |
| <i data-lucide="x" class="w-6 h-6 text-gray-500"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-gray-500 mb-3">Popular searches</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm text-gray-700 hover:bg-gray-200 transition">Collective Agreement</button> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm text-gray-700 hover:bg-gray-200 transition">Classification</button> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm text-gray-700 hover:bg-gray-200 transition">Benefits</button> | |
| <button class="px-4 py-2 bg-gray-100 rounded-full text-sm text-gray-700 hover:bg-gray-200 transition">Training</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu fixed inset-0 bg-white z-40 md:hidden" id="mobileMenu"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <span class="font-display font-bold text-xl text-gradient">Menu</span> | |
| <button onclick="toggleMobileMenu()" class="p-2 hover:bg-gray-100 rounded-full transition"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <a href="#about" class="block py-3 text-lg font-medium text-gray-800 border-b border-gray-100" onclick="toggleMobileMenu()">About Us</a> | |
| <a href="#membership" class="block py-3 text-lg font-medium text-gray-800 border-b border-gray-100" onclick="toggleMobileMenu()">Membership</a> | |
| <a href="#resources" class="block py-3 text-lg font-medium text-gray-800 border-b border-gray-100" onclick="toggleMobileMenu()">Resources</a> | |
| <a href="#events" class="block py-3 text-lg font-medium text-gray-800 border-b border-gray-100" onclick="toggleMobileMenu()">Events</a> | |
| <a href="#news" class="block py-3 text-lg font-medium text-gray-800 border-b border-gray-100" onclick="toggleMobileMenu()">News</a> | |
| <a href="#contact" class="block py-3 text-lg font-medium text-gray-800" onclick="toggleMobileMenu()">Contact</a> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#join" class="block w-full py-4 bg-gradient-to-r from-primary-600 to-secondary-600 text-white text-center font-semibold rounded-xl shadow-lg"> | |
| Become a Member | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero-bg min-h-screen flex items-center relative" id="home"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div> | |
| <!-- Animated Background Elements --> | |
| <div class="absolute inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute top-20 left-10 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-500/20 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 w-full"> | |
| <div class="max-w-3xl animate-slide-up"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm font-medium mb-6 border border-white/20"> | |
| <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span> | |
| Serving Canadian Financial Officers Since 1971 | |
| </div> | |
| <h1 class="font-display text-5xl md:text-7xl font-bold text-white leading-tight mb-6"> | |
| Empowering <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-emerald-300">Financial Leadership</span> Across Canada | |
| </h1> | |
| <p class="text-xl text-gray-200 mb-8 leading-relaxed max-w-2xl"> | |
| ACFO-ACAF represents over 4,000 financial officers in the Canadian federal government. We advocate for your interests, provide world-class resources, and build the future of public sector financial management. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#membership" class="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-700 font-semibold rounded-full hover:shadow-2xl hover:scale-105 transition-all"> | |
| Explore Membership | |
| <i data-lucide="chevron-right" class="w-5 h-5 ml-2"></i> | |
| </a> | |
| <a href="#about" class="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-semibold rounded-full border border-white/30 hover:bg-white/20 transition-all"> | |
| Learn More | |
| </a> | |
| </div> | |
| <!-- Stats Preview --> | |
| <div class="grid grid-cols-3 gap-8 mt-16 pt-8 border-t border-white/20"> | |
| <div> | |
| <div class="text-3xl font-bold text-white counter" data-target="4000">0</div> | |
| <div class="text-sm text-gray-300 mt-1">Members Nationwide</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-white counter" data-target="150">0</div> | |
| <div class="text-sm text-gray-300 mt-1">Departments Represented</div> | |
| </div> | |
| <div> | |
| <div class="text-3xl font-bold text-white counter" data-target="50">0</div> | |
| <div class="text-sm text-gray-300 mt-1">Years of Service</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60 animate-bounce"> | |
| <i data-lucide="chevron-down" class="w-8 h-8"></i> | |
| </div> | |
| </section> | |
| <!-- Quick Access Section --> | |
| <section class="py-12 bg-white relative -mt-20 z-10 mx-4 md:mx-8 lg:mx-16 rounded-2xl shadow-xl"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="flex items-start gap-4 p-6 rounded-xl hover:bg-gray-50 transition cursor-pointer group"> | |
| <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600 group-hover:scale-110 transition"> | |
| <i data-lucide="file-text" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900 mb-1">Member Resources</h3> | |
| <p class="text-sm text-gray-600">Access collective agreements, classification guides, and professional development tools.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4 p-6 rounded-xl hover:bg-gray-50 transition cursor-pointer group"> | |
| <div class="w-12 h-12 bg-secondary-100 rounded-lg flex items-center justify-center text-secondary-600 group-hover:scale-110 transition"> | |
| <i data-lucide="calendar" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900 mb-1">Upcoming Events</h3> | |
| <p class="text-sm text-gray-600">Join our professional development sessions, networking events, and annual conference.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4 p-6 rounded-xl hover:bg-gray-50 transition cursor-pointer group"> | |
| <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600 group-hover:scale-110 transition"> | |
| <i data-lucide="message-circle" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-900 mb-1">Contact Your Rep</h3> | |
| <p class="text-sm text-gray-600">Connect with your local steward or national representative for support and guidance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="relative"> | |
| <div class="absolute -top-4 -left-4 w-24 h-24 bg-primary-200 rounded-full opacity-50"></div> | |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-secondary-200 rounded-full opacity-50"></div> | |
| <img src="http://static.photos/office/800x600/123" alt="ACFO-ACAF Team" class="relative rounded-2xl shadow-2xl w-full object-cover h-[500px]"> | |
| <!-- Floating Card --> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-xl max-w-xs animate-float"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 border-2 border-white"></div> | |
| <div class="w-8 h-8 rounded-full bg-secondary-500 border-2 border-white"></div> | |
| <div class="w-8 h-8 rounded-full bg-orange-500 border-2 border-white"></div> | |
| </div> | |
| <span class="text-sm font-semibold text-gray-700">Active Community</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Join 4,000+ professionals advancing public sector financial management.</p> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">About Us</span> | |
| <h2 class="font-display text-4xl font-bold text-gray-900 mt-3 mb-6"> | |
| Championing Excellence in Public Sector Finance | |
| </h2> | |
| <p class="text-lg text-gray-600 mb-6 leading-relaxed"> | |
| For over five decades, ACFO-ACAF has been the leading voice for financial officers working in the Canadian federal government. We represent professionals across 150+ departments and agencies, ensuring fair treatment, professional development, and workplace respect. | |
| </p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-100 flex items-center justify-center"> | |
| <i data-lucide="check" class="w-4 h-4 text-secondary-600"></i> | |
| </div> | |
| <span class="text-gray-700">Collective bargaining and labour relations support</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-100 flex items-center justify-center"> | |
| <i data-lucide="check" class="w-4 h-4 text-secondary-600"></i> | |
| </div> | |
| <span class="text-gray-700">Professional development and certification programs</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-100 flex items-center justify-center"> | |
| <i data-lucide="check" class="w-4 h-4 text-secondary-600"></i> | |
| </div> | |
| <span class="text-gray-700">Classification and compensation advocacy</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-100 flex items-center justify-center"> | |
| <i data-lucide="check" class="w-4 h-4 text-secondary-600"></i> | |
| </div> | |
| <span class="text-gray-700">National and regional networking opportunities</span> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-flex items-center text-primary-600 font-semibold hover:text-primary-700 transition group"> | |
| Learn more about our history | |
| <i data-lucide="arrow-right" class="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Membership Benefits --> | |
| <section id="membership" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <span class="text-secondary-600 font-semibold text-sm uppercase tracking-wider">Membership</span> | |
| <h2 class="font-display text-4xl font-bold text-gray-900 mt-3 mb-4"> | |
| Why Join ACFO-ACAF? | |
| </h2> | |
| <p class="text-lg text-gray-600"> | |
| Membership provides comprehensive support, resources, and advocacy tailored to financial officers in the federal public service. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Benefit Card 1 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-primary-500/30"> | |
| <i data-lucide="shield" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Protection & Advocacy</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Expert representation in grievances, complaints, and workplace disputes. We fight for your rights and fair treatment. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn more</a> | |
| </div> | |
| <!-- Benefit Card 2 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-secondary-500 to-secondary-600 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-secondary-500/30"> | |
| <i data-lucide="trending-up" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Career Development</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Access to exclusive training, workshops, and certification programs to advance your career in financial management. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">View programs</a> | |
| </div> | |
| <!-- Benefit Card 3 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-orange-500/30"> | |
| <i data-lucide="users" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Community Network</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Connect with 4,000+ professionals across Canada. Share knowledge, find mentors, and build lasting relationships. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Join community</a> | |
| </div> | |
| <!-- Benefit Card 4 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-purple-500/30"> | |
| <i data-lucide="scale" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Collective Agreement</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Benefit from negotiated wages, benefits, and working conditions. We ensure you receive what you're entitled to. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">View agreement</a> | |
| </div> | |
| <!-- Benefit Card 5 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-pink-500/30"> | |
| <i data-lucide="life-buoy" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Support Services</h3> | |
| <p class="text-gray-600 mb-4"> | |
| 24/7 access to our member portal, legal resources, HR guidance, and personal support when you need it most. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Get support</a> | |
| </div> | |
| <!-- Benefit Card 6 --> | |
| <div class="card-hover bg-gray-50 rounded-2xl p-8 border border-gray-100"> | |
| <div class="w-14 h-14 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-xl flex items-center justify-center text-white mb-6 shadow-lg shadow-teal-500/30"> | |
| <i data-lucide="award" class="w-7 h-7"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-3">Recognition Programs</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Celebrate excellence with our annual awards, scholarships, and recognition programs for outstanding members. | |
| </p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">See awards</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dynamic News Section --> | |
| <section id="news" class="py-24 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-12"> | |
| <div> | |
| <span class="text-primary-600 font-semibold text-sm uppercase tracking-wider">Latest Updates</span> | |
| <h2 class="font-display text-4xl font-bold text-gray-900 mt-3">News & Announcements</h2> | |
| </div> | |
| <div class="flex gap-2 mt-4 md:mt-0"> | |
| <button onclick="filterNews('all')" class="px-4 py-2 rounded-full text-sm font-medium bg-primary-600 text-white transition filter-btn" data-filter="all">All</button> | |
| <button onclick="filterNews('bargaining')" class="px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 hover:bg-gray-100 transition filter-btn" data-filter="bargaining">Bargaining</button> | |
| <button onclick="filterNews('events')" class="px-4 py-2 rounded-full text-sm font-medium bg-white text-gray-600 hover:bg-gray-100 transition filter-btn" data-filter="events">Events</button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8" id="newsGrid"> | |
| <!-- News items will be populated by JavaScript --> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-full text-gray-700 font-medium hover:bg-gray-50 transition"> | |
| View All News | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section id="events" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <span class="text-secondary-600 font-semibold text-sm uppercase tracking-wider">Events</span> | |
| <h2 class="font-display text-4xl font-bold text-gray-900 mt-3 mb-4"> | |
| Upcoming Events | |
| </h2> | |
| <p class="text-lg text-gray-600"> | |
| Professional development, networking, and training opportunities across Canada. | |
| </p> | |
| </div> | |
| <div class="space-y-6" id="eventsContainer"> | |
| <!-- Events populated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Statistics Section --> | |
| <section class="py-20 bg-gradient-to-br from-primary-900 to-secondary-800 text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="grid md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold mb-2 counter" data-target="4000">0</div> | |
| <div class="text-primary-200">Active Members</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold mb-2 counter" data-target="150">0</div> | |
| <div class="text-primary-200">Departments</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold mb-2 counter" data-target="52">0</div> | |
| <div class="text-primary-200">Years Active</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-5xl font-bold mb-2 counter" data-target="24">0</div> | |
| <div class="text-primary-200">Regional Chapters</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-24 bg-white" id="join"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-gradient-to-br from-primary-600 to-secondary-600 rounded-3xl p-12 md:p-16 text-center text-white relative overflow-hidden shadow-2xl"> | |
| <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div> | |
| <div class="absolute bottom-0 left-0 w-64 h-64 bg-white/10 rounded-full -ml-32 -mb-32"></div> | |
| <h2 class="font-display text-4xl md:text-5xl font-bold mb-6 relative">Ready to Join?</h2> | |
| <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto relative"> | |
| Become part of Canada's leading association for financial officers. Get the support, resources, and representation you deserve. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center relative"> | |
| <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-700 font-bold rounded-full hover:shadow-xl hover:scale-105 transition-all"> | |
| Apply for Membership | |
| <i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i> | |
| </a> | |
| <a href="#" class="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-sm text-white font-bold rounded-full border border-white/30 hover:bg-white/20 transition-all"> | |
| Contact Us | |
| </a> | |
| </div> | |
| <p class="mt-6 text-sm text-primary-200 relative"> | |
| Already a member? <a href="#" class="underline hover:text-white">Access your portal</a> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-gray-50 border-b border-gray-200"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h3 class="font-display text-2xl font-bold text-gray-900 mb-4">Stay Informed</h3> | |
| <p class="text-gray-600 mb-8">Subscribe to our newsletter for the latest updates on bargaining, professional development, and member news.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto" onsubmit="handleSubscribe(event)"> | |
| <input type="email" placeholder="Enter your email address" required class="flex-1 px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <button type="submit" class="px-8 py-4 bg-gray-900 text-white font-semibold rounded-full hover:bg-gray-800 transition flex items-center justify-center gap-2"> | |
| Subscribe | |
| <i data-lucide="send" class="w-4 h-4"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-6"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center text-white font-bold"> | |
| A | |
| </div> | |
| <span class="font-display font-bold text-xl text-white">ACFO-ACAF</span> | |
| </div> | |
| <p class="text-sm leading-relaxed mb-6"> | |
| The Association of Canadian Financial Officers represents over 4,000 financial management professionals in the federal public service. | |
| </p> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition text-white"> | |
| <i data-lucide="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition text-white"> | |
| <i data-lucide="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition text-white"> | |
| <i data-lucide="facebook" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-3 text-sm"> | |
| <li><a href="#" class="hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition">Membership Benefits</a></li> | |
| <li><a href="#" class="hover:text-white transition">Collective Agreement</a></li> | |
| <li><a href="#" class="hover:text-white transition">Professional Development</a></li> | |
| <li><a href="#" class="hover:text-white transition">Job Opportunities</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Member Resources</h4> | |
| <ul class="space-y-3 text-sm"> | |
| <li><a href="#" class="hover:text-white transition">Member Portal</a></li> | |
| <li><a href="#" class="hover:text-white transition">Classification Guide</a></li> | |
| <li><a href="#" class="hover:text-white transition">Grievance Forms</a></li> | |
| <li><a href="#" class="hover:text-white transition">Steward Directory</a></li> | |
| <li><a href="#" class="hover:text-white transition">FAQs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-3 text-sm"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-primary-500 mt-0.5"></i> | |
| <span>150 Isabella Street, Suite 405<br>Ottawa, ON K1S 1V7</span> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i data-lucide="phone" class="w-5 h-5 text-primary-500"></i> | |
| <span>1-800-555-0123</span> | |
| </li> | |
| <li class="flex items-center gap-3"> | |
| <i data-lucide="mail" class="w-5 h-5 text-primary-500"></i> | |
| <span>info@acfo-acaf.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <p class="text-sm">© 2024 ACFO-ACAF. All rights reserved.</p> | |
| <div class="flex gap-6 text-sm"> | |
| <a href="#" class="hover:text-white transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-white transition">Terms of Service</a> | |
| <a href="#" class="hover:text-white transition">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-4 right-4 bg-gray-900 text-white px-6 py-4 rounded-xl shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400"></i> | |
| <span id="toastMessage">Success!</span> | |
| </div> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Mobile Menu Toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('active'); | |
| document.body.style.overflow = menu.classList.contains('active') ? 'hidden' : ''; | |
| } | |
| // Search Toggle | |
| function toggleSearch() { | |
| const overlay = document.getElementById('searchOverlay'); | |
| overlay.classList.toggle('active'); | |
| document.body.style.overflow = overlay.classList.contains('active') ? 'hidden' : ''; | |
| } | |
| // Sticky Navigation | |
| let lastScroll = 0; | |
| const stickyNav = document.getElementById('stickyNav'); | |
| window.addEventListener('scroll', () => { | |
| const currentScroll = window.pageYOffset; | |
| if (currentScroll > 100) { | |
| stickyNav.classList.add('visible'); | |
| } else { | |
| stickyNav.classList.remove('visible'); | |
| } | |
| lastScroll = currentScroll; | |
| }); | |
| // Counter Animation | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| const animateCounters = () => { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const inc = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + inc); | |
| setTimeout(animateCounters, 20); | |
| } else { | |
| counter.innerText = target.toLocaleString(); | |
| } | |
| }); | |
| }; | |
| // Intersection Observer for counters | |
| const observerOptions = { | |
| threshold: 0.5 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.counter').forEach(counter => { | |
| observer.observe(counter.parentElement); | |
| }); | |
| // News Data | |
| const newsData = [ | |
| { | |
| id: 1, | |
| category: 'bargaining', | |
| title: 'New Collective Agreement Ratified', | |
| excerpt: 'Members vote overwhelmingly in favor of new agreement with improved wages and benefits package.', | |
| date: 'Dec 15, 2024', | |
| image: 'http://static.photos/office/640x360/456', | |
| tag: 'Bargaining' | |
| }, | |
| { | |
| id: 2, | |
| category: 'events', | |
| title: 'Annual Conference 2025 Registration Open', | |
| excerpt: 'Early bird registration now available for our national conference in Ottawa, June 2025.', | |
| date: 'Dec 12, 2024', | |
| image: 'http://static.photos/event/640x360/789', | |
| tag: 'Events' | |
| }, | |
| { | |
| id: 3, | |
| category: 'bargaining', | |
| title: 'Classification Review Update', | |
| excerpt: 'Latest developments in the ongoing classification modernization initiative for FI group.', | |
| date: 'Dec 10, 2024', | |
| image: 'http://static.photos/workspace/640x360/321', | |
| tag: 'Classification' | |
| }, | |
| { | |
| id: 4, | |
| category: 'events', | |
| title: 'Virtual Workshop: Mental Health in the Workplace', | |
| excerpt: 'Join us January 15th for an important discussion on wellness and support resources.', | |
| date: 'Dec 08, 2024', | |
| image: 'http://static.photos/wellness/640x360/654', | |
| tag: 'Wellness' | |
| }, | |
| { | |
| id: 5, | |
| category: 'bargaining', | |
| title: 'Phoenix Damages Settlement Update', | |
| excerpt: 'Important information regarding the implementation of the Phoenix pay system damages agreement.', | |
| date: 'Dec 05, 2024', | |
| image: 'http://static.photos/finance/640x360/987', | |
| tag: 'Compensation' | |
| }, | |
| { | |
| id: 6, | |
| category: 'events', | |
| title: 'Regional Networking: Toronto Chapter', | |
| excerpt: 'Connect with fellow members at our upcoming holiday networking event in Toronto.', | |
| date: 'Dec 01, 2024', | |
| image: 'http://static.photos/people/640x360/147', | |
| tag: 'Networking' | |
| } | |
| ]; | |
| // Render News | |
| function renderNews(filter = 'all') { | |
| const grid = document.getElementById('newsGrid'); | |
| grid.innerHTML = ''; | |
| const filtered = filter === 'all' ? newsData : newsData.filter(item => item.category === filter); | |
| filtered.forEach((item, index) => { | |
| const card = document.createElement('article'); | |
| card.className = `card-hover bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 animate-fade-in`; | |
| card.style.animationDelay = `${index * 0.1}s`; | |
| card.innerHTML = ` | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> | |
| <div class="absolute top-4 left-4"> | |
| <span class="px-3 py-1 bg-white/90 backdrop-blur-sm text-xs font-semibold text-primary-700 rounded-full shadow-sm"> | |
| ${item.tag} | |
| </span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-sm text-gray-500 mb-2 flex items-center gap-2"> | |
| <i data-lucide="calendar" class="w-4 h-4"></i> | |
| ${item.date} | |
| </div> | |
| <h3 class="font-display text-lg font-bold text-gray-900 mb-2 line-clamp-2 hover:text-primary-600 transition cursor-pointer"> | |
| ${item.title} | |
| </h3> | |
| <p class="text-gray-600 text-sm line-clamp-3 mb-4"> | |
| ${item.excerpt} | |
| </p> | |
| <a href="#" class="inline-flex items-center text-primary-600 font-medium text-sm hover:underline group"> | |
| Read more | |
| <i data-lucide="arrow-right" class="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition"></i> | |
| </a> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| lucide.createIcons(); | |
| } | |
| // Filter News | |
| function filterNews(category) { | |
| // Update buttons | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| if (btn.dataset.filter === category) { | |
| btn.classList.remove('bg-white', 'text-gray-600'); | |
| btn.classList.add('bg-primary-600', 'text-white'); | |
| } else { | |
| btn.classList.remove('bg-primary-600', 'text-white'); | |
| btn.classList.add('bg-white', 'text-gray-600'); | |
| } | |
| }); | |
| renderNews(category); | |
| } | |
| // Events Data | |
| const eventsData = [ | |
| { | |
| title: 'National Professional Development Conference', | |
| date: 'June 15-17, 2025', | |
| location: 'Ottawa Convention Centre, Ottawa, ON', | |
| type: 'Conference', | |
| description: 'Three days of workshops, networking, and keynote speakers focused on the future of public sector financial management.' | |
| }, | |
| { | |
| title: 'Virtual Workshop: Phoenix System Navigation', | |
| date: 'January 22, 2025', | |
| location: 'Online (Zoom)', | |
| type: 'Workshop', | |
| description: 'Learn tips and tricks for navigating the Phoenix pay system and resolving common issues.' | |
| }, | |
| { | |
| title: 'Regional AGM - Western Chapter', | |
| date: 'February 15, 2025', | |
| location: 'Calgary, AB', | |
| type: 'Meeting', | |
| description: 'Annual general meeting for Western Canada members. Elections and regional updates.' | |
| } | |
| ]; | |
| // Render Events | |
| function renderEvents() { | |
| const container = document.getElementById('eventsContainer'); | |
| eventsData.forEach((event, index) => { | |
| const eventEl = document.createElement('div'); | |
| eventEl.className = 'flex flex-col md:flex-row gap-6 p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:shadow-md transition animate-fade-in'; | |
| eventEl.style.animationDelay = `${index * 0.1}s`; | |
| eventEl.innerHTML = ` | |
| <div class="md:w-32 flex-shrink-0"> | |
| <div class="bg-white rounded-xl p-4 text-center shadow-sm"> | |
| <div class="text-sm font-semibold text-gray-500 uppercase">${event.date.split(' ')[0]}</div> | |
| <div class="text-3xl font-bold text-primary-600">${event.date.split(' ')[1].replace(',', '')}</div> | |
| <div class="text-sm text-gray-600">${event.date.split(' ')[2] || ''}</div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="px-3 py-1 bg-primary-100 text-primary-700 text-xs font-semibold rounded-full">${event.type}</span> | |
| <span class="text-sm text-gray-500 flex items-center gap-1"> | |
| <i data-lucide="map-pin" class="w-4 h-4"></i> | |
| ${event.location} | |
| </span> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-gray-900 mb-2 hover:text-primary-600 transition cursor-pointer">${event.title}</h3> | |
| <p class="text-gray-600 mb-4">${event.description}</p> | |
| <div class="flex items-center gap-4"> | |
| <button class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition"> | |
| Register Now | |
| </button> | |
| <button class="px-4 py-2 text-gray-600 text-sm font-medium hover:text-gray-900 transition flex items-center gap-1"> | |
| Add to Calendar | |
| <i data-lucide="calendar-plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(eventEl); | |
| }); | |
| lucide.createIcons(); | |
| } | |
| // Newsletter Subscribe | |
| function handleSubscribe(e) { | |
| e.preventDefault(); | |
| showToast('Thank you for subscribing! Check your email to confirm.'); | |
| e.target.reset(); | |
| } | |
| // Toast Notification | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| const toastMessage = document.getElementById('toastMessage'); | |
| toastMessage.textContent = message; | |
| toast.classList.remove('translate-y-20', 'opacity-0'); | |
| setTimeout(() => { | |
| toast.classList.add('translate-y-20', 'opacity-0'); | |
| }, 3000); | |
| } | |
| // Smooth Scroll | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Initialize | |
| renderNews(); | |
| renderEvents(); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |