tenext redesign

2026-08-03 14:42:01 +05:30
parent 1e3f225bed
commit 6625bb9018
78 changed files with 2798 additions and 859 deletions
--- a/components/sections/about/IconCardGrid.tsx
+++ b/components/sections/about/IconCardGrid.tsx
@@ -0,0 +1,85 @@
+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 { Icon } from "@/components/shared/Icon";
+import { IconCard } from "@/data/about";
+
+interface IconCardGridProps {
+  id?: string;
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  items: IconCard[];
+  columns?: 2 | 3 | 4;
+  theme?: "light" | "surface" | "dark";
+}
+
+const colClass: Record<number, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+/**
+ * IconCardGrid — reusable premium icon-card section for the About page.
+ * Powers Mission/Vision/Values, Why Tenext, Capabilities, Technology
+ * Ecosystem, and Enterprise Trust with a single, consistent card.
+ */
+export function IconCardGrid({
+  id,
+  eyebrow,
+  title,
+  description,
+  items,
+  columns = 3,
+  theme = "light",
+}: IconCardGridProps) {
+  const isDark = theme === "dark";
+  const sectionBg =
+    theme === "dark"
+      ? "bg-tenext-dark"
+      : theme === "surface"
+        ? "bg-tenext-surface-muted"
+        : "bg-white";
+
+  const cardBase = isDark
+    ? "border-white/10 bg-white/[0.03] hover:border-tenext-teal/40"
+    : "border-tenext-card-border bg-white hover:border-tenext-teal/50";
+  const titleColor = isDark ? "text-white" : "text-tenext-dark";
+
+  return (
+    <SectionContainer id={id} paddingY="lg" className={`${sectionBg} px-[20px] scroll-mt-[110px]`}>
+      <PageContainer>
+        <SectionHeading
+          tag={eyebrow}
+          title={title}
+          description={description}
+          titleClassName={`${titleColor} max-w-[760px]`}
+          descriptionClassName={`max-w-[640px] ${isDark ? "text-tenext-text-muted" : ""}`}
+          className="mb-[50px]"
+        />
+
+        <div className={`grid grid-cols-1 gap-[20px] ${colClass[columns]}`}>
+          {items.map((item, index) => (
+            <RevealOnView key={item.title} delay={index * 80}>
+              <div
+                className={`group flex h-full flex-col gap-[16px] rounded-[25px] border p-[35px] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.12)] ${cardBase}`}
+              >
+                <span className="flex h-[54px] w-[54px] items-center justify-center rounded-[15px] bg-tenext-teal/10 text-tenext-teal transition-colors duration-300 group-hover:bg-tenext-teal group-hover:text-tenext-dark">
+                  <Icon name={item.icon} className="h-[26px] w-[26px]" />
+                </span>
+                <h3 className={`font-[var(--font-sora)] text-[20px] font-bold leading-[1.3] ${titleColor}`}>
+                  {item.title}
+                </h3>
+                <p className="text-[15px] leading-[1.7] text-tenext-text-muted">
+                  {item.description}
+                </p>
+              </div>
+            </RevealOnView>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}