284 lines
11 KiB
Handlebars
284 lines
11 KiB
Handlebars
<div id="ai_body" data-hbs-id="f5wkafp">
|
|
<div class="hero-section relative flex items-center justify-center bg-gray-900 overflow-hidden" data-hbs-id="p52rynq">
|
|
<!-- Background Image with Overlay -->
|
|
<div class="absolute inset-0 z-0" data-hbs-id="638urlg">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1920&h=600"
|
|
alt="Blog Hero"
|
|
class="w-full h-full object-cover opacity-50"
|
|
/ data-hbs-id="zbp4ndx">
|
|
<!-- Dark Overlay -->
|
|
<div class="absolute inset-0 bg-black/60" data-hbs-id="wihdftt"></div>
|
|
<!-- Brand Color Overlay -->
|
|
<div class="absolute inset-0 cms-bg-primary opacity-10" data-hbs-id="w9w9onn"></div>
|
|
</div>
|
|
|
|
<!-- Animated Background Elements -->
|
|
<div class="absolute inset-0 z-5" data-hbs-id="io78qdr">
|
|
<div class="absolute top-20 left-10 w-2 h-2 bg-white/20 rounded-full animate-pulse" data-hbs-id="ewdlbs9"></div>
|
|
<div class="absolute top-40 right-20 w-3 h-3 cms-bg-accent opacity-60 rounded-full animate-bounce" style="animation-delay: 1s;" data-hbs-id="ez619vk"></div>
|
|
<div class="absolute bottom-32 left-1/4 w-1 h-1 bg-white/30 rounded-full animate-pulse" style="animation-delay: 2s;" data-hbs-id="q3azffo"></div>
|
|
<div class="absolute bottom-20 right-1/3 w-2 h-2 cms-bg-accent opacity-40 rounded-full animate-bounce" style="animation-delay: 0.5s;" data-hbs-id="j2dvhs2"></div>
|
|
</div>
|
|
|
|
<!-- Hero Content -->
|
|
<div class="relative z-10 text-center px-4 max-w-6xl mx-auto" data-hbs-id="6fery8w">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white text-sm font-medium mb-8" data-hbs-id="wl1gvwn">
|
|
<div class="w-2 h-2 cms-bg-accent rounded-full mr-2 animate-pulse" data-hbs-id="3fhypml"></div>
|
|
Latest Tech Insights
|
|
</div>
|
|
|
|
<!-- Main Heading -->
|
|
<h1 class="cms-h1 text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight" data-hbs-id="t92vb9t">
|
|
Explore Today's
|
|
<span class="block cms-text-accent bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent" data-hbs-id="b0ccm0z">
|
|
Technology
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- Subtitle -->
|
|
<p class="cms-body text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto leading-relaxed" data-hbs-id="bngq0lq">
|
|
Insights, analysis and trends shaping the future of tech and innovation. Stay ahead with expert perspectives and cutting-edge discoveries.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center" data-hbs-id="nvza0wb">
|
|
<a href="#latest-insights" class="cms-btn cms-bg-primary hover:cms-bg-accent text-white px-8 py-4 text-lg font-semibold rounded-lg shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 flex items-center" data-hbs-id="dagxhew">
|
|
Start Exploring
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-hbs-id="n57wq41">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
<a href="#featured-posts" class="cms-btn bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-600 px-8 py-4 text-lg font-semibold rounded-lg backdrop-blur-sm transition-all duration-300" data-hbs-id="kdhlp3p">
|
|
View Featured
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10" data-hbs-id="khdy6rj">
|
|
<div class="flex flex-col items-center text-white/60 animate-bounce" data-hbs-id="scd5y16">
|
|
<span class="text-xs text-white uppercase tracking-wider mb-2" data-hbs-id="0wbtkrl">Scroll Down</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-hbs-id="z6aupn1">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog Posts Section -->
|
|
<section class="py-20 px-4 bg-gray-50" data-hbs-id="qdqt18v">
|
|
<div class="max-w-7xl mx-auto" data-hbs-id="htzuo9c">
|
|
<!-- Section Header -->
|
|
<div class="text-center mb-16" data-hbs-id="diyut6k">
|
|
<div class="inline-flex items-center px-4 py-2 cms-bg-accent/10 cms-border-accent border rounded-full text-sm font-medium cms-text-accent mb-4" data-hbs-id="av98fng">
|
|
<i class="fas fa-newspaper mr-2" data-hbs-id="gu5tfil"></i>
|
|
Latest Insights
|
|
</div>
|
|
<h2 class="cms-h2 text-4xl md:text-5xl font-bold cms-text-dark mb-4" data-hbs-id="c0e7ffx">
|
|
Recent Blog Posts
|
|
</h2>
|
|
<p class="cms-body text-lg text-gray-600 max-w-2xl mx-auto" data-hbs-id="jql8ahv">
|
|
Discover the latest articles, insights, and stories from our community of writers and experts.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Blog Posts Grid -->
|
|
{{faster:posts limit="9" key="blog-posts-grid" post-item-class="blog-post-card" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"}}
|
|
<article class="blog-post-card cms-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 flex flex-col" data-hbs-id="mlnx3m0">
|
|
<!-- Featured Image -->
|
|
{{#if feature_image}}
|
|
<div class="relative h-56 overflow-hidden bg-gray-200" data-hbs-id="svd8ysg">
|
|
<img
|
|
src="{{feature_image}}"
|
|
alt="{{title}}"
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
|
|
/>
|
|
<!-- Reading Time Badge -->
|
|
<div class="absolute top-4 right-4 px-3 py-1 cms-bg-primary text-white text-xs font-semibold rounded-full backdrop-blur-sm bg-opacity-90" data-hbs-id="tslfefi">
|
|
<i class="fas fa-clock mr-1" data-hbs-id="idljvbg"></i>
|
|
{{reading_time}} min read
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="relative h-56 cms-bg-accent/10 flex items-center justify-center" data-hbs-id="fpko2pm">
|
|
<i class="fas fa-image text-6xl cms-text-accent opacity-30" data-hbs-id="ayrjd6w"></i>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<!-- Post Content -->
|
|
<div class="p-6 flex flex-col flex-grow" data-hbs-id="9q93fyh">
|
|
<!-- Post Title -->
|
|
<h3 class="cms-h3 text-xl font-bold cms-text-dark mb-3 leading-tight hover:cms-text-accent transition-colors duration-200" data-hbs-id="2huh0vs">
|
|
<a href="{{url}}" class="hover:underline">
|
|
{{title}}
|
|
</a>
|
|
</h3>
|
|
|
|
<!-- Post Excerpt -->
|
|
<p class="cms-body text-gray-600 mb-6 leading-relaxed flex-grow" data-hbs-id="9mg63py">
|
|
{{excerpt words=25}}
|
|
</p>
|
|
|
|
<!-- Post Meta -->
|
|
<div class="flex items-center justify-between pt-4 border-t border-gray-100" data-hbs-id="pov02du">
|
|
<!-- Author Info -->
|
|
<div class="flex items-center space-x-3" data-hbs-id="76j0ktn">
|
|
{{#if primary_author.profile_image}}
|
|
<img
|
|
src="{{primary_author.profile_image}}"
|
|
alt="{{primary_author.name}}"
|
|
class="w-10 h-10 rounded-full object-cover border-2 cms-border-accent"
|
|
/>
|
|
{{else}}
|
|
<div class="w-10 h-10 rounded-full cms-bg-accent/20 flex items-center justify-center" data-hbs-id="6ufa3gp">
|
|
<i class="fas fa-user cms-text-accent" data-hbs-id="dfwapb0"></i>
|
|
</div>
|
|
{{/if}}
|
|
<div class="flex flex-col" data-hbs-id="ejjz4il">
|
|
<span class="text-sm font-semibold cms-text-dark" data-hbs-id="ed7b60q">
|
|
{{primary_author.name}}
|
|
</span>
|
|
<span class="text-xs text-gray-500" data-hbs-id="cuki0c8">
|
|
{{date published_at "MMM DD, YYYY"}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Read More Arrow -->
|
|
<a href="{{url}}" class="cms-text-accent hover:cms-text-primary transition-colors duration-200">
|
|
<i class="fas fa-arrow-right text-lg" data-hbs-id="ihlcw5h"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{/faster:posts}}
|
|
|
|
<!-- Load More Button -->
|
|
<div class="text-center mt-12" data-hbs-id="xeapy7j">
|
|
{{faster:button type="posts" key="blog-posts-grid" auto-load="false"}}
|
|
<span class="inline-flex items-center" data-hbs-id="2wfbr44">
|
|
<i class="fas fa-sync-alt mr-2" data-hbs-id="z2h1mrc"></i>
|
|
Load More Posts
|
|
</span>
|
|
{{/faster:button}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.hero-section {
|
|
height: 800px;
|
|
}
|
|
.hero-bg-image {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-bg-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Card styling enhancements */
|
|
.post-feature-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 150ms ease;
|
|
}
|
|
|
|
.cms-card:hover .post-feature-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.post-tag {
|
|
color: var(--brand-accent);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.post-tag:hover {
|
|
color: var(--brand-primary);
|
|
}
|
|
|
|
.post-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--dark-gray);
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.cms-card:hover .post-title {
|
|
color: var(--brand-accent);
|
|
}
|
|
|
|
.post-content {
|
|
color: var(--medium-gray);
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.post-meta {
|
|
color: var(--medium-gray);
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.post-meta i {
|
|
margin-right: var(--space-2);
|
|
}
|
|
|
|
/* Section heading styling */
|
|
.section-heading {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--dark-gray);
|
|
text-align: center;
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-bottom: var(--space-2);
|
|
}
|
|
|
|
.section-heading::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 64px;
|
|
height: 4px;
|
|
background-color: var(--brand-accent);
|
|
border-radius: var(--space-1);
|
|
}
|
|
|
|
/* Grid layout */
|
|
.site-posts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
/* Post item positioning */
|
|
.post-item {
|
|
position: relative;
|
|
}
|
|
|
|
.post-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10;
|
|
}
|
|
</style>
|