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>
99 lines
4.9 KiB
TypeScript
99 lines
4.9 KiB
TypeScript
import LottiePlayer from "@/components/LottiePlayer"
|
|
import Link from "next/link"
|
|
|
|
export default function PrinciplesSection() {
|
|
return (
|
|
<section className="section overflow-hidden">
|
|
<div className="w-layout-blockcontainer container-default w-container">
|
|
<div data-w-id="372e7f28-67fd-5f5e-6061-256f8b7997a5" style={{"opacity": "0", "filter": "blur(8px)"}} className="text-center">
|
|
<div className="subtitle">Core principles</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<h2>
|
|
Architecting tomorrow's mind </h2>
|
|
</div>
|
|
<div className="mg-top-4x-extra-small">
|
|
<p>
|
|
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor pharetra. </p>
|
|
</div>
|
|
</div>
|
|
<div className="mg-top-large">
|
|
<div data-w-id="3f196c4e-8732-f3ef-e6a2-04398a5349e2" style={{"opacity": "0", "filter": "blur(8px)"}} className="corner-gradient-container">
|
|
<div className="border-wrapper">
|
|
<div className="w-layout-grid principles-grid">
|
|
<div className="card principles-card">
|
|
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1d66f46dd336c7d633316_velocity-quantum-webflow-template-top-to-bottom.json" className="max-width-280px-mbl" loop autoplay />
|
|
<div>
|
|
<h3 className="display-4">Velocity</h3>
|
|
<div className="mg-top-5x-extra-small">
|
|
<p>
|
|
ipsum dolor sit amet consectetur nec quuis suspendisse nulla amet viverra tortor. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card principles-card">
|
|
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1d6cf4cfbc189da50f80b_generality-quantum-webflow-template-top-to-bottom.json" className="max-width-280px-mbl" loop autoplay />
|
|
<div>
|
|
<h3 className="display-4">Generality</h3>
|
|
<div className="mg-top-5x-extra-small">
|
|
<p>
|
|
ipsum dolor sit amet consectetur nec quuis suspendisse nulla amet viverra tortor. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card principles-card">
|
|
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1d6a76e480413794c2aa3_intelect-quantum-webflow-template-top-to-bottom.json" className="max-width-280px-mbl" loop autoplay />
|
|
<div>
|
|
<h3 className="display-4">Intellect</h3>
|
|
<div className="mg-top-5x-extra-small">
|
|
<p>
|
|
ipsum dolor sit amet consectetur nec quuis suspendisse nulla amet viverra tortor. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
|
|
<div className="corner-gradient-horizontal top-left">
|
|
</div>
|
|
<div className="corner-gradient-horizontal bottom-left">
|
|
</div>
|
|
<div className="corner-gradient-horizontal top-right">
|
|
</div>
|
|
<div className="corner-gradient-horizontal bottom-right">
|
|
</div>
|
|
<div className="corner-gradient-vertical bottom-left">
|
|
</div>
|
|
<div className="corner-gradient-vertical bottom-right">
|
|
</div>
|
|
<div className="corner-gradient-vertical top-left">
|
|
</div>
|
|
<div className="corner-gradient-vertical top-right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mg-top-regular">
|
|
<div data-w-id="bffe9e02-73d6-d2d3-239d-bbcb4bd7d83d" style={{"opacity": "0", "filter": "blur(8px)"}} className="buttons-row">
|
|
<Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/about" 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>
|
|
</section>
|
|
)
|
|
}
|