Impact
-
Smooth Scale & Float RevealAn enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.
3 hours ago1 -
1 day ago4 -
1 day ago10 -
Interactive Multi-Method Donation SectionOverview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.
4 days ago22 -
Elegant Split-Layout Contact Form (Navy Blue Edition)Overview: A premium contact section styled in Navy Blue (bg-blue-900) to match the Service Carousel. Key Changes: Palette: Swapped all Teal references for Deep Blue (bg-blue-900 panel, text-blue-700 accents). Interactivity: Focus rings on inputs now glow with a soft blue (focus:ring-blue-600/10). Consistency: Maintains the "DM Serif Display" typography and "blob" background effects (now in blue/indigo) for a cohesive high-end look.
4 days ago53 -
Modern Editorial News & Events SectionOverview: A sophisticated, responsive layout designed to highlight a primary featured story alongside a vertical list of recent updates or upcoming activities. It features a clean "magazine-style" aesthetic, utilizing serif typography for headings to create an elegant, high-end feel suitable for professional services or educational institutions. Key Features: Split Grid Layout: Uses a 12-column grid system (lg:col-span-7 vs lg:col-span-5) to balance the large featured content with the side list. Featured Card (Left): Image Zoom: subtle scale-105 transformation on the main image when hovering over the container. Backdrop Badge: A frosted glass effect category badge over the image. Interactive List (Right): Smart Date Boxes: The date indicators act as design elements that invert colors (e.g., yellow background to yellow text) on hover. Micro-interactions: List items "lift" slightly (-translate-y-1) upon interaction. Typography: Integrates Google Fonts (DM Serif Display) for headings to break the monotony of standard sans-serif fonts and add character. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons (Script included). Fonts: Google Fonts (DM Serif Display + Inter). Usage: Ideal for "Latest News," "Upcoming Seminars," or "Blog Highlights" sections on a landing page. Ensure the Google Fonts link is included in the <head> for the correct visual style.
4 days ago20 -
Sticky Floating Social BarOverview: A fixed, right-aligned sidebar component designed to display social media links (Facebook, Instagram, WhatsApp). It remains visible while scrolling and features an interactive "drawer-like" expansion effect on hover. Key Features: Sticky Positioning: Fixed vertically centered on the right edge of the viewport (fixed top-1/2 right-0). Isolated Hover Effect: When a user hovers over an icon, only that specific item expands to reveal the text and changes to its brand color. Stable Layout: Uses items-end flex alignment to ensure non-active icons remain perfectly stationary while one expands, preventing layout shifting. Smooth Transitions: Includes CSS transitions for width, background color, and text opacity. Tech Stack: Framework: Tailwind CSS (Utility classes). Icons: Inline SVGs. Interactivity: Pure CSS (hover states), no JavaScript required. Usage: Place this code block directly before the closing </body> tag to ensure it sits on top of all other content (z-50).
4 days ago17 -
Our servicesComponent: Interactive Services Carousel Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions. Technical Features: Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices. Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required). Icons: Inline SVG icons (Heroicons style). Functionalities: Navigation: Side buttons (prev/next) and bottom pagination (indicator dots). Automation: Autoplay runs every 4 seconds (infinite loop logic). Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave). Style & Design (UX/UI): Default State: White background, soft shadows, pastel-colored icon backgrounds. Hover State (Active): Zoom Effect: The card scales up (scale-105). Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast. Details: The icon background turns white, and the icon stroke takes the dark blue color.
4 days ago101
