Pan Ocean International – Premium Electronics Wholesale Portal

December 9, 2025

• Animated World Network – Custom dotted world map with connecting nodes and animated connection lines
• Parallax Scrolling – Smooth scroll-based animations using Framer Motion's useScroll and useTransform
• Logo Showcase – Frosted glass backdrop with hover glow effects for brand prominence
• Gradient Typography – Eye-catching gradient text with shimmer animations
• Shiny CTA Button – Premium interactive button component with gradient glow effects

• Category Cards – Premium cards with image preview, glow effects, and hover animations for Smartphones, Gaming Consoles, Tablets, and Wearables
• GlowCard Components – Spotlight effect cards with multi-color glow options (blue, purple, green, orange)
• Product Images – High-quality category imagery with smooth scale transitions on hover

• Auto-Scrolling Carousel – Embla Carousel with auto-scroll plugin for seamless brand logo rotation
• 30+ Brand Logos – Apple, Samsung, Xiaomi, PlayStation, Xbox, Nintendo, Sony, and many more
• Hover Interactions – Scale and color transitions on brand hover
• Gradient Fade Edges – Smooth fade-to-white gradients on carousel edges

• Interactive Network Visualization – Animated nodes and connections representing global distribution hub
• Numbered Value Cards – Horizontal cards with gradient number badges highlighting Family Values, Market Expertise, and Trusted Partner
• Company Story – Narrative presentation with animated typography

• GlowEffect Border Animation – Rotating multi-color glow animation around contact card
• Interactive Contact Links – Phone and email links with icon animations and color transitions
• Embedded Google Maps – Interactive map showing Miami headquarters location
• Floating Action Buttons – Fixed call and WhatsApp buttons with tooltip labels

• Client Testimonials – Glassmorphism cards with star ratings and client attribution
• Smooth Transitions – Animated card reveals with staggered timing
• Social Proof – Real quotes emphasizing trust, reliability, and partnership

• Language Toggle – Seamless EN/ES switching in navigation bar
• Complete Translations – All UI text available in both English and Spanish
• Centralized Content – Single CONTENT object with structured translations

• React 19 – Latest React with modern hooks and concurrent features
• TypeScript – Full type safety with interfaces and strict typing
• Vite 6 – Fast development server and optimized production builds

• Framer Motion – Advanced scroll-based parallax effects, transforms, and page transitions
• Motion Library – Additional motion utilities for complex animations
• CSS Keyframes – Custom shimmer and glow animations

• Tailwind CSS – Utility-first styling with custom gradient configurations
• Glassmorphism Design – Backdrop blur, transparency, and subtle borders
• Custom UI Components – GlowEffect, GlowCard, ShinyButton, Marquee

• Lucide React – Modern icon library for consistent iconography
• React Icons – Additional icon variants for brand diversity

• React Leaflet – Interactive map integration for headquarters location
• Dotted Map – Custom world map visualization with animated connection points
• Google Maps Embed – Fallback embedded map in contact section

• Embla Carousel React – Lightweight, touch-friendly carousel engine
• Auto-scroll Plugin – Continuous scrolling for brand showcase

• Sticky Image Sections – Full-height sticky backgrounds with scale transforms
• Overlay Copy Animation – Text reveal with y-axis translation keyed to scroll
• Viewport-Based Triggers – Scroll progress tied to element viewport position

• GlowEffect – Rotating gradient border animation with configurable colors, blur, and duration
• GlowCard – Spotlight-following card with mouse-tracked gradient glow
• ShinyButton – Premium CTA with gradient background and shine animation
• Marquee – Infinite scroll carousel with pause-on-hover functionality

• SVG Dot Grid – Programmatically generated world map from geographic data
• Animated Connections – Curved lines connecting distribution points
• Pulsing Nodes – Glowing markers for key locations

• Form Validation – Required fields for name, company, email, and message
• Responsive Design – Full-screen on mobile, centered card on desktop
• Accessible Controls – Keyboard navigation and focus management

pan-ocean/
├── App.tsx                      # Main app entry point
├── index.tsx                    # React entry with providers
├── index.html                   # HTML template with metadata
├── components/
│   ├── PanOceanLanding.tsx      # Main landing page component
│   ├── Navbar.tsx               # Navigation with language toggle
│   ├── ContactModal.tsx         # Contact form modal
│   ├── TestimonialsSection.tsx  # Client testimonials carousel
│   ├── WorldMap.tsx             # Animated world map visualization
│   ├── FuturisticNetwork.tsx    # Network node animation
│   └── ui/
│       ├── glow-effect.tsx      # Rotating glow border component
│       ├── spotlight-card.tsx   # Mouse-following glow card
│       ├── shiny-button.tsx     # Premium CTA button
│       └── marquee.tsx          # Auto-scrolling carousel
├── lib/
│   └── utils.ts                 # Utility functions (cn, etc.)
└── public/
    ├── logo/                    # Company logo assets
    └── images/
        └── work/
            ├── brands/          # 30+ brand logo SVGs
            └── sections/        # Section background images

• Scroll-Driven Animations – Mastering Framer Motion's useScroll and useTransform for immersive parallax
• Custom Component Systems – Building reusable glow effects and interactive cards
• B2B Design Language – Balancing premium aesthetics with professional trust signals
• Performance Optimization – Lazy loading maps and images for fast initial load
• Bilingual Architecture – Structuring translations for easy maintenance

• Visual Excellence – Stunning parallax effects and glassmorphism design
• Technical Sophistication – Advanced scroll animations and interactive components
• Global Reach – World map visualization emphasizing distribution capabilities
• Conversion Focus – Multiple CTAs and floating contact buttons
• Professional Polish – Attention to detail in animations, typography, and spacing