tenext redesign

app/careers/page.tsx

@@ -0,0 +1,67 @@
+import { Navbar } from "@/components/sections/Navbar";
+import { PageTitleBanner } from "@/components/shared/PageTitleBanner";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { RevealOnView } from "@/components/shared/RevealOnView";
+import { tenextButton as TenextButton } from "@/components/shared/Button";
+import { PreFooterCTA } from "@/components/shared/PreFooterCTA";
+import { openRoles } from "@/data/site-pages";
+
+export const metadata = {
+  title: "Careers",
+  description:
+    "Build the digital backbone for enterprises. Explore open roles at Tenext Technologies in Coimbatore.",
+};
+
+export default function CareersPage() {
+  return (
+    <>
+      <Navbar />
+      <main className="bg-white">
+        <PageTitleBanner
+          title="Careers"
+          breadcrumbs={[{ label: "Home", href: "/" }, { label: "Careers" }]}
+        />
+        <SectionContainer paddingY="lg" className="px-[20px]">
+          <PageContainer>
+            <SectionHeading
+              tag="[ join us ]"
+              title="Build the digital backbone for enterprises"
+              description="We are engineers, designers, and problem-solvers who care about outcomes. These are the disciplines we hire for — introduce yourself and we will be in touch when a role opens."
+              titleClassName="text-tenext-dark max-w-[720px]"
+              descriptionClassName="max-w-[620px]"
+              className="mb-[50px]"
+            />
+
+            <div className="flex flex-col gap-[16px]">
+              {openRoles.map((role, index) => (
+                <RevealOnView key={role.id} delay={index * 70}>
+                  <div className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[30px_40px] transition-transform duration-300 hover:-translate-y-1 md:flex-row md:items-center md:justify-between">
+                    <div>
+                      <h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
+                        {role.title}
+                      </h3>
+                      <p className="mt-[6px] text-[15px] text-tenext-text-muted">
+                        {role.location} · {role.type}
+                      </p>
+                    </div>
+                    <TenextButton
+                      href="/contacts"
+                      variant="gradient-border"
+                      className="shrink-0 rounded-[25px] px-[30px] py-[14px] text-[15px] font-medium"
+                      showArrow={true}
+                    >
+                      Get in touch
+                    </TenextButton>
+                  </div>
+                </RevealOnView>
+              ))}
+            </div>
+          </PageContainer>
+        </SectionContainer>
+        <PreFooterCTA />
+      </main>
+    </>
+  );
+}