gitea/dalcode-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
95eb362bfc40bef02a9e043dec922f522902ce81
dalcode-website/components/about/TeamSection.tsx
T
Leon-in 95eb362bfc 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>
2026-04-26 18:19:56 +08:00

287 lines
23 KiB
TypeScript
Raw Blame History

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>
)
}
Reference in New Issue View Git Blame Copy Permalink