Leon-in
95eb362bfc
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
249 lines
14 KiB
TypeScript
249 lines
14 KiB
TypeScript
"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>
|
||
)
|
||
}
|