social-app/apps/lib/features/home/ui/widgets/home_background_field.dart

import 'package:flutter/material.dart';

import '../../../../core/theme/design_tokens.dart';

const homeBackgroundFieldKey = ValueKey('home_background_field');
const homeTopGlowKey = ValueKey('home_top_glow');
const homeBottomGlowKey = ValueKey('home_bottom_glow');

class HomeBackgroundField extends StatelessWidget {
  const HomeBackgroundField({super.key});

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      key: homeBackgroundFieldKey,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [AppColors.homeBackgroundTop, AppColors.homeBackgroundBottom],
        ),
      ),
      child: const Stack(children: [_HomeTopGlow(), _HomeBottomGlow()]),
    );
  }
}

class _HomeTopGlow extends StatelessWidget {
  const _HomeTopGlow();

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: const Alignment(-0.25, -0.9),
      child: IgnorePointer(
        child: Container(
          key: homeTopGlowKey,
          width: AppSpacing.xxl * 10,
          height: AppSpacing.xxl * 7,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(AppSpacing.xxl * 3),
            color: AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.28),
            boxShadow: [
              BoxShadow(
                color: AppColors.homeBackgroundGlow.withValues(alpha: 0.28),
                blurRadius: AppSpacing.xxl * 3,
                spreadRadius: AppSpacing.xl,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _HomeBottomGlow extends StatelessWidget {
  const _HomeBottomGlow();

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: IgnorePointer(
        child: Container(
          key: homeBottomGlowKey,
          width: double.infinity,
          height: AppSpacing.xxl * 6,
          margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
          decoration: BoxDecoration(
            color: AppColors.homeBackgroundGlowSoft.withValues(alpha: 0.2),
            borderRadius: BorderRadius.circular(AppSpacing.xxl * 2),
            boxShadow: [
              BoxShadow(
                color: AppColors.homeBackgroundGlow.withValues(alpha: 0.12),
                blurRadius: AppSpacing.xxl * 2,
                spreadRadius: AppSpacing.md,
              ),
            ],
          ),
        ),
      ),
    );
  }
}