Index of /views/

deep-sea-marine/ │ ├── index.html # Main homepage ├── about.html # About Us page ├── services.html # Services overview page ├── fleet.html # Fleet information page ├── approach.html # HVMM approach page ├── sustainability.html # Blue Economy & sustainability page ├── projects.html # Projects and initiatives page ├── careers.html # Career opportunities page ├── contact.html # Contact information page │ ├── assets/ │ ├── css/ │ │ ├── bootstrap.min.css # Bootstrap framework │ │ ├── animate.css # Animation library │ │ ├── style.css # Custom styles │ │ │ ├── js/ │ │ ├── jquery.min.js # jQuery library │ │ ├── bootstrap.bundle.min.js # Bootstrap JS │ │ ├── aos.js # Animate on scroll library │ │ ├── main.js # Custom scripts │ │ │ ├── images/ │ │ ├── logo.png # DSM logo │ │ ├── hero/ # Hero section images │ │ ├── vessels/ # Vessel images │ │ ├── team/ # Team member photos │ │ ├── services/ # Service-related images │ │ ├── icons/ # Icon assets │ │ │ ├── fonts/ # Custom font files if needed │ └── favicon.ico # Website favicon Sections for the Homepage Based on the content provided, the homepage will have the following sections: 1. Header & Navigation - Logo, menu items, contact button - Features the DSM logo - Includes dropdown menus for About Us and Services sections - Has a highlighted "Contact Us" button - Shrinks on scroll for better user experience - Is fully mobile-responsive with a hamburger menu - Includes smooth animations for dropdowns and transitions 2. Hero Section - Large banner with tagline and call-to-action - A visually striking full-height background with a gradient from dark blue to the primary dark color - A clear, bold headline and subheading introducing DSM - A brief description of the company - Two call-to-action buttons: "Discover More" and "Contact Us" - A large, animated image of an offshore vessel - A floating badge highlighting DSM as "Namibia's Premier Offshore Vessel Operator" - Animated wave elements at the bottom to transition to the next section - Various animations including: - Subtle up-down movement of the hero image - Floating animation for the badge - Wave animations at the bottom - Perspective rotation on the image for a 3D effect - Parallax scrolling effects - Text typing animation for the subtitle 3. About Us Summary - Brief introduction to DSM - An eye-catching image grid layout with three images showing different aspects of DSM's operations - A floating badge highlighting "100+ Years Combined Experience" with an animated counter - A clear section header with the company tagline "Redefining Namibia's Offshore Potential" - A concise introduction to DSM's business - Four feature boxes highlighting key strengths: - Maritime Excellence - Strategic Partnerships - Local Expertise - Sustainability Focus - A "Learn More" button directing to the full About page - Visual enhancements: - Subtle background shapes for visual interest - Hover effects on the feature boxes (icon color change, elevation) - Image zoom effect on hover - Counter animation for the experience badge - Staggered fade-in animations for the feature items 4. Services Overview - Key services with icons/images - A clear section header with title and brief introduction. - Four service cards arranged in a row, each featuring: - A distinctive icon with a gradient background - A concise service title and description - An overlay that appears on hover with additional information - A "Learn More" button linking to the specific service page - A call-to-action box at the bottom encouraging visitors to request a consultation Visual elements: - Decorative background shapes for visual interest - Hover animations on the service cards (elevation, overlay appearance) - Animated icon effects (color change, scaling, periodic pulse) - Parallax scrolling for the background shapes The design follows your color scheme with: - Light background for the section - White cards that pop against the background - Dark text for readability - Orange accent colors for icons and buttons - Dark blue gradient for the call-to-action box 5. Approach Highlight - HVMM framework summary - A clear introduction to the Hybrid Vessel Management Model (HVMM) framework - Three key pillars of the approach (Capacity, Capability, Compliance) with descriptive icons and text - An interactive diagram visualizing the HVMM framework with: - A central HVMM element - Five surrounding elements showing different aspects of the model (Charter & Vessel Flag, Offshore Operations, Compliance & HSE, Crew Management, Client Liaison) - Visual connections between elements through animated circular borders - Key performance statistics (95%+ Vessel Uptime, Zero Safety Incident Threshold, 98%+ Turnaround Compliance) with animated counters - A call-to-action button linking to the full Approach page Visual elements: - Animated rotating dashed circular border - Hover effects on the pillar items (slight movement, icon color change) - Interactive diagram elements that respond to hover - Counter animations for statistics - Background decorative shapes for visual interest The design follows your color scheme with: - White background for the section - Dark text for readability - Orange accent colors for icons, borders, and statistics - Dark blue gradient for the central HVMM element 6. Fleet Showcase - Featured vessels with key specifications. - A slider featuring three of DSM's vessels: - Platform Supply Vessel - Anchor Handling Tug Supply Vessel - Multi-Purpose Support Vessel - For each vessel, the showcase provides: - A large image with a category badge - Vessel name and brief description - Four key specifications with icons (Length, Dynamic Positioning, etc.) - Key features in a bulleted list - A call-to-action button linking to detailed specifications - Below the slider is a fleet expansion summary showing: - A headline about the USD 160 million investment - A visual representation of growth from 3 initial vessels to 6 vessels - A button linking to the complete fleet page - Interactive elements: - Navigation arrows for the slider - Dot indicators showing current slide - Auto-rotation of slides every 7 seconds (pauses on hover) - Touch swipe functionality for mobile devices - Animated specifications on slide change - Counter animation for fleet expansion milestones 7. Sustainability Commitment - Blue Economy highlights. - A visually striking layout with overlapping images showcasing DSM's environmental initiatives - A sustainability badge highlighting "Blue Economy Sustainability" - A clear introduction to DSM's commitment to sustainable marine operations - Four key sustainability pillars: - Marine Environmental Integrity - Climate Resilience & Energy Efficiency - Circular Economy & Waste Management - Sustainable Supply Chain & Stakeholder Engagement - A call-to-action button linking to the full Sustainability page - A metrics section featuring four circular progress charts showing: - 75% CO2 Reduction target - 90% Waste Recycling achievement - 100% Environmental Compliance - 50% Renewable Energy target The design incorporates: - White background for the main section - Light gray background for the metrics panel - Green accents for sustainability elements (a variation from the primary orange to emphasize the environmental theme) - Animated circular progress charts - Parallax effect for the sustainability images - Staggered animations for the sustainability pillars - Hover effects for images and pillars - Decorative background shapes for visual interest 8. Projects Preview - Current projects and Vision 2030 initiative - A featured project highlighting the Vision 2030 initiative: - Large image with overlay text - "Flagship Initiative" tag - Project description - Three key features (Local Assembly, Skills Transfer, Regional Hub) - Call-to-action button - Current projects sidebar featuring three ongoing initiatives: - FPSO Tender Augmentation - Fleet Expansion Program - Local Content Development - Each with a status badge, description, and metadata - A call-to-action at the bottom encouraging visitors to explore all projects The design incorporates: - Light gray background for the section - White cards for projects - Large featured image for the main project - Smaller images for current projects - Status badges to show project progress - Orange accent colors for tags, icons, and buttons - Hover effects for project cards and features - Staggered animations for current projects - Interactive hover effects for links and buttons - Background decorative shapes with parallax effects 9. Partners Section - Featuring Anglo-Eastern and other partners - A featured partnership with Anglo-Eastern Ship Management: - Company logo in a highlighted container - Partnership description - "Technical Partnership" tag - Four key benefits for clients, presented in a grid format - A grid of additional partners: - EOS Capital (Investment Partner) - Damen Shipyards (Technical Partner) - Namport (Industrial Partner) - NUST (Education Partner) - Each with logo, description, and category tag - A call-to-action encouraging new partnership opportunities - The design incorporates: - White background for the section - Light gray background for the featured partner - Company logos displayed in white containers - Orange accent colors for tags, icons, and buttons - Grid layout for benefits and partner cards - Hover effects for logos, benefit items, and partner cards - Staggered animations for partner cards - Dark blue gradient for the partnership CTA - Background decorative shapes with parallax effects The section is fully responsive, adjusting for various screen sizes with appropriate layout changes for tablet and mobile views, including: - Stacking the logo and content in the featured partnership - Changing the benefits grid to a single column - Adjusting partner cards to display in a 2-column or 1-column grid - Reducing font sizes and padding for smaller screens 10. Contact CTA - Call-to-action for getting in touch - A modern split-screen layout with: - Left side containing comprehensive contact information - Right side featuring a full-height Google Map - On the contact information side: - Clean, modern header with section title - Introductory text explaining DSM's availability - Four contact information blocks in a 2×2 grid: - Visit Us (address) - Call Us (phone numbers) - Email Us (email address) - Office Hours (business hours) - A form preview that links to the full contact page - Social media icons for additional connection options On the map side: - Full-height Google Map with subtle styling - Location card overlay for quick reference - Hover effect to show the map in full color - A newsletter subscription band at the bottom: - Gradient background with eye-catching design - Email input field and Subscribe button - Clear call-to-action text - The design incorporates: - Clean, minimal aesthetic with plenty of white space - Side-by-side layout for efficient space usage - Visual hierarchy with clear section headers - Orange accent colors for icons and buttons - Subtle box shadows for a modern, elevated look - Hover effects for interactive elements - Animation for the map location card - Pulse animation for the subscribe button - Form input field styling that indicates interactivity - The section is fully responsive: - On smaller screens, the layout stacks vertically with contact information above the map - The contact information grid changes to a single column on tablet/mobile - Form inputs stack vertically on mobile - The newsletter section centers text and adjusts spacing on smaller screens - Map height adjusts for better proportion on mobile 11. Footer - Contact details, quick links, and social media - Footer Top Area with four columns: - Company Information Column: - DSM logo - Brief company description - Contact details (address, email, phone) - Social media links - Quick Links Column: - Navigation links to main pages (Home, About, Services, etc.) - Arrow icons for visual enhancement - Services Links Column: - Links to specific service pages - Consistent styling with main navigation - Newsletter Column: - Subscription form - Certification logos - Brief description about staying updated - Footer Bottom Area: - Copyright information with dynamically updated year - Privacy Policy, Terms of Service, and Sitemap links - Clear separation from the main footer content - Back to Top Button: - Fixed position button that appears when scrolling down - Smooth scroll animation when clicked - Consistent styling with site design The design incorporates: - Dark background matching the primary dark color for good contrast - Orange accent colors for icons, buttons, and hover effects - Subtle background shapes for visual interest - Clean organization of information in columns - Consistent styling with the rest of the site - Interactive hover effects for all clickable elements - Proper spacing and typography for readability The footer is fully responsive: - Columns stack vertically on smaller screens - Text size adjusts for readability on mobile - Link spacing changes for better touch targets - Footer bottom links center align on mobile - Back to top button remains accessible on all devices This About page features: Hero Section - A bold, gradient-background hero section with the company name, a short description, and feature badges highlighting key strengths, paired with a large image and experience badge. Company Overview - Details about DSM with an eye-catching stacked image layout and key statistics showcasing the company's ambitious growth plans. Leadership Team - Professional team cards featuring the key executives with contact information and social media links, styled for easy scanning. Core Values - Six values displayed in an attractive grid with iconic representations, focusing on Operational Excellence, Safety, Innovation, Sustainability, Integrity, and Community Impact. Approach Overview - A concise explanation of the Hybrid Vessel Management Model with key pillars and a link to the full approach page. Call to Action - An engaging CTA section encouraging visitors to partner with DSM, featuring attractive gradient background and clear action buttons. The page is fully responsive with numerous animations and interactive elements: AOS (Animate on Scroll) effects throughout Counter animations for statistics Parallax effects for the hero background shapes Hover animations for team members, value cards, and approach pillars Smooth transitions and transformations The services.html page showcases DSM's comprehensive offshore support services with: Hero Section - A striking hero area with key service highlights and a prominent vessel image with a highlighted feature caption. Service Categories Overview - Four clickable category cards that lead to detailed service sections, featuring distinctive icons and service names. Service Detail Sections - In-depth presentations of each service area: Exploration and Appraisal Well Drilling Oil & Gas Production Support Offshore Oil Field Services Infrastructure Installation Each section includes a professional image, detailed description, key features organized in a 2×2 grid, and a relevant call-to-action button. Service Process - A visual timeline showing DSM's structured approach to service delivery, from requirement analysis to continuous improvement. Client Testimonials - An interactive slider featuring feedback from satisfied clients, with navigation controls and auto-rotation. Call to Action - An engaging conclusion prompting visitors to request a consultation or explore the fleet. The page features numerous interactive elements: Smooth scrolling navigation from category cards to detailed sections Hover effects on feature boxes and category cards Auto-rotating testimonial slider with manual navigation options Animated service process timeline that activates as visitors scroll AOS (Animate on Scroll) effects throughout the page The fleet.html page showcases Deep Sea Marine's fleet specifications and expansion strategy with the following key features: Hero Section - A striking gradient background with a prominent announcement of the USD 160M investment program and an image slider showcasing DSM's vessels. Fleet Strategy Section - Detailed explanation of DSM's dual-track approach: Short-term leasing strategy for immediate market access Medium-term new-build program for tailored vessels A visual timeline showing the 12-year fleet expansion plan in four phases Fleet Showcase Section - Interactive tabs featuring three vessel types: Platform Supply Vessel (PSV) Anchor Handling Tug Supply (AHTS) Multi-Purpose Support Vessel (MPSV) Each tab includes comprehensive vessel specifications, technical capabilities, key features, and performance statistics. Management Approach Section - Visualization of the Hybrid Vessel Management Model: Clear role matrix showing the responsibilities of DSM and technical partners Four key pillars of the HVMM framework with visually appealing icons Technical Partnership Section - Highlighting the strategic alliance with Anglo-Eastern: Visually striking partnership image with overlay Key benefits for clients and stakeholders Focus on safety, reliability, innovation, and local talent development Vision 2030 Section - DSM's contribution to Namibia's industrialization: Details of the vessel assembly program with NAMPORT Economic and technical benefits Video placeholder for additional visual engagement Call to Action Section - Prominent section encouraging visitors to request vessel information or explore services. The page includes numerous interactive elements: Image slider with navigation controls in the hero section Tabbed interface for vessel specifications Timeline animation for the fleet development roadmap Hover effects on specification cards, feature tags, and pillar boxes Video play button in the Vision 2030 section Counter animations for vessel statistics This approach.html page showcases DSM's Hybrid Vessel Management Model (HVMM) with the following key elements: Hero Section - A visually striking introduction featuring an animated HVMM diagram with the three C's (Capacity, Capability, Compliance) rotating around a central HVMM hub. HVMM Overview - A clear explanation of the Hybrid Vessel Management Model with four key features highlighted: Local Ownership & Branding International Technical Support Shared Responsibilities Skills Transfer Three C's Framework - Three distinctive cards explaining each component of the framework: Capacity: Ensuring vessel resilience and uptime Capability: Bridging skills gaps Compliance: Empowering local talent Role Matrix - A comprehensive table showing the division of responsibilities between DSM and technical partners for various operational functions. Localization Strategy - A five-phase timeline illustrating DSM's structured approach to transitioning key roles to local personnel over a 3-5 year period. Technology Support - Overview of the advanced systems DSM uses to optimize operations and facilitate skills development. Call to Action - Encouraging visitors to experience the HVMM advantage and discuss their requirements. The page incorporates several interactive elements: Animated rotating diagram in the hero section Hover effects on framework cards and feature items Subtle animations for timeline phases AOS (Animate on Scroll) effects throughout