feat: update homepage layout to support dynamic landing and portal page designs, enhancing customization options and visual appeal
This commit is contained in:
@@ -1,14 +1,54 @@
|
||||
<div class="min-h-screen">
|
||||
<!-- Homepage-specific custom HTML -->
|
||||
@if(theme('custom_homepage_html'))
|
||||
<div class="custom-homepage-content">
|
||||
{!! theme('custom_homepage_html') !!}
|
||||
</div>
|
||||
@endif
|
||||
<!-- Hero Section -->
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="container mx-auto px-4 py-20 md:py-24 relative z-10">
|
||||
<div class="text-center max-w-5xl mx-auto">
|
||||
@if(theme('homepage_layout', 'landing') === 'landing')
|
||||
<!-- Landing Page Layout -->
|
||||
|
||||
<!-- Custom HTML Section -->
|
||||
@if(theme('custom_homepage_html'))
|
||||
<div class="custom-homepage-content">
|
||||
{!! theme('custom_homepage_html') !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative isolate overflow-hidden bg-gradient-to-b from-background-primary via-background to-background-secondary/50 pt-18 pb-32 px-8">
|
||||
@if(theme('background_image_url'))
|
||||
<div class="background-image-layer"
|
||||
style="position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-image: url('{{ theme('background_image_url') }}');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
opacity: {{ theme('background_image_opacity', 30) / 100 }};
|
||||
filter: blur({{ theme('background_image_blur', 5) }}px);
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;">
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<svg class="absolute inset-0 -z-10 h-full w-full stroke-primary/15 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
|
||||
<defs>
|
||||
<pattern id="grid-pattern" width="80" height="80" x="50%" y="-1" patternUnits="userSpaceOnUse">
|
||||
<path d="M.5 80V.5H80" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" strokeWidth="0" fill="url(#grid-pattern)" />
|
||||
</svg>
|
||||
|
||||
<div class="mt-20 container mx-auto px-4 lg:px-8 relative z-10">
|
||||
<div class="max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-0">
|
||||
<div class="lg:col-span-7 lg:px-0 lg:pt-4">
|
||||
<div class="text-center max-w-5xl mx-auto">
|
||||
<!-- Hero Badge -->
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-primary/30 bg-primary/10 text-primary text-xs font-semibold mb-6 animate-fade-in-up">
|
||||
<x-ri-sparkling-2-fill class="size-4" />
|
||||
@@ -91,11 +131,12 @@
|
||||
<span class="text-xs font-semibold">DDoS Protected</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<!-- Stats Section -->
|
||||
<div class="py-16 md:py-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
|
||||
@@ -543,7 +584,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 mb-8">
|
||||
{!! hook('pages.home') !!}
|
||||
</div>
|
||||
<div class="mt-16 mb-8">
|
||||
{!! hook('pages.home') !!}
|
||||
</div>
|
||||
@else
|
||||
<!-- Portal Page Layout - To be added in next step -->
|
||||
<!-- Custom HTML Section -->
|
||||
@if(theme('custom_homepage_html'))
|
||||
<div class="custom-homepage-content">
|
||||
{!! theme('custom_homepage_html') !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Portal layout content will be added here -->
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user