tenext redesign

components/shared/AnchoredCardGrid.tsx

@@ -0,0 +1,64 @@
+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 { CardItem } from "@/data/site-pages";
+
+interface AnchoredCardGridProps {
+  tag?: string;
+  title: string;
+  description?: string;
+  items: CardItem[];
+  /** Number of columns at lg breakpoint */
+  columns?: 2 | 3;
+}
+
+/**
+ * AnchoredCardGrid — data-driven grid of bordered cards.
+ *
+ * Each card carries an `id` so navbar hash links (e.g. /solutions#devops)
+ * scroll to it. Shared by the Solutions and Industries pages; composes the
+ * existing SectionContainer / PageContainer / SectionHeading primitives.
+ */
+export function AnchoredCardGrid({
+  tag,
+  title,
+  description,
+  items,
+  columns = 3,
+}: AnchoredCardGridProps) {
+  const colClass = columns === 2 ? "md:grid-cols-2" : "md:grid-cols-2 lg:grid-cols-3";
+
+  return (
+    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
+      <PageContainer>
+        <SectionHeading
+          tag={tag}
+          title={title}
+          description={description}
+          titleClassName="text-tenext-dark max-w-[720px]"
+          descriptionClassName="max-w-[620px]"
+          className="mb-[50px]"
+        />
+
+        <div className={`grid grid-cols-1 gap-[20px] ${colClass}`}>
+          {items.map((item, index) => (
+            <RevealOnView key={item.id} delay={index * 90}>
+              <div
+                id={item.id}
+                className="flex h-full scroll-mt-[120px] flex-col gap-[15px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2"
+              >
+                <h3 className="font-[var(--font-sora)] text-[22px] font-bold leading-[1.3] text-tenext-dark">
+                  {item.title}
+                </h3>
+                <p className="text-[16px] leading-[1.7] text-tenext-text-muted">
+                  {item.description}
+                </p>
+              </div>
+            </RevealOnView>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}