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,105 @@
|
||||
import type { Metadata } from "next"
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { CAREERS } from "@/lib/careers-data"
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ slug: string }>
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return CAREERS.map((career) => ({ slug: career.slug }))
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { slug } = await params
|
||||
const career = CAREERS.find((c) => c.slug === slug)
|
||||
if (!career) return { title: "Position Not Found" }
|
||||
return {
|
||||
title: career.title,
|
||||
description: career.description,
|
||||
openGraph: {
|
||||
title: `${career.title} - DalCode Careers`,
|
||||
description: career.description,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default async function CareerDetailPage({ params }: Props) {
|
||||
const { slug } = await params
|
||||
const career = CAREERS.find((c) => c.slug === slug)
|
||||
if (!career) notFound()
|
||||
|
||||
return (
|
||||
<main>
|
||||
<section className="section-small top overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="inner-container _650px center">
|
||||
<div className="text-center">
|
||||
<div className="blog-details-wrapper" style={{ justifyContent: "center" }}>
|
||||
<div className="item-details">{career.department}</div>
|
||||
<div className="item-details-divider">·</div>
|
||||
<div className="item-details">{career.location}</div>
|
||||
<div className="item-details-divider">·</div>
|
||||
<div className="item-details">{career.type}</div>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h1>{career.title}</h1>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>{career.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div className="inner-container _650px center">
|
||||
<div className="blog-post-rich-text w-richtext">
|
||||
<h2>About the role</h2>
|
||||
<p>We are looking for a {career.title} to join our {career.department} team. In this role, you will work alongside world-class engineers and researchers to push the boundaries of what's possible with AI.</p>
|
||||
<h2>Responsibilities</h2>
|
||||
<ul role="list">
|
||||
<li>Collaborate with cross-functional teams to design, develop, and deploy AI solutions</li>
|
||||
<li>Contribute to research and development of novel AI architectures and algorithms</li>
|
||||
<li>Write clean, maintainable, and well-tested code</li>
|
||||
<li>Participate in code reviews and contribute to engineering best practices</li>
|
||||
<li>Stay up-to-date with the latest developments in AI and machine learning</li>
|
||||
</ul>
|
||||
<h2>Requirements</h2>
|
||||
<ul role="list">
|
||||
<li>Strong background in computer science, mathematics, or a related field</li>
|
||||
<li>Experience with modern AI/ML frameworks and tools</li>
|
||||
<li>Excellent problem-solving and communication skills</li>
|
||||
<li>Ability to work independently and as part of a team</li>
|
||||
</ul>
|
||||
<h2>What we offer</h2>
|
||||
<ul role="list">
|
||||
<li>Competitive salary and equity package</li>
|
||||
<li>Comprehensive health, dental, and vision insurance</li>
|
||||
<li>Flexible work arrangements</li>
|
||||
<li>Learning and development budget</li>
|
||||
<li>Regular team events and offsites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div className="inner-container _650px center text-center">
|
||||
<Link href="/careers" className="primary-button w-inline-block">
|
||||
<div className="button-content">
|
||||
<div>Back to all positions</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" />
|
||||
</svg>
|
||||
<div className="button-icon-bg" />
|
||||
<div className="button-icon-bg-inside" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import type { Metadata } from "next"
|
||||
import Link from "next/link"
|
||||
import { CAREERS } from "@/lib/careers-data"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Careers",
|
||||
description: "Join our team and help shape the future of AI. Explore open positions at DalCode.",
|
||||
openGraph: {
|
||||
title: "Careers at DalCode",
|
||||
description: "Join our team and help shape the future of AI.",
|
||||
},
|
||||
}
|
||||
|
||||
export default function CareersPage() {
|
||||
return (
|
||||
<main>
|
||||
<section className="section-small top overflow-hidden">
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="inner-container _650px center">
|
||||
<div className="text-center">
|
||||
<div className="subtitle">Careers</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h1>Join our team</h1>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>We're looking for talented people to help us build the future of AI-powered development tools.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mg-top-regular">
|
||||
<div className="corner-gradient-container">
|
||||
<div className="border-wrapper">
|
||||
<div className="positions-list-wrapper">
|
||||
{CAREERS.map((career) => (
|
||||
<Link key={career.slug} href={`/careers/${career.slug}`} className="position-item w-inline-block">
|
||||
<div className="position-item-content">
|
||||
<div className="position-info">
|
||||
<h3 className="display-4">{career.title}</h3>
|
||||
<div className="position-details">
|
||||
<div className="item-details">{career.department}</div>
|
||||
<div className="item-details-divider">·</div>
|
||||
<div className="item-details">{career.location}</div>
|
||||
<div className="item-details-divider">·</div>
|
||||
<div className="item-details">{career.type}</div>
|
||||
</div>
|
||||
</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" />
|
||||
</svg>
|
||||
<div className="button-icon-bg" />
|
||||
<div className="button-icon-bg-inside" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user