Leon-in
95eb362bfc
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.8 KiB
TypeScript
41 lines
1.8 KiB
TypeScript
import { BLOG_POSTS } from "@/lib/blog-data"
|
|
import BlogCard from "@/components/BlogCard"
|
|
|
|
export default function HeroSection() {
|
|
const featured = BLOG_POSTS.slice(0, 2)
|
|
|
|
return (
|
|
<section className="section top overflow-hidden">
|
|
<div className="w-layout-blockcontainer container-default w-container">
|
|
<div data-w-id="1d4184ff-9d8d-d0a9-7964-1fe6bc1712ef" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right">
|
|
<div className="inner-container _480px">
|
|
<div className="subtitle">Blog</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<h1>Latest news</h1>
|
|
</div>
|
|
<div className="mg-top-5x-extra-small">
|
|
<p>Lorem ipsum dolor sit amet consectetur nec quis suspendisse nulla.</p>
|
|
</div>
|
|
</div>
|
|
<form action="/search" className="form-block _365px position-relative---z-index-1 w-form">
|
|
<label htmlFor="search" className="hidden">Search</label>
|
|
<input className="input w-input" maxLength={256} name="query" placeholder="Search for articles…" type="search" id="search" required />
|
|
<div className="button-inside-input-wrapper left-mbp">
|
|
<input type="submit" className="form-button inside-input light-mode w-button" value="Search" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div className="mg-top-regular">
|
|
<div data-w-id="1d4184ff-9d8d-d0a9-7964-1fe6bc1712fd" style={{ opacity: "0", filter: "blur(8px)" }} className="w-dyn-list">
|
|
<div role="list" className="w-dyn-items">
|
|
{featured.map((post) => (
|
|
<BlogCard key={post.slug} post={post} variant="featured" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|