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,78 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
const FAQS = [
|
||||
{ q: "How do I get started with our service?", a: "Lorem ipsum dolor sit amet consectetur ornare dui amet ultrices sed fermentum euismod dictum ut pellentesque aliquet nunc massa sed nisl pretium enim placerat." },
|
||||
{ q: "Can AI solutions help my business?", a: "Lorem ipsum dolor sit amet consectetur ornare dui amet ultrices sed fermentum euismod dictum ut pellentesque aliquet nunc massa sed nisl pretium enim placerat." },
|
||||
{ q: "How is ethical AI development ensured?", a: "Lorem ipsum dolor sit amet consectetur ornare dui amet ultrices sed fermentum euismod dictum ut pellentesque aliquet nunc massa sed nisl pretium enim placerat." },
|
||||
{ q: "What role does QuantumLab Computing play in AI research?", a: "Lorem ipsum dolor sit amet consectetur ornare dui amet ultrices sed fermentum euismod dictum ut pellentesque aliquet nunc massa sed nisl pretium enim placerat." },
|
||||
]
|
||||
|
||||
export default function CardsSection() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
||||
return (
|
||||
<section className="section-small">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="w-layout-grid faqs-v1-wrapper">
|
||||
<div className="sticky-top static-mbl">
|
||||
<div data-w-id="e69dfbb3-1a44-4cc6-11e0-94df71efbf76" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _260px _100-mbl">
|
||||
<div className="subtitle">
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>Have questions?</h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla. </p>
|
||||
</div>
|
||||
<div className="mg-top-2x-extra-small">
|
||||
<div className="buttons-row left">
|
||||
<a id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" data-wf--primary-button--variant="base" data-w-id="99805214-dd54-e7f3-2549-05c0df1040fb" href="mailto:support@quantum.com" className="primary-button w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
Get support</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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-layout-grid faqs-v1-grid">
|
||||
{FAQS.map((faq, i) => (
|
||||
<div key={i} className="card-accordion-v1-wrapper sibling-blur-item" onClick={() => setOpenIndex(openIndex === i ? null : i)} style={{ cursor: "pointer" }}>
|
||||
<div className="card accordion-card-v1">
|
||||
<div className="accordion-number">
|
||||
<div>{String(i + 1).padStart(2, "0")}</div>
|
||||
</div>
|
||||
<div className="accordion-content">
|
||||
<h3 className="accordion-title">{faq.q}</h3>
|
||||
<div className="accordion-body" style={{ maxHeight: openIndex === i ? "200px" : "0px", overflow: "hidden", transition: "max-height 0.3s ease" }}>
|
||||
<p className="mg-top-4x-extra-small">{faq.a}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="accordion-arrow" style={{ transform: openIndex === i ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.3s ease" }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M15.5 7.03847L10 12.9615L4.5 7.03847" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import LottiePlayer from "@/components/LottiePlayer"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function FormSection() {
|
||||
return (
|
||||
<section className="section-small bg-neutral">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="37f8537e-c33a-f3ad-764c-d5c8b3ff1b64" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _650px center">
|
||||
<div className="text-center">
|
||||
<div className="subtitle">Contact us</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
Reach us directly</h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur ut consequat luctus a ornare auctor mauris necolmer doloe. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="37f8537e-c33a-f3ad-764c-d5c8b3ff1b6a" style={{"opacity": "0", "filter": "blur(8px)"}} className="w-layout-grid contact-cards-grid-v1">
|
||||
<a data-w-id="c3b7cbc7-6bb0-417d-8af2-d16c83e09934" href="mailto:support@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-card-v1-content">
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff8a28b3e0d6614fe9b_help-support-animation-row-wave.json" className="contact-card-v1-image" loop autoplay />
|
||||
<div>
|
||||
<h3 className="display-4">Help & support</h3>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p className="text-paragraph">
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-card-v1-link-wrapper">
|
||||
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">support@quantumlab.com</div>
|
||||
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a data-w-id="9fa843fd-acac-5e66-0694-1c416deeff73" href="mailto:media@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-card-v1-content">
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff844db76df2f0ca451_press-media-animation-row-wave.json" className="contact-card-v1-image" loop autoplay />
|
||||
<div>
|
||||
<h3 className="display-4">Press & media</h3>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p className="text-paragraph">
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-card-v1-link-wrapper">
|
||||
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">media@quantumlab.com</div>
|
||||
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a data-w-id="4355aa2b-5646-3ff5-91b3-2f90df58ae42" href="mailto:sales@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-card-v1-content">
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff8806a1552f46e35ac_sales-inquiries-animation-visual-row.json" className="contact-card-v1-image" loop autoplay />
|
||||
<div>
|
||||
<h3 className="display-4">Sales & inquiries</h3>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p className="text-paragraph">
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-card-v1-link-wrapper">
|
||||
<div style={{"color": "rgb(22,22,22)"}} className="contact-link-text">sales@quantumlab.com</div>
|
||||
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import Link from "next/link"
|
||||
import ContactForm from "@/components/ContactForm"
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="section-small top overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="w-layout-grid contact-grid">
|
||||
<div data-w-id="f1d777b6-f289-d52f-017b-af3a4a212cde" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
|
||||
<div className="subtitle">Get in touch</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h1>
|
||||
Contact us</h1>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur laculis nunc risus sed eu eget quam sodales adipiscing purus erat quisque arcu adipiscing. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="w-node-_77c06870-1d0c-5ed5-aea2-38d8dab4dc54-60eb3ba7" className="position-relative---z-index-2">
|
||||
<div data-w-id="29536b1c-822f-a212-7a3f-cf3cd12237b3" style={{"opacity": "0", "filter": "blur(8px)"}} className="corner-gradient-container">
|
||||
<div className="border-wrapper">
|
||||
<ContactForm />
|
||||
</div>
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="w-node-a2c7d873-a197-1a9e-135d-10f912dd9a40-60eb3ba7" data-w-id="a2c7d873-a197-1a9e-135d-10f912dd9a40" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
|
||||
<div className="w-layout-grid contact-links-grid">
|
||||
<div className="corner-gradient-container">
|
||||
<a data-w-id="15c69e95-b060-7429-fd6f-a7d6b84c5b9f" href="mailto:info@quantumlab.com" className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-icon-wrapper">
|
||||
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
|
||||
</div>
|
||||
<svg style={{"color": "rgb(22,22,22)"}} xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="contact-v1-link-content">
|
||||
<div>Email address</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="display-2 medium text-titles">info@quantumlab.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-right-button-wrapper">
|
||||
<div className="icon-button">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="corner-gradient-container row">
|
||||
<a data-w-id="4e3cabf1-a0a7-6659-c002-9e212a09258e" href="tel:(123)456-7890" className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-icon-wrapper">
|
||||
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
|
||||
</div>
|
||||
<svg style={{"color": "rgb(22,22,22)"}} xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
|
||||
<g clipPath="url(#clip0_16077_4034)">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M17.4208 23.0719L19.6275 19.3745L20.2074 18.403L21.2951 18.7137L30.7718 21.4215L31.9775 21.7659L31.8283 23.011L30.907 30.7015L30.7429 32.0718L29.3648 31.9954C24.7899 31.7419 20.2596 30.4521 16.1565 28.1239C13.8427 26.8111 11.6667 25.1692 9.69696 23.1995C7.72725 21.2298 6.08529 19.0538 4.77246 16.74C2.44438 12.6369 1.15446 8.1065 0.901036 3.53162L0.824707 2.1536L2.19504 1.98942L9.8854 1.06812L11.1305 0.918945L11.4751 2.12475L14.1827 11.6014L14.4934 12.6892L13.522 13.269L9.82445 15.4758C10.8063 16.9482 11.9474 18.3468 13.2482 19.6476C14.5492 20.9486 15.9481 22.0899 17.4208 23.0719Z" fill="currentColor">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="contact-v1-link-content">
|
||||
<div>Phone number</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="display-2 medium text-titles">(123) 456-7890</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-right-button-wrapper">
|
||||
<div className="icon-button">
|
||||
<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>
|
||||
</div>
|
||||
</a>
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as CardsSection } from "./CardsSection"
|
||||
export { default as FormSection } from "./FormSection"
|
||||
export { default as HeroSection } from "./HeroSection"
|
||||
Reference in New Issue
Block a user