@extends('layouts.app') @section('content')
{{-- Hero Section: Typically the first section, drawing immediate attention. This section usually doesn't need a scroll-in animation as it's visible on load. --}} @if ($heroSectionActive?->is_active)
@livewire('layout.hero-section')
@endif {{-- Personel List Section: Showcases team members or key individuals. --}} @if ($personelListActive?->is_active)
@livewire('layout.personel-list')
@endif {{-- Highlight Slider Section: Displays featured content or key highlights in a carousel. --}} @if ($highlightSliderActive?->is_active)
@include('frontend.partials.highlight-slider', ['highlights' => $highlights])
@endif {{-- Catalog Section: Presents products, services, or categories. --}} @if ($catalogSectionActive?->is_active)
@include('frontend.partials.catalog-slider', ['categories' => $categories])
@endif {{-- About Us Section: Provides information about your organization. --}} @if ($aboutSectionActive?->is_active)
@livewire('tentang-kami')
@endif
{{-- CSS for section animations. 'animate-fade-in-section' sets initial state (hidden and slightly offset). 'is-visible' state applies when section enters viewport, transitioning it into view. --}} {{-- JavaScript to trigger animations on scroll using Intersection Observer. This script detects when a section enters the viewport and adds 'is-visible' class, which then triggers the CSS transition. --}} @endsection