@extends('frontend.main_master')

@section('title', "Earth Element in Astrology: Traits & Signs (Taurus, Virgo, Capricorn) - " . t('site-title'))
@section('meta_description', "Explore the Earth Element in astrology: personality traits, symbolism, balance, and characteristics of Taurus, Virgo, Capricorn with Astro Wise.")
@section('meta_keywords', "Earth Element astrology, earth element, Taurus, Virgo, Capricorn, astrology elements USA, astro wise")

@push('schema')
<x-seo.schema-article
    title="Earth Element in Astrology: Complete Guide"
    description="The Earth element provides practical stability, material mastery, patient craftsmanship, and grounded endurance."
    image="{{ asset('frontend/images/elements/' . 'earth' . '.webp') }}"
/>
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('index')], ['name' => 'Astrological Elements', 'url' => route('elements.index')], ['name' => 'Earth Element', 'url' => url()->current()]]" />
@endpush

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="text-center mb-5">
                <span class="badge bg-primary px-3 py-2 fs-6 rounded-pill mb-3">Taurus, Virgo, Capricorn</span>
                <h1 class="display-4 fw-bold mb-3">Earth Element</h1>
                <p class="lead text-muted max-w-700 mx-auto">The Earth element provides practical stability, material mastery, patient craftsmanship, and grounded endurance.</p>
            </div>

            <div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 mb-5">
                <h2 class="fw-bold mb-3">Elemental Nature & Influence</h2>
                <p class="text-secondary lh-lg mb-4">Earth signs turn abstract ideas into tangible reality. They master the material plane through patience, dedication, and sensory appreciation, building enduring structures of lasting value.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('birth-chart.index') }}" class="btn btn-astro-primary px-4 py-2">
                        <i class="bi bi-compass me-2"></i>Calculate Your Elemental Balance
                    </a>
                    <a href="{{ route('elements.index') }}" class="btn btn-outline-secondary px-4 py-2">
                        Explore All 4 Elements
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection