feat: initial commit — Webflow to Next.js conversion
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>
This commit is contained in:
Leon-in
@@ -0,0 +1,157 @@
|
||||
import LottiePlayer from "@/components/LottiePlayer"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import VideoLightbox from "@/components/VideoLightbox"
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="section hero-v1">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="w-layout-grid hero-v1-grid">
|
||||
<div className="position-relative---z-index-1">
|
||||
<div className="position-relative---z-index-1">
|
||||
<div data-w-id="7939bd8a-3226-7306-66d9-84e6bb7ffc0a" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _480px _100-tablet">
|
||||
<h1>
|
||||
The future beyond human intelligence </h1>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur convallis ut et in id enim tempus quis amet consequat ut rhoncus morbi ullamcorper faucibus in natoque. </p>
|
||||
</div>
|
||||
<div className="mg-top-2x-extra-small">
|
||||
<div className="buttons-row left">
|
||||
<Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="#about-us" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
About our company</div>
|
||||
<div className="button-icon-wrapper primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
|
||||
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
|
||||
</path>
|
||||
</svg>
|
||||
<div className="button-icon-bg">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-w-id="f313e881-ebc1-d314-e333-4417f945cb80" style={{"opacity": "0", "filter": "blur(8px)"}} className="hero-v1-bg-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 381 382" fill="none">
|
||||
<rect x="0.509766" y="305" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="0.509766" y="229" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="0.509766" y="153" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="0.509766" y="77" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="0.509766" y="1" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="76.5098" y="305" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="76.5098" y="229" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="76.5098" y="153" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="76.5098" y="77" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="76.5098" y="1" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="152.51" y="305" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="152.51" y="229" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="152.51" y="153" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="152.51" y="77" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="152.51" y="1" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="228.51" y="305" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="228.51" y="229" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="228.51" y="153" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="228.51" y="77" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="228.51" y="1" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="304.51" y="305" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="304.51" y="229" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="304.51" y="153" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="304.51" y="77" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
<rect x="304.51" y="1" width={76} height={76} stroke="currentColor">
|
||||
</rect>
|
||||
</svg>
|
||||
<div className="hero-v1-bg-gradient">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1a7d9c54a9b73191bb531_hero-v1-animation-quantum-webflow-template.json" className="hero-v1-lottie" loop autoplay />
|
||||
</div>
|
||||
<div id="about-us" data-w-id="bce231a0-6e79-c8d3-8883-56d99499b3ad" style={{"opacity": "0", "filter": "blur(8px)"}} className="about-section-wrapper">
|
||||
<div className="about-section-top-content">
|
||||
<div className="subtitle">
|
||||
us </div>
|
||||
<div className="mg-top-small">
|
||||
<p className="about-text">
|
||||
ucing QuantumLab: Pioneering the Future of AI Research. Engineered to push the limits of artificial intelligence, Quantum identifies emerging trends before they disrupt the industry. Choose Research Mode for in-depth, data-driven analysis or Development Mode for groundbreaking algorithm testing. Built with advanced AI systems and state-of-the-art computational power for unparalleled performance. <br />
|
||||
d by top-tier experts and fueled by global collaboration, Quantum is not just a lab—it's the core of tomorrow's innovations, shaping the future one breakthrough at a time. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-section-bottom-content">
|
||||
<VideoLightbox
|
||||
thumbnailSrc="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg"
|
||||
videoUrl="https://www.youtube.com/watch?v=Ojiv9Smi4XE"
|
||||
className="lightbox-link w-inline-block w-lightbox"
|
||||
>
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg" width={660} height={372} alt="About Us Thumbnail" className="lightbox-thumbnail" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 49 49" fill="none" className="play-button">
|
||||
<path d="M33.2598 24.4998L20.5863 31.8168L20.5863 17.1827L33.2598 24.4998Z" fill="currentColor" />
|
||||
</svg>
|
||||
</VideoLightbox>
|
||||
<div className="position-relative---z-index-1">
|
||||
<div className="hidden-on-mobile-portrait">
|
||||
<div className="display-3 medium text-titles">
|
||||
Watch video</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-section-bg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 507 659" fill="none">
|
||||
<path d="M0 535L135.811 535" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M135.811 0L135.811 535" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M506.811 535L355.811 535" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M0 658L135.811 658" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M506.811 658L355.811 658" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M136 535L356 535" stroke="currentColor">
|
||||
</path>
|
||||
<path d="M136 658L356 658" stroke="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
<div className="about-section-gradient top">
|
||||
</div>
|
||||
<div className="about-section-gradient left">
|
||||
</div>
|
||||
<div className="about-section-gradient right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user