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,68 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import type { BlogPost } from "@/lib/blog-data"
|
||||
|
||||
interface BlogCardProps {
|
||||
post: BlogPost
|
||||
variant?: "featured" | "grid"
|
||||
}
|
||||
|
||||
export default function BlogCard({ post, variant = "grid" }: BlogCardProps) {
|
||||
const isFeatured = variant === "featured"
|
||||
|
||||
return (
|
||||
<div role="listitem" className={isFeatured ? "blog-featured-v1-wrapper w-dyn-item" : "blog-card-v3-wrapper w-dyn-item"}>
|
||||
{isFeatured ? (
|
||||
<div className="border-wrapper">
|
||||
<CardInner post={post} variant={variant} />
|
||||
</div>
|
||||
) : (
|
||||
<CardInner post={post} variant={variant} />
|
||||
)}
|
||||
{isFeatured && (
|
||||
<div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal top-left" />
|
||||
<div className="corner-gradient-horizontal bottom-left" />
|
||||
<div className="corner-gradient-horizontal top-right" />
|
||||
<div className="corner-gradient-horizontal bottom-right" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CardInner({ post, variant }: { post: BlogPost; variant: "featured" | "grid" }) {
|
||||
const isGrid = variant === "grid"
|
||||
const cls = isGrid ? "blog-card-v1 w-variant-b9404c55-01d5-df76-2e4a-c99996f3231c w-inline-block" : "blog-card-v1 w-inline-block"
|
||||
|
||||
return (
|
||||
<Link href={`/blog-posts/${post.slug}`} className={cls}>
|
||||
<div className={`blog-v1-image-wrapper${isGrid ? " w-variant-b9404c55-01d5-df76-2e4a-c99996f3231c" : ""}`}>
|
||||
<Image alt={post.imageAlt} src={post.image} className="image" fill style={{ objectFit: "cover" }} />
|
||||
</div>
|
||||
<div className={`blog-v1-content${isGrid ? " w-variant-b9404c55-01d5-df76-2e4a-c99996f3231c" : ""}`}>
|
||||
<div className="inner-container _420px">
|
||||
<h3 className={`display-6${isGrid ? " w-variant-b9404c55-01d5-df76-2e4a-c99996f3231c" : ""}`}>{post.title}</h3>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p className="text-paragraph">{post.excerpt}</p>
|
||||
</div>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="blog-details-wrapper">
|
||||
<div className="item-details">{post.date}</div>
|
||||
<div className="item-details-divider">·</div>
|
||||
<div className="item-details">{post.category}</div>
|
||||
</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" />
|
||||
</svg>
|
||||
<div className="icon-button-bg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client"
|
||||
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { useState } from "react"
|
||||
|
||||
const schema = z.object({
|
||||
firstName: z.string().min(1, "First name is required"),
|
||||
lastName: z.string().min(1, "Last name is required"),
|
||||
email: z.string().email("Please enter a valid email"),
|
||||
country: z.string().min(1, "Country is required"),
|
||||
phone: z.string().min(1, "Phone number is required"),
|
||||
company: z.string().min(1, "Company is required"),
|
||||
companySize: z.string().min(1, "Please select company size"),
|
||||
message: z.string().min(10, "Message must be at least 10 characters"),
|
||||
})
|
||||
|
||||
type FormData = z.infer<typeof schema>
|
||||
|
||||
export default function ContactForm() {
|
||||
const [status, setStatus] = useState<"idle" | "success" | "error">("idle")
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
console.log("Contact form:", data)
|
||||
setStatus("success")
|
||||
reset()
|
||||
} catch {
|
||||
setStatus("error")
|
||||
}
|
||||
}
|
||||
|
||||
if (status === "success") {
|
||||
return (
|
||||
<div className="contact-form-block w-form">
|
||||
<div className="success-message-wrapper w-form-done" style={{ display: "block" }}>
|
||||
<div className="contact-success-message">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="contact-success-icon">
|
||||
<path d="M7.20658 10.9311L9.24116 12.1209L12.7928 7.20696M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||||
</svg>
|
||||
<h2 className="display-5">Thank you! We'll get back to you soon</h2>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>We have received your message and will get back to you as soon as possible.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="contact-form-block w-form">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="grid-2-columns contact-form-grid">
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="First name" type="text" {...register("firstName")} />
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="Last name" type="text" {...register("lastName")} />
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="Email address" type="email" {...register("email")} />
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="Country" type="text" {...register("country")} />
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="(123) 456 - 7890" type="tel" {...register("phone")} />
|
||||
<input className={`input contact-form w-input`} maxLength={256} placeholder="Company" type="text" {...register("company")} />
|
||||
<div className="select-wrapper">
|
||||
<select className="input select-form w-select" {...register("companySize")}>
|
||||
<option value="">Company size</option>
|
||||
<option value="1-20 Employees">1-20 Employees</option>
|
||||
<option value="20-100 Employees">20-100 Employees</option>
|
||||
<option value="100+ Employees">100+ Employees</option>
|
||||
</select>
|
||||
<div className="select-icon-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="select-icon">
|
||||
<path d="M15.5 7.03847L10 12.9615L4.5 7.03847" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<textarea maxLength={5000} placeholder="Enter your message" className="text-area contact-form w-input" {...register("message")} />
|
||||
<div className="contact-form-button-wrapper">
|
||||
<button type="submit" className="form-button w-button" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Please wait..." : "Send message"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div className="error-message contact-form-error w-form-fail" style={{ display: "block" }}>
|
||||
<div>Please fill in all required fields correctly.</div>
|
||||
</div>
|
||||
)}
|
||||
{status === "error" && (
|
||||
<div className="error-message contact-form-error w-form-fail" style={{ display: "block" }}>
|
||||
<div>Oops! Something went wrong. Please try again.</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import NewsletterForm from "@/components/NewsletterForm"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="footer-wrapper">
|
||||
<div data-w-id="f1ff1ac2-5ccd-56f8-612a-0570791caa19" className="footer-main-section">
|
||||
<div className="corner-gradient-container">
|
||||
<div className="footer-top">
|
||||
<div className="footer-logo-wrapper">
|
||||
<Link href="/" className="logo-link w-inline-block w--current">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a73cf7c58867b86184dc28_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="Logo - Quantum | Webflow Template" className="logo-icon w-variant-7662d6cb-8aa5-f783-c60a-07a613bd9733" />
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="/careers" className="footer-button w-inline-block">
|
||||
<div className="button-content footer">
|
||||
<div>
|
||||
Join our team </div>
|
||||
</div>
|
||||
<div className="button-icon-wrapper footer 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>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal bottom-left dark-mode">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal bottom-right dark-mode">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-middle">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="w-layout-grid footer-middle-content">
|
||||
<div className="inner-container _355px _100-tablet">
|
||||
<div className="display-6 medium text-titles-dm">
|
||||
Unlock tomorrow’s most important AI trends </div>
|
||||
<div className="mg-top-8-px">
|
||||
<p className="text-color-neutral-400 mg-bottom-20px">
|
||||
Lorem ipsum dolor sit amet consectetur sit mi lacus quis vitae sed pellentesque libero ultricies neque. </p>
|
||||
</div>
|
||||
<NewsletterForm variant="dark" />
|
||||
</div>
|
||||
<div className="w-layout-grid footer-pages-grid">
|
||||
<div className="footer-pages-column">
|
||||
<Link href="/" className="footer-link w-inline-block w--current">
|
||||
<div className="footer-link-text">
|
||||
Home </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/about" className="footer-link w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
About </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/contact" className="footer-link w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Contact </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/careers" className="footer-link last---left-column w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Careers </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="footer-pages-column">
|
||||
<Link href="/careers/ai-research-scientist" className="footer-link w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Career single </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/blog" className="footer-link w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Blog </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/blog-posts/ai-powered-predictive-models-and-their-impact-across-industries" className="footer-link w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Blog post </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="/coming-soon" className="footer-link last---right-column w-inline-block">
|
||||
<div className="footer-link-text">
|
||||
Coming soon </div>
|
||||
<div className="footer-link-icon">
|
||||
<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 className="footer-link-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="corner-gradient-container">
|
||||
<div className="w-layout-grid footer-links-wrapper">
|
||||
<a data-w-id="08100fe2-7e2d-6e6c-ca53-e21c22c274f5" href="mailto:info@quantum.com" className="footer-contact-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="footer-contact-link-icon-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="footer-contact-link-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 className="footer-contact-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-color-neutral-500">
|
||||
Email address </div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="medium text-titles-dm">
|
||||
info@quantumlab.com </div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://www.intercom.com" target="_blank" className="footer-contact-link w-inline-block" rel="noopener noreferrer">
|
||||
<div className="footer-contact-link-icon-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="footer-contact-link-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M2 1H1V20H5.25V23.7944L6.77605 22.8505L11.3843 20H23V1H2ZM16 9.5H7V6.5H16V9.5ZM7 14.5H14V11.5H7V14.5Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
<div className="footer-contact-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-color-neutral-500">
|
||||
Live chat with us </div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="medium text-titles-dm">
|
||||
Chat with us </div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a data-w-id="7fe5019c-0d48-0b18-79a9-ab7251d22b0b" href="mailto:support@quantum.com" className="footer-contact-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="footer-contact-link-icon-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="footer-contact-link-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M1.375 12C1.375 6.13197 6.13197 1.375 12 1.375C17.868 1.375 22.625 6.13197 22.625 12C22.625 17.868 17.868 22.625 12 22.625C6.13197 22.625 1.375 17.868 1.375 12ZM12.8543 7.60707H11.0834V5.83623H12.8543V7.60707ZM11.1146 11.1146H9.34375V9.34375H12.8854V15.5417H14.6563V17.3125H9.34375V15.5417H11.1146V11.1146Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
<div className="footer-contact-link-bg">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-color-neutral-500">
|
||||
Support </div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="medium text-titles-dm">
|
||||
support@quantumlab.com </div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal bottom-left dark-mode">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal bottom-right dark-mode">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal top-left dark-mode">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal top-right dark-mode">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<a href="https://www.brixtemplates.com" target="_blank" className="link-square-icon-left---dark-mode w-inline-block" rel="noopener noreferrer">
|
||||
<div className="icon-40px---dark-mode">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 19" fill="none" className="icon-18px">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M19.7781 4.875L13.8748 16.4155H8.32985L10.8004 11.6326H10.6896C8.65138 14.2785 5.61034 16.0202 1.27734 16.4155V11.6988C1.27734 11.6988 4.04927 11.5351 5.6788 9.82186H1.27734V4.87509H6.22411V8.94374L6.33513 8.94329L8.35659 4.87509H12.0977V8.91794L12.2087 8.91776L14.306 4.875H19.7781Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
More Webflow Templates </div>
|
||||
</a>
|
||||
<p className="text-color-neutral-500">
|
||||
Copyright © QuantumLab | Designed by <a href="https://www.brixtemplates.com" target="_blank" className="text-link" rel="noopener noreferrer">
|
||||
BRIX Templates </a>
|
||||
and powered by <a href="https://webflow.com" target="_blank" className="text-link" rel="noopener noreferrer">
|
||||
Webflow </a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
|
||||
export default function GsapAnimations() {
|
||||
useEffect(() => {
|
||||
let ctx: ReturnType<typeof import("gsap").gsap.context> | null = null
|
||||
|
||||
import("gsap").then(async ({ gsap }) => {
|
||||
const { ScrollTrigger } = await import("gsap/ScrollTrigger")
|
||||
const { Observer } = await import("gsap/Observer")
|
||||
gsap.registerPlugin(ScrollTrigger, Observer)
|
||||
|
||||
ctx = gsap.context(() => {
|
||||
initMarquee(gsap, Observer)
|
||||
initCounters(gsap, ScrollTrigger)
|
||||
initScrollReveal(gsap, ScrollTrigger)
|
||||
initButtonHovers(gsap)
|
||||
initSmoothScroll()
|
||||
})
|
||||
})
|
||||
|
||||
return () => { ctx?.revert() }
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function initMarquee(
|
||||
gsap: typeof import("gsap").gsap,
|
||||
Observer: typeof import("gsap/Observer").Observer,
|
||||
) {
|
||||
const marqueeItems = gsap.utils.toArray<HTMLElement>(".marquee-scroll-item")
|
||||
if (!marqueeItems.length) return
|
||||
|
||||
const groups = new Map<HTMLElement, HTMLElement[]>()
|
||||
marqueeItems.forEach((item) => {
|
||||
const parent = item.parentElement
|
||||
if (!parent) return
|
||||
if (!groups.has(parent)) groups.set(parent, [])
|
||||
groups.get(parent)!.push(item)
|
||||
})
|
||||
|
||||
const instances: {
|
||||
marqueeTimeline: gsap.core.Timeline
|
||||
marqueeObject: { value: number }
|
||||
hoverPauseProxy: { value: number }
|
||||
isHoverPaused: boolean
|
||||
lastDirection: number
|
||||
}[] = []
|
||||
|
||||
groups.forEach((items, containerEl) => {
|
||||
if (!items.length) return
|
||||
const inst = {
|
||||
marqueeObject: { value: 1 },
|
||||
hoverPauseProxy: { value: 1 },
|
||||
isHoverPaused: false,
|
||||
lastDirection: 1,
|
||||
marqueeTimeline: gsap.timeline({
|
||||
repeat: -1,
|
||||
onReverseComplete() { this.progress(1) },
|
||||
}),
|
||||
}
|
||||
inst.marqueeTimeline.fromTo(items, { xPercent: 0 }, { xPercent: -100, duration: 50, ease: "none" })
|
||||
|
||||
const triggerSet = new Set<HTMLElement>()
|
||||
if (containerEl.classList.contains("marquee-hover-stop")) triggerSet.add(containerEl)
|
||||
containerEl.querySelectorAll<HTMLElement>(".marquee-hover-stop").forEach((el) => triggerSet.add(el))
|
||||
|
||||
if (triggerSet.size && window.matchMedia("(pointer: fine)").matches) {
|
||||
const setPaused = (state: boolean) => {
|
||||
inst.isHoverPaused = state
|
||||
const ts = inst.marqueeTimeline.timeScale()
|
||||
gsap.killTweensOf(inst.hoverPauseProxy)
|
||||
gsap.fromTo(inst.hoverPauseProxy, { value: state ? ts : 0 }, {
|
||||
value: state ? 0 : inst.lastDirection || 1,
|
||||
duration: 0.4,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => inst.marqueeTimeline.timeScale(inst.hoverPauseProxy.value),
|
||||
})
|
||||
}
|
||||
triggerSet.forEach((el) => {
|
||||
el.addEventListener("mouseenter", () => setPaused(true))
|
||||
el.addEventListener("mouseleave", () => setPaused(false))
|
||||
})
|
||||
}
|
||||
|
||||
instances.push(inst)
|
||||
})
|
||||
|
||||
if (instances.length) {
|
||||
Observer.create({
|
||||
target: window,
|
||||
type: "wheel,scroll,touch",
|
||||
onChangeY: (self: { velocityY: number }) => {
|
||||
let velocity = gsap.utils.clamp(-40, 40, self.velocityY * 0.002)
|
||||
const dir = velocity < 0 ? -1 : 1
|
||||
instances.forEach((inst) => {
|
||||
if (inst.isHoverPaused) return
|
||||
inst.marqueeTimeline.timeScale(velocity)
|
||||
inst.lastDirection = dir
|
||||
gsap.fromTo(inst.marqueeObject, { value: velocity }, {
|
||||
value: dir,
|
||||
duration: 1,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => { if (!inst.isHoverPaused) inst.marqueeTimeline.timeScale(inst.marqueeObject.value) },
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
instances.forEach((inst) => inst.marqueeTimeline.pause())
|
||||
}
|
||||
}
|
||||
|
||||
function initCounters(
|
||||
gsap: typeof import("gsap").gsap,
|
||||
ScrollTrigger: typeof import("gsap/ScrollTrigger").ScrollTrigger,
|
||||
) {
|
||||
const elements = gsap.utils.toArray<HTMLElement>(".count-up-number-animation")
|
||||
if (!elements.length) return
|
||||
|
||||
elements.forEach((el, i) => {
|
||||
const target = parseFloat(el.getAttribute("data-count") || "100")
|
||||
const decimals = target % 1 !== 0 ? 1 : 0
|
||||
gsap.fromTo(el, { textContent: "0" }, {
|
||||
textContent: String(target),
|
||||
duration: 2,
|
||||
ease: "power1.out",
|
||||
snap: decimals ? { textContent: 0.1 } : { textContent: 1 },
|
||||
delay: i * 0.1,
|
||||
scrollTrigger: { trigger: el, start: "top 80%", once: true },
|
||||
onUpdate() {
|
||||
const v = parseFloat(el.textContent || "0")
|
||||
el.textContent = v.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function initScrollReveal(
|
||||
gsap: typeof import("gsap").gsap,
|
||||
ScrollTrigger: typeof import("gsap/ScrollTrigger").ScrollTrigger,
|
||||
) {
|
||||
ScrollTrigger.batch(".animate-on-scroll", {
|
||||
onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
|
||||
onLeave: (batch) => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
|
||||
onEnterBack: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
|
||||
onLeaveBack: (batch) => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
|
||||
})
|
||||
}
|
||||
|
||||
function initButtonHovers(gsap: typeof import("gsap").gsap) {
|
||||
document.querySelectorAll<HTMLElement>(".primary-button, .secondary-button, .footer-button").forEach((btn) => {
|
||||
const icon = btn.querySelector<HTMLElement>(".button-icon-wrapper svg")
|
||||
if (!icon) return
|
||||
btn.addEventListener("mouseenter", () => {
|
||||
gsap.to(icon, { x: 3, duration: 0.3, ease: "power2.out" })
|
||||
})
|
||||
btn.addEventListener("mouseleave", () => {
|
||||
gsap.to(icon, { x: 0, duration: 0.3, ease: "power2.out" })
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll<HTMLElement>(".footer-link, .footer-contact-link").forEach((link) => {
|
||||
const bg = link.querySelector<HTMLElement>(".footer-link-bg, .footer-contact-link-bg")
|
||||
if (!bg) return
|
||||
link.addEventListener("mouseenter", () => {
|
||||
gsap.to(bg, { width: "100%", duration: 0.3, ease: "power2.out" })
|
||||
})
|
||||
link.addEventListener("mouseleave", () => {
|
||||
gsap.to(bg, { width: "0%", duration: 0.3, ease: "power2.out" })
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelectorAll<HTMLElement>(".contact-v1-link").forEach((link) => {
|
||||
const bg = link.querySelector<HTMLElement>(".contact-icon-bg")
|
||||
if (!bg) return
|
||||
link.addEventListener("mouseenter", () => {
|
||||
gsap.to(bg, { width: "100%", duration: 0.4, ease: "power2.out" })
|
||||
})
|
||||
link.addEventListener("mouseleave", () => {
|
||||
gsap.to(bg, { width: "0%", duration: 0.4, ease: "power2.out" })
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function initSmoothScroll() {
|
||||
document.documentElement.style.scrollBehavior = "smooth"
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import ThemeToggle from "@/components/ThemeToggle"
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/blog", label: "Blog" },
|
||||
{ href: "/contact", label: "Contact" },
|
||||
]
|
||||
|
||||
function ChevronIcon() {
|
||||
return (
|
||||
<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" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownIcon() {
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Header() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false)
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const pathname = usePathname()
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20)
|
||||
window.addEventListener("scroll", onScroll, { passive: true })
|
||||
return () => window.removeEventListener("scroll", onScroll)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setMobileOpen(false)
|
||||
setDropdownOpen(false)
|
||||
}, [pathname])
|
||||
|
||||
const toggleMobile = useCallback(() => setMobileOpen((v) => !v), [])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`header-wrapper w-nav ${scrolled ? "header-scrolled" : ""}`}
|
||||
data-animation="default"
|
||||
data-easing2="ease"
|
||||
data-easing="ease"
|
||||
data-collapse="medium"
|
||||
role="banner"
|
||||
data-duration="300"
|
||||
>
|
||||
<div className="header-content">
|
||||
<div className="header-logo-wrapper">
|
||||
<div className="show-light-mode">
|
||||
<Link href="/" className="logo-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a43b922d3d1ca923f36385_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="Logo" className="logo-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="show-dark-mode">
|
||||
<Link href="/" className="logo-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a73cf7c58867b86184dc28_logo-icon-quantum-webflow-template.svg" width={54} height={54} alt="Logo" className="logo-icon" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right-side">
|
||||
<nav
|
||||
role="navigation"
|
||||
className={`nav-menu w-nav-menu ${mobileOpen ? "w--open" : ""}`}
|
||||
>
|
||||
<ul role="list" className="list-nav-menu w-list-unstyled">
|
||||
{NAV_LINKS.map(({ href, label }) => (
|
||||
<li key={href} className="link-nav-item sibling-blur-item">
|
||||
<Link
|
||||
href={href}
|
||||
className={`link w-inline-block ${pathname === href ? "w--current" : ""}`}
|
||||
>
|
||||
<div className="link-icon-wrapper">
|
||||
<div className="link-icon">
|
||||
<ChevronIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="link-text">{label}</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<li className="link-nav-item sibling-blur-item">
|
||||
<div
|
||||
className={`header-dropdown w-dropdown ${dropdownOpen ? "w--open" : ""}`}
|
||||
onMouseEnter={() => setDropdownOpen(true)}
|
||||
onMouseLeave={() => setDropdownOpen(false)}
|
||||
>
|
||||
<button
|
||||
className="dropdown-toggle w-dropdown-toggle"
|
||||
onClick={() => setDropdownOpen((v) => !v)}
|
||||
aria-expanded={dropdownOpen}
|
||||
type="button"
|
||||
>
|
||||
<div>Pages</div>
|
||||
<div className="dropdown-icon">
|
||||
<DropdownIcon />
|
||||
</div>
|
||||
</button>
|
||||
{dropdownOpen && (
|
||||
<nav className="dropdown-content-wrapper w-dropdown-list w--open">
|
||||
<div className="card header-dropdown-card">
|
||||
<div className="w-layout-grid header-dropdown-grid">
|
||||
<div>
|
||||
<div className="dropdown-title">Main pages</div>
|
||||
<div className="w-layout-grid main-pages-grid">
|
||||
<div className="w-layout-grid pages-column">
|
||||
{[
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/contact", label: "Contact" },
|
||||
].map(({ href, label }) => (
|
||||
<Link key={href} href={href} className="link w-inline-block">
|
||||
<div className="link-icon-wrapper">
|
||||
<div className="link-icon"><ChevronIcon /></div>
|
||||
</div>
|
||||
<div className="link-text">{label}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-layout-grid pages-column">
|
||||
{[
|
||||
{ href: "/blog", label: "Blog" },
|
||||
].map(({ href, label }) => (
|
||||
<Link key={href} href={href} className="link w-inline-block">
|
||||
<div className="link-icon-wrapper">
|
||||
<div className="link-icon"><ChevronIcon /></div>
|
||||
</div>
|
||||
<div className="link-text">{label}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
<li className="link-nav-item mbl-button">
|
||||
<Link href="/contact" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>Join our team</div>
|
||||
<div className="button-icon-wrapper primary">
|
||||
<ChevronIcon />
|
||||
<div className="button-icon-bg" />
|
||||
<div className="button-icon-bg-inside" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="hidden-on-mobile-landscape">
|
||||
<div className="show-light-mode">
|
||||
<Link href="/contact" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>Join our team</div>
|
||||
<div className="button-icon-wrapper primary">
|
||||
<ChevronIcon />
|
||||
<div className="button-icon-bg" />
|
||||
<div className="button-icon-bg-inside" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="show-dark-mode">
|
||||
<Link href="/contact" className="secondary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>Join our team</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<ChevronIcon />
|
||||
<div className="button-icon-bg bg-neutral-800" />
|
||||
<div className="button-icon-bg-inside bg-neutral-600" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
<button
|
||||
className={`hamburger-menu w-nav-button ${mobileOpen ? "w--open" : ""}`}
|
||||
onClick={toggleMobile}
|
||||
aria-label="Toggle menu"
|
||||
type="button"
|
||||
>
|
||||
<div className="hamburger-menu-flex">
|
||||
<div className="hamburger-menu-line top" />
|
||||
<div className="hamburger-menu-line bottom" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{mobileOpen && <div className="w-nav-overlay w--open" onClick={() => setMobileOpen(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef } from "react"
|
||||
|
||||
interface LottiePlayerProps {
|
||||
src: string
|
||||
className?: string
|
||||
loop?: boolean
|
||||
autoplay?: boolean
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
export default function LottiePlayer({ src, className, loop = true, autoplay = true, style }: LottiePlayerProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const animRef = useRef<ReturnType<typeof import("lottie-web").default.loadAnimation> | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
|
||||
import("lottie-web").then((lottie) => {
|
||||
if (cancelled || !containerRef.current) return
|
||||
animRef.current = lottie.default.loadAnimation({
|
||||
container: containerRef.current,
|
||||
renderer: "svg",
|
||||
loop,
|
||||
autoplay,
|
||||
path: src,
|
||||
})
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
animRef.current?.destroy()
|
||||
}
|
||||
}, [src, loop, autoplay])
|
||||
|
||||
return <div ref={containerRef} className={className} style={style} />
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client"
|
||||
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { useState } from "react"
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email("Please enter a valid email address"),
|
||||
})
|
||||
|
||||
type FormData = z.infer<typeof schema>
|
||||
|
||||
interface NewsletterFormProps {
|
||||
variant?: "light" | "dark"
|
||||
}
|
||||
|
||||
export default function NewsletterForm({ variant = "dark" }: NewsletterFormProps) {
|
||||
const [status, setStatus] = useState<"idle" | "success" | "error">("idle")
|
||||
const isDark = variant === "dark"
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 800))
|
||||
console.log("Newsletter subscription:", data.email)
|
||||
setStatus("success")
|
||||
reset()
|
||||
} catch {
|
||||
setStatus("error")
|
||||
}
|
||||
}
|
||||
|
||||
if (status === "success") {
|
||||
return (
|
||||
<div className={`success-message-wrapper w-form-done`} style={{ display: "block" }}>
|
||||
<div className={`success-message-inside-input ${isDark ? "dark-mode" : ""}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="squared-icon _14px">
|
||||
<path d="M7.20658 10.9311L9.24116 12.1209L12.7928 7.20696M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||||
</svg>
|
||||
<div>Thanks for subscribing to our newsletter!</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`form-block _465px w-form`}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="position-relative">
|
||||
<input
|
||||
className={`input ${isDark ? "dark-mode" : ""} w-input`}
|
||||
maxLength={256}
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
{...register("email")}
|
||||
/>
|
||||
<div className={`button-inside-input-wrapper ${isDark ? "dark-mode" : ""} left-mbp`}>
|
||||
<button
|
||||
type="submit"
|
||||
className={`form-button inside-input ${isDark ? "dark-mode" : ""} w-button`}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Please wait..." : "Subscribe"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{errors.email && (
|
||||
<div className="error-message w-form-fail" style={{ display: "block" }}>
|
||||
<div>{errors.email.message}</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
{status === "error" && (
|
||||
<div className="error-message w-form-fail" style={{ display: "block" }}>
|
||||
<div>Oops! Something went wrong while submitting the form.</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
"use client"
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
export default function PageTransition({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname()
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={pathname}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, ease: "easeOut" }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { usePathname } from "next/navigation"
|
||||
|
||||
export default function RevealObserver() {
|
||||
const pathname = usePathname()
|
||||
|
||||
useEffect(() => {
|
||||
let observer: IntersectionObserver | null = null
|
||||
let raf: number
|
||||
|
||||
raf = requestAnimationFrame(() => {
|
||||
const allDataWid = document.querySelectorAll<HTMLElement>("[data-w-id]")
|
||||
const targets: HTMLElement[] = []
|
||||
|
||||
allDataWid.forEach((el) => {
|
||||
if (el.style.opacity === "0" && el.style.filter?.includes("blur")) {
|
||||
el.style.transform = "translateY(24px)"
|
||||
el.style.transition = "opacity 0.7s ease-out, filter 0.7s ease-out, transform 0.7s ease-out"
|
||||
targets.push(el)
|
||||
}
|
||||
})
|
||||
|
||||
if (!targets.length) return
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement
|
||||
el.style.opacity = "1"
|
||||
el.style.filter = "blur(0px)"
|
||||
el.style.transform = "translateY(0)"
|
||||
observer?.unobserve(el)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.05, rootMargin: "0px 0px -5% 0px" },
|
||||
)
|
||||
|
||||
targets.forEach((el) => observer!.observe(el))
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(raf)
|
||||
observer?.disconnect()
|
||||
}
|
||||
}, [pathname])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
"use client"
|
||||
|
||||
import { useTheme } from "next-themes"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
useEffect(() => setMounted(true), [])
|
||||
|
||||
if (!mounted) {
|
||||
return <button className="theme-toggle" aria-label="Toggle theme"><span style={{ width: 18, height: 18 }} /></button>
|
||||
}
|
||||
|
||||
const isDark = theme === "dark"
|
||||
|
||||
return (
|
||||
<button
|
||||
className="theme-toggle"
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
||||
>
|
||||
{isDark ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
|
||||
interface VideoLightboxProps {
|
||||
thumbnailSrc: string
|
||||
videoUrl: string
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export default function VideoLightbox({ thumbnailSrc, videoUrl, className, children }: VideoLightboxProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleOpen = useCallback(() => setOpen(true), [])
|
||||
const handleClose = useCallback(() => setOpen(false), [])
|
||||
|
||||
const embedUrl = videoUrl.includes("youtube.com/watch")
|
||||
? videoUrl.replace("watch?v=", "embed/") + "?autoplay=1"
|
||||
: videoUrl
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" className={className} onClick={handleOpen} style={{ cursor: "pointer", border: "none", background: "none", padding: 0 }}>
|
||||
{children || <img src={thumbnailSrc} alt="Video thumbnail" style={{ width: "100%" }} />}
|
||||
</button>
|
||||
{open && (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed", inset: 0, zIndex: 9999,
|
||||
background: "rgba(0,0,0,0.9)",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
}}
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div style={{ position: "relative", width: "90vw", maxWidth: 1200, aspectRatio: "16/9" }} onClick={(e) => e.stopPropagation()}>
|
||||
<iframe
|
||||
src={embedUrl}
|
||||
style={{ width: "100%", height: "100%", border: "none", borderRadius: 12 }}
|
||||
allow="autoplay; fullscreen; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
style={{
|
||||
position: "absolute", top: -40, right: 0,
|
||||
background: "none", border: "none", color: "#fff",
|
||||
fontSize: 28, cursor: "pointer", lineHeight: 1,
|
||||
}}
|
||||
aria-label="Close"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import Image from "next/image"
|
||||
|
||||
export default function CareersSection() {
|
||||
return (
|
||||
<section className="section pd-top-0 overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="57c6d91a-ff5b-0c4b-0e98-f6574583d612" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _650px center">
|
||||
<div className="text-center">
|
||||
<div className="subtitle">Investors</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
We partner with purpose-driven investors </h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<div className="inner-container _566px center">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur netus quis ac varius ut nam est tellus ut porttitor ut volutpat malesuada rhoncus quis lacus augue ac urna et eget elementum at elit. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="97dc1372-f411-c523-0bef-128c83baf08b" style={{"opacity": "0", "filter": "blur(8px)"}} className="logo-strip-marquee-wrapper">
|
||||
<div className="logo-strip-marquee marquee-scroll-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a4098611a628c081a_linkora-logo-quantum-webflow-template.svg" width={125} height={33} alt="Linkora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a23b74de53cc9a64f_converra-logo-quantum-webflow-template.svg" width={130} height={33} alt="Converra Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a24ff0842f7ea9e4f_nexora-logo-quantum-webflow-template.svg" width={110} height={33} alt="Nexora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876ba1593ccde3aeb482_syncell-logo-quantum-webflow-template.svg" width={119} height={33} alt="Syncell Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876c0f4d2d1856ba6b88_socium-logo-quantum-webflow-template.svg" width={125} height={33} alt="Socium Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876bee27e15bc9b9e5a8_bridgr-logo-quantum-webflow-template.svg" width={109} height={33} alt="Bridgr Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a6c28f60e0f1858b8_netspire-logo-quantum-webflow-template.svg" width={121} height={33} alt="Netspire Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
</div>
|
||||
<div className="logo-strip-marquee marquee-scroll-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a4098611a628c081a_linkora-logo-quantum-webflow-template.svg" width={125} height={33} alt="Linkora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a23b74de53cc9a64f_converra-logo-quantum-webflow-template.svg" width={130} height={33} alt="Converra Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a24ff0842f7ea9e4f_nexora-logo-quantum-webflow-template.svg" width={110} height={33} alt="Nexora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876ba1593ccde3aeb482_syncell-logo-quantum-webflow-template.svg" width={119} height={33} alt="Syncell Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876c0f4d2d1856ba6b88_socium-logo-quantum-webflow-template.svg" width={125} height={33} alt="Socium Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876bee27e15bc9b9e5a8_bridgr-logo-quantum-webflow-template.svg" width={109} height={33} alt="Bridgr Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a6c28f60e0f1858b8_netspire-logo-quantum-webflow-template.svg" width={121} height={33} alt="Netspire Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
</div>
|
||||
<div className="logo-strip-marquee marquee-scroll-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a4098611a628c081a_linkora-logo-quantum-webflow-template.svg" width={125} height={33} alt="Linkora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a23b74de53cc9a64f_converra-logo-quantum-webflow-template.svg" width={130} height={33} alt="Converra Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a24ff0842f7ea9e4f_nexora-logo-quantum-webflow-template.svg" width={110} height={33} alt="Nexora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876ba1593ccde3aeb482_syncell-logo-quantum-webflow-template.svg" width={119} height={33} alt="Syncell Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876c0f4d2d1856ba6b88_socium-logo-quantum-webflow-template.svg" width={125} height={33} alt="Socium Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876bee27e15bc9b9e5a8_bridgr-logo-quantum-webflow-template.svg" width={109} height={33} alt="Bridgr Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a6c28f60e0f1858b8_netspire-logo-quantum-webflow-template.svg" width={121} height={33} alt="Netspire Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
</div>
|
||||
<div className="logo-strip-marquee marquee-scroll-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a4098611a628c081a_linkora-logo-quantum-webflow-template.svg" width={125} height={33} alt="Linkora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a23b74de53cc9a64f_converra-logo-quantum-webflow-template.svg" width={130} height={33} alt="Converra Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a24ff0842f7ea9e4f_nexora-logo-quantum-webflow-template.svg" width={110} height={33} alt="Nexora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876ba1593ccde3aeb482_syncell-logo-quantum-webflow-template.svg" width={119} height={33} alt="Syncell Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876c0f4d2d1856ba6b88_socium-logo-quantum-webflow-template.svg" width={125} height={33} alt="Socium Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876bee27e15bc9b9e5a8_bridgr-logo-quantum-webflow-template.svg" width={109} height={33} alt="Bridgr Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a6c28f60e0f1858b8_netspire-logo-quantum-webflow-template.svg" width={121} height={33} alt="Netspire Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
</div>
|
||||
<div className="logo-strip-marquee marquee-scroll-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a4098611a628c081a_linkora-logo-quantum-webflow-template.svg" width={125} height={33} alt="Linkora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a23b74de53cc9a64f_converra-logo-quantum-webflow-template.svg" width={130} height={33} alt="Converra Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a24ff0842f7ea9e4f_nexora-logo-quantum-webflow-template.svg" width={110} height={33} alt="Nexora Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876ba1593ccde3aeb482_syncell-logo-quantum-webflow-template.svg" width={119} height={33} alt="Syncell Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876c0f4d2d1856ba6b88_socium-logo-quantum-webflow-template.svg" width={125} height={33} alt="Socium Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876bee27e15bc9b9e5a8_bridgr-logo-quantum-webflow-template.svg" width={109} height={33} alt="Bridgr Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a7876a6c28f60e0f1858b8_netspire-logo-quantum-webflow-template.svg" width={121} height={33} alt="Netspire Logo - Quantum | Webflow Template" className="logo-strip-item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import LottiePlayer from "@/components/LottiePlayer"
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<section className="section top overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="28893d6d-b366-6951-6d91-f80940d4e59d" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
|
||||
<div>
|
||||
<div className="subtitle">About us</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h1>About our AI lab</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inner-container _355px">
|
||||
<p>Lorem ipsum dolor sit amet consectetur maecenas volutpat lobortis ultrices elementum est ut etiam.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-w-id="c9aa8bb0-8524-45b8-1337-b4d2c55b6f23" style={{"opacity": "0", "filter": "blur(8px)"}} className="mg-top-regular overflow-hidden">
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28b101cd56458bf646202_about-hero-animation-wave-quantum-webflow-template.json" className="about-hero-lottie" loop autoplay />
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div className="w-layout-grid about-hero-stats-wrapper">
|
||||
<div data-w-id="d651207f-5e62-7ad5-26ff-8f1f18b04695">
|
||||
<div className="stat-wrapper _3-digits center-mbl">
|
||||
<div className="stat-text">
|
||||
<span data-count="100" className="count-up-number-animation">
|
||||
</span>
|
||||
</div>
|
||||
<div className="stat-arrow-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 15 14" fill="none" className="stat-arrow">
|
||||
<path d="M7.40431 13.0625L7.4043 2" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
<path d="M13.8141 8.40703L7.40703 2L1 8.40703" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="display-2">Active users monthly</div>
|
||||
</div>
|
||||
<div data-w-id="105a60b4-53cb-8544-7470-f8b8a08cf541">
|
||||
<div className="stat-wrapper center-mbl">
|
||||
<div className="stat-text">
|
||||
<span data-count="92" className="count-up-number-animation">
|
||||
</span>
|
||||
</div>
|
||||
<div className="stat-arrow-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 15 14" fill="none" className="stat-arrow">
|
||||
<path d="M7.40431 13.0625L7.4043 2" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
<path d="M13.8141 8.40703L7.40703 2L1 8.40703" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="display-2">Average model accuracy</div>
|
||||
</div>
|
||||
<div data-w-id="f23f0a63-0eea-7057-9e20-4a5e2141195a">
|
||||
<div className="stat-wrapper center-mbl">
|
||||
<div className="stat-text">
|
||||
<span data-count="89" className="count-up-number-animation">
|
||||
</span>
|
||||
</div>
|
||||
<div className="stat-arrow-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 15 14" fill="none" className="stat-arrow">
|
||||
<path d="M7.40431 13.0625L7.4043 2" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
<path d="M13.8141 8.40703L7.40703 2L1 8.40703" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="display-2">Productivity increase</div>
|
||||
</div>
|
||||
<div data-w-id="b7c967bb-e96e-8b72-b3b0-4b73512ef3ec">
|
||||
<div className="stat-wrapper center-mbl">
|
||||
<div className="stat-text">
|
||||
<span data-count="80" className="count-up-number-animation">
|
||||
</span>
|
||||
</div>
|
||||
<div className="stat-arrow-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 15 14" fill="none" className="stat-arrow">
|
||||
<path d="M7.40431 13.0625L7.4043 2" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
<path d="M13.8141 8.40703L7.40703 2L1 8.40703" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="display-2">Team members behind</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function MissionSection() {
|
||||
return (
|
||||
<section className="section-small bg-neutral overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="inner-container _1068px center">
|
||||
<div className="position-relative---z-index-1">
|
||||
<div data-w-id="384ef9a0-4895-c961-61d5-c03fea5bc587" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
|
||||
<div className="inner-container _460px">
|
||||
<div className="subtitle">
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
The values behind our platform </h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla. </p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="#more-positions" className="tertiary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
More positions</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-w-id="ff387e65-d5fd-6c3f-9251-5bd1999b387a" style={{"opacity": "0", "filter": "blur(8px)"}} className="container-large">
|
||||
<div className="corner-gradient-container">
|
||||
<div className="border-wrapper">
|
||||
<div className="w-layout-grid values-grid">
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598eeb838c974f3def70a_accuracy-icon-quantum-webflow-template-1.svg" width={64} height={64} alt="Accuracy Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Transparency</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598f0e3caa08df665212f_trust-icon-quantum-webflow-template.svg" width={64} height={64} alt="Trust Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">
|
||||
</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598f1f8443cbbcf767239_intellect-icon-quantum-webflow-template.svg" width={64} height={64} alt="Intellect Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Innovation</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598f00141b9ac31a01989_velocity-icon-quantum-webflow-template.svg" width={64} height={64} alt="Velocity Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">
|
||||
</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598eefda8dc1927236eb3_clarity-icon-quantum-webflow-template.svg" width={64} height={64} alt="Clarify Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Safety</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598f04600b3080cab823c_scalability-icon-quantum-webflow-template.svg" width={64} height={64} alt="Scalability Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Reliability</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598ed8d91f474a2d4ecdc_excellence-icon-quantum-webflow-template.svg" width={64} height={64} alt="Excellence Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Excellence</div>
|
||||
</div>
|
||||
<div className="value-item">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a598ed19f8b3ed79933a38_communication-icon-quantum-webflow-template.svg" width={64} height={64} alt="Communication Icon - Quantum | Webflow Template" data-wf--icon-square--variant="small" className="icon-square w-variant-9e5d53ad-bad6-e5fc-88e0-62e38939214f" />
|
||||
<div className="display-4 medium text-titles">Communication</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,286 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function TeamSection() {
|
||||
return (
|
||||
<section className="section overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="a61686b5-826c-1f8d-dc8d-43cbbec7dcb0" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _650px center">
|
||||
<div className="text-center">
|
||||
<div className="subtitle">Team members</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
Meet our team</h2>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor pharetra. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-w-id="b285eee5-c66b-a051-c7d9-48089305f267" style={{"opacity": "0", "filter": "blur(8px)"}} className="team-members-container">
|
||||
<div className="corner-gradient-container">
|
||||
<div className="border-wrapper">
|
||||
<div className="collection-list-wrapper w-dyn-list">
|
||||
<div role="list" className="team-members-grid w-dyn-items">
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="w-layout-grid team-member-item">
|
||||
<Link href="/team-members/john-carter-wy738" className="avatar-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e5ff7b59be67bb3ac207_john-carter-avatar-quantum-webflow-template.jpg" alt="John Carter" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727.4140625px, 939.9375px" className="avatar-image fit-cover" fill style={{ objectFit: "cover" }} />
|
||||
</Link>
|
||||
<div className="team-member-item-content">
|
||||
<div className="team-member-heading">
|
||||
<Link href="/team-members/john-carter-wy738" className="heading-link w-inline-block">
|
||||
<h3 className="display-5">John Carter</h3>
|
||||
</Link>
|
||||
<div className="team-member-job-title">
|
||||
<div className="subtitle">CEO & Founder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur diam leo interdum nibh ut at libero elit pharetra in eget. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team-member-buttons-wrapper">
|
||||
<div>
|
||||
<a href="https://x.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 19 18" fill="none" className="social-media-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://linkedin.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="social-media-icon">
|
||||
<path d="M1 2.99134C1 2.41413 1.20271 1.93794 1.60811 1.56277C2.01351 1.18758 2.54055 1 3.18919 1C3.82626 1 4.34169 1.18469 4.73552 1.55411C5.14092 1.93506 5.34363 2.43145 5.34363 3.04329C5.34363 3.5974 5.14672 4.05915 4.7529 4.42857C4.3475 4.80952 3.81467 5 3.15444 5H3.13707C2.49999 5 1.98456 4.80952 1.59073 4.42857C1.19691 4.04762 1 3.56854 1 2.99134ZM1.22587 18.1429V6.57576H5.08301V18.1429H1.22587ZM7.22008 18.1429H11.0772V11.684C11.0772 11.2799 11.1236 10.9682 11.2162 10.7489C11.3784 10.3564 11.6245 10.0245 11.9546 9.75324C12.2847 9.48195 12.6988 9.34632 13.1969 9.34632C14.4942 9.34632 15.1429 10.2179 15.1429 11.961V18.1429H19V11.5108C19 9.8023 18.5946 8.50649 17.7838 7.62337C16.973 6.74026 15.9015 6.2987 14.5695 6.2987C13.0753 6.2987 11.9112 6.93939 11.0772 8.22078V8.25541H11.0598L11.0772 8.22078V6.57576H7.22008C7.24324 6.94516 7.25483 8.09378 7.25483 10.0216C7.25483 11.9495 7.24324 14.6565 7.22008 18.1429Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="w-layout-grid team-member-item">
|
||||
<Link href="/team-members/sophie-moore" className="avatar-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e5d29b2f76acd088f052_sophie-moore-avatar-quantum-webflow-template.jpg" alt="Sophie Moore" className="avatar-image fit-cover" fill style={{ objectFit: "cover" }} />
|
||||
</Link>
|
||||
<div className="team-member-item-content">
|
||||
<div className="team-member-heading">
|
||||
<Link href="/team-members/sophie-moore" className="heading-link w-inline-block">
|
||||
<h3 className="display-5">Sophie Moore</h3>
|
||||
</Link>
|
||||
<div className="team-member-job-title">
|
||||
<div className="subtitle">
|
||||
Director of Operations</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur diam leo interdum nibh ut at libero elit pharetra in eget. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team-member-buttons-wrapper">
|
||||
<div>
|
||||
<a href="https://x.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 19 18" fill="none" className="social-media-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://linkedin.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="social-media-icon">
|
||||
<path d="M1 2.99134C1 2.41413 1.20271 1.93794 1.60811 1.56277C2.01351 1.18758 2.54055 1 3.18919 1C3.82626 1 4.34169 1.18469 4.73552 1.55411C5.14092 1.93506 5.34363 2.43145 5.34363 3.04329C5.34363 3.5974 5.14672 4.05915 4.7529 4.42857C4.3475 4.80952 3.81467 5 3.15444 5H3.13707C2.49999 5 1.98456 4.80952 1.59073 4.42857C1.19691 4.04762 1 3.56854 1 2.99134ZM1.22587 18.1429V6.57576H5.08301V18.1429H1.22587ZM7.22008 18.1429H11.0772V11.684C11.0772 11.2799 11.1236 10.9682 11.2162 10.7489C11.3784 10.3564 11.6245 10.0245 11.9546 9.75324C12.2847 9.48195 12.6988 9.34632 13.1969 9.34632C14.4942 9.34632 15.1429 10.2179 15.1429 11.961V18.1429H19V11.5108C19 9.8023 18.5946 8.50649 17.7838 7.62337C16.973 6.74026 15.9015 6.2987 14.5695 6.2987C13.0753 6.2987 11.9112 6.93939 11.0772 8.22078V8.25541H11.0598L11.0772 8.22078V6.57576H7.22008C7.24324 6.94516 7.25483 8.09378 7.25483 10.0216C7.25483 11.9495 7.24324 14.6565 7.22008 18.1429Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="w-layout-grid team-member-item">
|
||||
<Link href="/team-members/lilly-woods" className="avatar-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e5b658f5ca9f60fd5e16_lilly-woods-avatar-quantum-webflow-template.jpg" alt="Lilly Woods" className="avatar-image fit-cover" fill style={{ objectFit: "cover" }} />
|
||||
</Link>
|
||||
<div className="team-member-item-content">
|
||||
<div className="team-member-heading">
|
||||
<Link href="/team-members/lilly-woods" className="heading-link w-inline-block">
|
||||
<h3 className="display-5">Lilly Woods</h3>
|
||||
</Link>
|
||||
<div className="team-member-job-title">
|
||||
<div className="subtitle">Lead UX Designer</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur diam leo interdum nibh ut at libero elit pharetra in eget. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team-member-buttons-wrapper">
|
||||
<div>
|
||||
<a href="https://x.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 19 18" fill="none" className="social-media-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://linkedin.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="social-media-icon">
|
||||
<path d="M1 2.99134C1 2.41413 1.20271 1.93794 1.60811 1.56277C2.01351 1.18758 2.54055 1 3.18919 1C3.82626 1 4.34169 1.18469 4.73552 1.55411C5.14092 1.93506 5.34363 2.43145 5.34363 3.04329C5.34363 3.5974 5.14672 4.05915 4.7529 4.42857C4.3475 4.80952 3.81467 5 3.15444 5H3.13707C2.49999 5 1.98456 4.80952 1.59073 4.42857C1.19691 4.04762 1 3.56854 1 2.99134ZM1.22587 18.1429V6.57576H5.08301V18.1429H1.22587ZM7.22008 18.1429H11.0772V11.684C11.0772 11.2799 11.1236 10.9682 11.2162 10.7489C11.3784 10.3564 11.6245 10.0245 11.9546 9.75324C12.2847 9.48195 12.6988 9.34632 13.1969 9.34632C14.4942 9.34632 15.1429 10.2179 15.1429 11.961V18.1429H19V11.5108C19 9.8023 18.5946 8.50649 17.7838 7.62337C16.973 6.74026 15.9015 6.2987 14.5695 6.2987C13.0753 6.2987 11.9112 6.93939 11.0772 8.22078V8.25541H11.0598L11.0772 8.22078V6.57576H7.22008C7.24324 6.94516 7.25483 8.09378 7.25483 10.0216C7.25483 11.9495 7.24324 14.6565 7.22008 18.1429Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="w-layout-grid team-member-item">
|
||||
<Link href="/team-members/matt-cannon" className="avatar-link w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e5268e58fa10010ce586_matt-cannon-avatar-quantum-webflow-template.jpg" alt="Matt Cannon" sizes="(max-width: 767px) 100vw, (max-width: 991px) 727.4140625px, 939.9375px" className="avatar-image fit-cover" fill style={{ objectFit: "cover" }} />
|
||||
</Link>
|
||||
<div className="team-member-item-content">
|
||||
<div className="team-member-heading">
|
||||
<Link href="/team-members/matt-cannon" className="heading-link w-inline-block">
|
||||
<h3 className="display-5">Matt Cannon</h3>
|
||||
</Link>
|
||||
<div className="team-member-job-title">
|
||||
<div className="subtitle">
|
||||
VP of engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur diam leo interdum nibh ut at libero elit pharetra in eget. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team-member-buttons-wrapper">
|
||||
<div>
|
||||
<a href="https://x.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 19 18" fill="none" className="social-media-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M7.04543 9.42969L0.0390625 0.25H5.98663L10.1792 5.74312L14.8487 0.25H17.7333L11.5439 7.53115L18.9618 17.25H13.0143L8.41014 11.2177L3.28238 17.25H0.397729L7.04543 9.42969ZM13.8802 15.4998L3.57671 2.00024H5.12071L15.4242 15.4998H13.8802Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://linkedin.com" className="social-square-icon-link w-variant-09232bd2-04da-efea-f377-662291aed853 w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="social-square-icon">
|
||||
<div className="social-square-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="social-media-icon">
|
||||
<path d="M1 2.99134C1 2.41413 1.20271 1.93794 1.60811 1.56277C2.01351 1.18758 2.54055 1 3.18919 1C3.82626 1 4.34169 1.18469 4.73552 1.55411C5.14092 1.93506 5.34363 2.43145 5.34363 3.04329C5.34363 3.5974 5.14672 4.05915 4.7529 4.42857C4.3475 4.80952 3.81467 5 3.15444 5H3.13707C2.49999 5 1.98456 4.80952 1.59073 4.42857C1.19691 4.04762 1 3.56854 1 2.99134ZM1.22587 18.1429V6.57576H5.08301V18.1429H1.22587ZM7.22008 18.1429H11.0772V11.684C11.0772 11.2799 11.1236 10.9682 11.2162 10.7489C11.3784 10.3564 11.6245 10.0245 11.9546 9.75324C12.2847 9.48195 12.6988 9.34632 13.1969 9.34632C14.4942 9.34632 15.1429 10.2179 15.1429 11.961V18.1429H19V11.5108C19 9.8023 18.5946 8.50649 17.7838 7.62337C16.973 6.74026 15.9015 6.2987 14.5695 6.2987C13.0753 6.2987 11.9112 6.93939 11.0772 8.22078V8.25541H11.0598L11.0772 8.22078V6.57576H7.22008C7.24324 6.94516 7.25483 8.09378 7.25483 10.0216C7.25483 11.9495 7.24324 14.6565 7.22008 18.1429Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-square-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="4195d06f-0501-ccc7-1fa5-38438a921812" style={{"opacity": "0", "filter": "blur(8px)"}} className="buttons-row">
|
||||
<Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/careers" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
Join our team</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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import Link from "next/link"
|
||||
|
||||
export default function ValuesSection() {
|
||||
return (
|
||||
<section id="more-positions" className="section pd-top-0 overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="inner-container _1068px center">
|
||||
<div data-w-id="5c1fa9c3-1e74-faeb-fdc1-94202ec40445" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
|
||||
<div className="inner-container _460px">
|
||||
<h2>More positions</h2>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla. </p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/careers" className="tertiary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
See all positions</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-w-id="21838807-4067-5a92-54da-582050a56a5c" style={{"opacity": "0", "filter": "blur(8px)"}} className="container-large">
|
||||
<div className="corner-gradient-container">
|
||||
<div className="box-wrapper">
|
||||
<div className="border-wrapper">
|
||||
<div className="box-grid">
|
||||
<div className="box-heading-wrapper">
|
||||
<h3 className="display-4">Research</h3>
|
||||
</div>
|
||||
<div className="w-dyn-list">
|
||||
<div role="list" className="careers-grid w-dyn-items">
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<Link href="/careers/ai-research-scientist" className="career-item w-inline-block">
|
||||
<div>
|
||||
<h3 className="display-4">AI Research Scientist</h3>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="career-item-details">
|
||||
<div className="item-details">New York, NY</div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">Full time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
<div className="career-item-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<Link href="/careers/machine-learning-engineer" className="career-item w-inline-block">
|
||||
<div>
|
||||
<h3 className="display-4">Machine Learning Engineer</h3>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="career-item-details">
|
||||
<div className="item-details">Los Angeles, CA</div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">Full time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
<div className="career-item-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="box-divider">
|
||||
<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="border-wrapper">
|
||||
<div className="box-grid">
|
||||
<div className="box-heading-wrapper">
|
||||
<h3 className="display-4">Engineering</h3>
|
||||
</div>
|
||||
<div className="w-dyn-list">
|
||||
<div role="list" className="careers-grid w-dyn-items">
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<Link href="/careers/ai-infrastructure-engineer" className="career-item w-inline-block">
|
||||
<div>
|
||||
<h3 className="display-4">AI Infrastructure Engineer</h3>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="career-item-details">
|
||||
<div className="item-details">
|
||||
</div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">Full time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
<div className="career-item-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<Link href="/careers/mlops-engineer" className="career-item w-inline-block">
|
||||
<div>
|
||||
<h3 className="display-4">
|
||||
Engineer </h3>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="career-item-details">
|
||||
<div className="item-details">
|
||||
</div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">Full time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
<div className="career-item-bg">
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-vertical w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export { default as CareersSection } from "./CareersSection"
|
||||
export { default as HeroSection } from "./HeroSection"
|
||||
export { default as MissionSection } from "./MissionSection"
|
||||
export { default as SocialLinksSection } from "./SocialLinksSection"
|
||||
export { default as TeamSection } from "./TeamSection"
|
||||
export { default as ValuesSection } from "./ValuesSection"
|
||||
@@ -0,0 +1,52 @@
|
||||
import NewsletterForm from "@/components/NewsletterForm"
|
||||
|
||||
export default function CtaSection() {
|
||||
return (
|
||||
<section className="cta-section v4">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="43e48b1f-85e7-b846-9296-3a85fcb30cd3" className="cta-v4-content-wrapper">
|
||||
<div className="cta-v4-content-top">
|
||||
<div className="subtitle dark-mode">Newsletter</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2 className="text-titles-dm">
|
||||
Subscribe for cutting-edge AI updates </h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p className="text-paragraph-dm">
|
||||
ipsum dolor sit amet consectetur at amet felis nulla molestie non viverra diam sed augue gravida ante risus pulvinar diam turpis ut bibendum ut velit felis at nisl lectus. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="corner-gradient-container">
|
||||
<div className="cta-v4-content-bottom">
|
||||
<div className="cta-v4-form-wrapper">
|
||||
<NewsletterForm variant="dark" />
|
||||
<div className="corner-gradient-wrapper hidden-on-tablet">
|
||||
<div className="corner-gradient-vertical small---dark-mode top-left">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="check-item-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 16" fill="none" className="squared-icon text-titles-dm">
|
||||
<path d="M3.62891 8.00429L6.87307 11.2485L13.3711 4.75" stroke="currentColor" strokeWidth="1.5">
|
||||
</path>
|
||||
</svg>
|
||||
<div className="text-color-neutral-500">
|
||||
One email per month — No spam! </div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="corner-gradient-wrapper hidden-on-tablet">
|
||||
<div className="corner-gradient-horizontal small---dark-mode bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal small---dark-mode bottom-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal small---dark-mode top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal small---dark-mode top-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { BLOG_POSTS, BLOG_CATEGORIES } from "@/lib/blog-data"
|
||||
import BlogCard from "@/components/BlogCard"
|
||||
|
||||
export default function PostsGridSection() {
|
||||
const [activeCategory, setActiveCategory] = useState("All")
|
||||
|
||||
const filtered = activeCategory === "All"
|
||||
? BLOG_POSTS
|
||||
: BLOG_POSTS.filter((p) => p.category === activeCategory)
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="41a231e8-d013-bd0a-0639-c179719a51f6" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right align-center">
|
||||
<h2>All articles</h2>
|
||||
<div className="category-list-wrapper">
|
||||
<div role="list" className="category-list">
|
||||
{BLOG_CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
className={`category-link${activeCategory === cat ? " w--current" : ""}`}
|
||||
onClick={() => setActiveCategory(cat)}
|
||||
type="button"
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="e99a5296-8389-ce52-d99c-66f9d94e1815" style={{ opacity: "0", filter: "blur(8px)" }} className="w-dyn-list">
|
||||
<div role="list" className="blog-v1-grid w-dyn-items">
|
||||
{filtered.map((post) => (
|
||||
<BlogCard key={post.slug} post={post} variant="grid" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as CtaSection } from "./CtaSection"
|
||||
export { default as HeroSection } from "./HeroSection"
|
||||
export { default as PostsGridSection } from "./PostsGridSection"
|
||||
@@ -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"
|
||||
@@ -0,0 +1,147 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function BlogPreviewSection() {
|
||||
return (
|
||||
<section className="section overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="b227046f-7b8d-96be-04ed-4ad8f3500f81" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
|
||||
<div className="inner-container _480px">
|
||||
<div className="subtitle">
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
Our latest news & articles </h2>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla. </p>
|
||||
</div>
|
||||
</div>
|
||||
<Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/blog" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
See all articles</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 className="mg-top-regular">
|
||||
<div data-w-id="f1b0018b-51d6-aaa6-2d43-c2ee184868a3" style={{"opacity": "0", "filter": "blur(8px)"}} className="w-dyn-list">
|
||||
<div role="list" className="w-dyn-items">
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="blog-featured-v1-wrapper">
|
||||
<div className="border-wrapper">
|
||||
<Link href="/blog-posts/ai-powered-predictive-models-and-their-impact-across-industries" className="blog-card-v1 w-inline-block">
|
||||
<div className="blog-v1-image-wrapper">
|
||||
<Image alt="AI-powAI-powered predictive models and their impact across industries" src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e7e2a643b738b2cb06fc_ai-powered-predictive-models-and-their-impact-thumbnail-quantum-webflow-template.png" sizes="(max-width: 767px) 100vw, (max-width: 991px) 95vw, 939.96533203125px" className="image" fill style={{ objectFit: "cover" }} />
|
||||
</div>
|
||||
<div className="blog-v1-content">
|
||||
<div className="inner-container _420px">
|
||||
<h3 className="display-6">AI-powered predictive models and their impact across industries </h3>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p className="text-paragraph">
|
||||
ipsum dolor sit amet consectetur sit mi lacus quis vitae sed pellentesque libero ultricies neque. </p>
|
||||
</div>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="blog-details-wrapper">
|
||||
<div className="item-details">
|
||||
, 2025 </div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">
|
||||
</div>
|
||||
</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 className="icon-button-bg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div role="listitem" className="flex-item w-dyn-item">
|
||||
<div className="blog-featured-v1-wrapper">
|
||||
<div className="border-wrapper">
|
||||
<Link href="/blog-posts/how-ai-is-shaping-the-future-of-healthcare-and-medicine" className="blog-card-v1 w-inline-block">
|
||||
<div className="blog-v1-image-wrapper">
|
||||
<Image alt="How AI How AI is shaping the future of healthcare and medicine" src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3b39/68a6e7c24025d4081cbfa426_how-ai-is-shaping-the-future-thumbnail-quantum-webflow-template.png" sizes="(max-width: 767px) 100vw, (max-width: 991px) 95vw, 939.96533203125px" className="image" fill style={{ objectFit: "cover" }} />
|
||||
</div>
|
||||
<div className="blog-v1-content">
|
||||
<div className="inner-container _420px">
|
||||
<h3 className="display-6">How AI is shaping the future of healthcare and medicine </h3>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p className="text-paragraph">
|
||||
ipsum dolor sit amet consectetur sit mi lacus quis vitae sed pellentesque libero ultricies neque. </p>
|
||||
</div>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<div className="blog-details-wrapper">
|
||||
<div className="item-details">
|
||||
, 2025 </div>
|
||||
<div className="item-details-divider">
|
||||
</div>
|
||||
<div className="item-details">
|
||||
Applications</div>
|
||||
</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 className="icon-button-bg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import LottiePlayer from "@/components/LottiePlayer"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function CtaSection() {
|
||||
return (
|
||||
<section className="cta-section v1">
|
||||
<div className="w-layout-blockcontainer container-default position-relative---z-index-1 w-container">
|
||||
<div className="inner-container _430px">
|
||||
<div className="subtitle">Get in touch</div>
|
||||
<div className="mg-top-3x-extra-small">
|
||||
<h2 className="text-titles-dm">
|
||||
Join our team that is shaping the next era of intelligence </h2>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p className="text-paragraph-dm">
|
||||
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor pharetra mauris a maecenas habitant est mattis. </p>
|
||||
</div>
|
||||
<div className="mg-top-2x-extra-small">
|
||||
<div className="buttons-row left">
|
||||
<Link id="w-node-_83c75c2f-9f22-4125-8dc1-2c204e7d3592-4e7d3592" href="/careers" className="secondary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
Join our team</div>
|
||||
<div className="button-icon-wrapper secondary">
|
||||
<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 bg-neutral-800">
|
||||
</div>
|
||||
<div className="button-icon-bg-inside bg-neutral-600">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1df78b3b45295434b5c6a_cta-animation-waterfall.json" className="cta-image" loop autoplay />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,356 @@
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function IntegrationsSection() {
|
||||
return (
|
||||
<section className="section-small bg-neutral overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div data-w-id="ee652702-222a-0ca5-2508-17b1a107582a" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
|
||||
<div className="inner-container _400px _100-tablet">
|
||||
<div className="subtitle">Integrations</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h2>
|
||||
AI engineered to integrate across every platform </h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inner-container _400px _100-tablet">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur scelerisque quam dui dictumst suspendisse iaculis ac gravida venenatis mattis sed. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="f6559b35-9557-2504-f076-3a36fa5775a3" style={{"opacity": "0", "filter": "blur(8px)"}} className="integrations-marquee-wrapper marquee-hover-stop" {...{"tr-marquee-speed":"50","tr-marquee-element":"component","tr-marquee-scrolldirection":"true","tr-marquee-scrollscrub":"false"}}>
|
||||
<div className="integrations-marquee marquee-scroll-item">
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd871d459c0979566_integration-icon-01-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf5972224012a489b_integration-icon-02-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c26ffe1a8726e9533_integration-icon-03-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf394ef82f934055b_integration-icon-04-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c880d199c46c914ff_integration-icon-05-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70c337055b4648809b_integration-icon-06-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70e3d7d6153e132c82_integration-icon-07-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70d20bb145ee19163a_integration-icon-08-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e0bb9fa69c599d6b3_integration-icon-10-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70a151641726e87b52_integration-icon-11-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e925ff15bf5fa0586_integration-icon-12-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6de0050ea1d7414790_integration-icon-13-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd711092b9d58a062_integration-icon-14-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6d09ed29d4a9cfd6ed_integration-icon-15-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68ee6c592c38ae8672ba037d_integration-icon-16-quantum-webflow-template 1.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="integrations-marquee marquee-scroll-item">
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd871d459c0979566_integration-icon-01-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf5972224012a489b_integration-icon-02-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c26ffe1a8726e9533_integration-icon-03-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf394ef82f934055b_integration-icon-04-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c880d199c46c914ff_integration-icon-05-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70c337055b4648809b_integration-icon-06-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70e3d7d6153e132c82_integration-icon-07-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70d20bb145ee19163a_integration-icon-08-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e0bb9fa69c599d6b3_integration-icon-10-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70a151641726e87b52_integration-icon-11-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e925ff15bf5fa0586_integration-icon-12-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6de0050ea1d7414790_integration-icon-13-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd711092b9d58a062_integration-icon-14-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6d09ed29d4a9cfd6ed_integration-icon-15-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68ee6c592c38ae8672ba037d_integration-icon-16-quantum-webflow-template 1.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="integrations-marquee marquee-scroll-item">
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd871d459c0979566_integration-icon-01-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf5972224012a489b_integration-icon-02-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c26ffe1a8726e9533_integration-icon-03-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf394ef82f934055b_integration-icon-04-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c880d199c46c914ff_integration-icon-05-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70c337055b4648809b_integration-icon-06-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70e3d7d6153e132c82_integration-icon-07-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70d20bb145ee19163a_integration-icon-08-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e0bb9fa69c599d6b3_integration-icon-10-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70a151641726e87b52_integration-icon-11-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e925ff15bf5fa0586_integration-icon-12-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6de0050ea1d7414790_integration-icon-13-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd711092b9d58a062_integration-icon-14-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6d09ed29d4a9cfd6ed_integration-icon-15-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68ee6c592c38ae8672ba037d_integration-icon-16-quantum-webflow-template 1.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="integrations-marquee marquee-scroll-item">
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd871d459c0979566_integration-icon-01-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf5972224012a489b_integration-icon-02-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c26ffe1a8726e9533_integration-icon-03-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6cf394ef82f934055b_integration-icon-04-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6c880d199c46c914ff_integration-icon-05-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70c337055b4648809b_integration-icon-06-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70e3d7d6153e132c82_integration-icon-07-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70d20bb145ee19163a_integration-icon-08-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e0bb9fa69c599d6b3_integration-icon-10-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b70a151641726e87b52_integration-icon-11-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6e925ff15bf5fa0586_integration-icon-12-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6de0050ea1d7414790_integration-icon-13-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6dd711092b9d58a062_integration-icon-14-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68cd8b6d09ed29d4a9cfd6ed_integration-icon-15-quantum-webflow-template.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" className="integration-marquee-item w-inline-block">
|
||||
<Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68ee6c592c38ae8672ba037d_integration-icon-16-quantum-webflow-template 1.svg" width={94} height={94} alt="Integration Icon - Quantum | Webflow Template" style={{"filter": "invert(0%)"}} className="integration-marquee-item-image" />
|
||||
<div style={{"width": "0%", "height": "100%"}} className="integration-marquee-item-bg">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div data-w-id="c8f34226-476e-bf6e-d16d-132f8960d38b" style={{"opacity": "0", "filter": "blur(8px)"}} className="buttons-row">
|
||||
<Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/contact" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>
|
||||
See all Apps</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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as BlogPreviewSection } from "./BlogPreviewSection"
|
||||
export { default as CtaSection } from "./CtaSection"
|
||||
export { default as HeroSection } from "./HeroSection"
|
||||
export { default as IntegrationsSection } from "./IntegrationsSection"
|
||||
export { default as PrinciplesSection } from "./PrinciplesSection"
|
||||
Reference in New Issue
Block a user