@extends('layouts.gradient')

@section('gradient-content')

<x-atoms.section-wrapper id="gradient-hero" padding="py-24 px-4">
    <x-atoms.subject>{{ __('navigation.home') }}</x-atoms.subject>

    <x-atoms.title title="Gradient Layout Test" class="mt-4" />

    <p class="text-base lg:text-xl mt-6">
        This page validates the GradientLayout background pattern:
        deep blue glow effect characteristic of the Wasoria visual identity.
    </p>
</x-atoms.section-wrapper>

<x-atoms.section-wrapper id="gradient-content">
    <x-atoms.subject>{{ __('navigation.products') }}</x-atoms.subject>

    <x-atoms.title title="Content on Gradient" class="mt-4" />

    <p class="text-base lg:text-xl mt-4">
        Content sections sit on top of the gradient background.
        The gradient transitions from black → deep navy → primary blue → black.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
        <div class="p-6 bg-glassmorphism rounded-lg">
            <x-atoms.title title="Card One" />
            <p class="text-base mt-2">Glassmorphism card on gradient background.</p>
        </div>
        <div class="p-6 bg-glassmorphism rounded-lg">
            <x-atoms.title title="Card Two" />
            <p class="text-base mt-2">Another card demonstrating the visual depth.</p>
        </div>
    </div>
</x-atoms.section-wrapper>

@endsection