@appcorp/shadcn 1.1.50 → 1.1.52

package/templates/school-v1/sections/hero.js

@@ -0,0 +1,98 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroSection = HeroSection;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("react");
+var link_1 = __importDefault(require("next/link"));
+var framer_motion_1 = require("framer-motion");
+var lucide_react_1 = require("lucide-react");
+var button_1 = require("../../../components/ui/button");
+var statIcons = {
+    award: lucide_react_1.Award,
+    users: lucide_react_1.Users,
+    building: lucide_react_1.Building2,
+    heart: lucide_react_1.Heart,
+};
+var textVariants = {
+    enter: { opacity: 0, y: 40 },
+    center: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -30 },
+};
+var slideVariants = {
+    enter: function (direction) { return ({ x: direction > 0 ? "100%" : "-100%" }); },
+    center: { x: 0 },
+    exit: function (direction) { return ({ x: direction > 0 ? "-100%" : "100%" }); },
+};
+function HeroSection(_a) {
+    var heroSlides = _a.heroSlides, heroStats = _a.heroStats;
+    var _b = (0, react_2.useState)(0), current = _b[0], setCurrent = _b[1];
+    var _c = (0, react_2.useState)(1), direction = _c[0], setDirection = _c[1];
+    var _d = (0, react_2.useState)(false), isPaused = _d[0], setIsPaused = _d[1];
+    var paginate = (0, react_2.useCallback)(function (newDirection) {
+        setDirection(newDirection);
+        setCurrent(function (prev) { return (prev + newDirection + heroSlides.length) % heroSlides.length; });
+    }, []);
+    (0, react_2.useEffect)(function () {
+        if (isPaused)
+            return;
+        var timer = setInterval(function () { return paginate(1); }, 5500);
+        return function () { return clearInterval(timer); };
+    }, [isPaused, paginate]);
+    var slide = heroSlides[current];
+    return (react_1.default.createElement("section", { id: "home", className: "relative overflow-hidden bg-blue-950", style: { height: "75vh", minHeight: "560px" }, onMouseEnter: function () { return setIsPaused(true); }, onMouseLeave: function () { return setIsPaused(false); } },
+        react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false, custom: direction },
+            react_1.default.createElement(framer_motion_1.motion.div, { key: slide.id, custom: direction, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: { duration: 0.85, ease: [0.32, 0.72, 0, 1] }, className: "absolute inset-0 bg-gradient-to-br ".concat(slide.gradient) },
+                react_1.default.createElement("img", { src: slide.imageUrl, alt: "", role: "presentation", className: "absolute inset-0 h-full w-full object-cover opacity-20" }),
+                react_1.default.createElement("div", { className: "absolute inset-0 opacity-60", style: { background: slide.pattern } }),
+                react_1.default.createElement("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(255,255,255,0.06)_0%,transparent_55%)]" }),
+                react_1.default.createElement("div", { className: "absolute top-10 right-10 h-72 w-72 rounded-full bg-white/5 blur-3xl" }),
+                react_1.default.createElement("div", { className: "absolute bottom-10 left-20 h-56 w-56 rounded-full bg-white/5 blur-2xl" }),
+                react_1.default.createElement("div", { className: "absolute top-1/2 right-1/4 h-40 w-40 rounded-full border border-white/10" }),
+                react_1.default.createElement("div", { className: "absolute top-1/3 right-1/3 h-64 w-64 rounded-full border border-white/5" }))),
+        react_1.default.createElement("div", { className: "relative z-10 flex h-full flex-col" },
+            react_1.default.createElement("div", { className: "flex flex-1 items-center" },
+                react_1.default.createElement("div", { className: "container mx-auto px-6 md:px-12" },
+                    react_1.default.createElement("div", { className: "max-w-3xl" },
+                        react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" },
+                            react_1.default.createElement(framer_motion_1.motion.div, { key: slide.id + "-content", initial: "enter", animate: "center", exit: "exit", variants: textVariants, transition: { duration: 0.6 } },
+                                react_1.default.createElement(framer_motion_1.motion.div, { variants: textVariants, transition: { duration: 0.5 }, className: "mb-2" },
+                                    react_1.default.createElement("span", { className: "inline-block rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-sm font-medium text-white backdrop-blur-sm" }, slide.badge)),
+                                react_1.default.createElement(framer_motion_1.motion.h1, { variants: textVariants, transition: { duration: 0.55, delay: 0.1 }, className: "mb-1 text-2xl leading-tight font-extrabold tracking-tight text-white md:text-5xl lg:text-6xl xl:text-7xl" }, slide.headline),
+                                react_1.default.createElement(framer_motion_1.motion.h1, { variants: textVariants, transition: { duration: 0.55, delay: 0.2 }, className: "mb-2 text-2xl leading-tight font-extrabold tracking-tight md:text-5xl lg:text-6xl xl:text-7xl ".concat(slide.accentColor) }, slide.subheadline),
+                                react_1.default.createElement(framer_motion_1.motion.p, { variants: textVariants, transition: { duration: 0.5, delay: 0.3 }, className: "mb-8 max-w-xl text-base leading-relaxed text-white/75 md:text-lg" }, slide.description),
+                                react_1.default.createElement(framer_motion_1.motion.div, { variants: textVariants, transition: { duration: 0.5, delay: 0.4 }, className: "flex flex-wrap gap-4" },
+                                    react_1.default.createElement(button_1.Button, { asChild: true, size: "lg", className: "rounded-full bg-yellow-400 font-semibold text-gray-900 shadow-lg hover:bg-yellow-300" },
+                                        react_1.default.createElement(link_1.default, { href: slide.primaryCta.href }, slide.primaryCta.label)),
+                                    react_1.default.createElement(button_1.Button, { asChild: true, size: "lg", variant: "outline", className: "rounded-full border-white/40 bg-white/10 text-white backdrop-blur-sm hover:bg-white hover:text-gray-900" },
+                                        react_1.default.createElement(link_1.default, { href: slide.secondaryCta.href }, slide.secondaryCta.label)))))))),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "border-t border-white/10 bg-black/20 backdrop-blur-sm", initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.8, delay: 0.6 } },
+                react_1.default.createElement("div", { className: "container mx-auto px-6 py-4 md:px-12" },
+                    react_1.default.createElement("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-4" }, heroStats.map(function (stat, i) {
+                        var Icon = statIcons[stat.icon];
+                        return (react_1.default.createElement(framer_motion_1.motion.div, { key: stat.label, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: 0.7 + i * 0.1 }, className: "flex items-center gap-3" },
+                            react_1.default.createElement("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-yellow-400/20" },
+                                react_1.default.createElement(Icon, { className: "h-5 w-5 text-yellow-400" })),
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("div", { className: "text-lg leading-none font-bold text-white" }, stat.value),
+                                react_1.default.createElement("div", { className: "text-xs text-white/60" }, stat.label))));
+                    }))))),
+        react_1.default.createElement("button", { onClick: function () { return paginate(-1); }, "aria-label": "Previous slide", className: "absolute top-1/2 left-4 z-20 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white backdrop-blur-sm transition hover:bg-white/25" },
+            react_1.default.createElement(lucide_react_1.ChevronLeft, { className: "h-6 w-6" })),
+        react_1.default.createElement("button", { onClick: function () { return paginate(1); }, "aria-label": "Next slide", className: "absolute top-1/2 right-4 z-20 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white backdrop-blur-sm transition hover:bg-white/25" },
+            react_1.default.createElement(lucide_react_1.ChevronRight, { className: "h-6 w-6" })),
+        react_1.default.createElement("div", { className: "absolute bottom-20 left-6 z-20 flex hidden gap-2 md:left-12 md:block" }, heroSlides.map(function (_, i) { return (react_1.default.createElement("button", { key: i, onClick: function () {
+                setDirection(i > current ? 1 : -1);
+                setCurrent(i);
+            }, "aria-label": "Go to slide ".concat(i + 1), className: "h-2 rounded-full transition-all duration-300 ".concat(i === current
+                ? "w-8 bg-yellow-400"
+                : "w-2 bg-white/40 hover:bg-white/70") })); })),
+        react_1.default.createElement("div", { className: "absolute right-6 bottom-24 z-20 hidden rounded-full bg-black/20 px-3 py-1 text-xs text-white/60 backdrop-blur-sm md:block" },
+            String(current + 1).padStart(2, "0"),
+            " /",
+            " ",
+            String(heroSlides.length).padStart(2, "0"))));
+}

package/templates/school-v1/sections/management.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ManagementMember } from "../../../templates/data/school-v1";
+export declare function ManagementSection({ managementTeam, }: {
+    managementTeam: ManagementMember[];
+}): React.JSX.Element;

package/templates/school-v1/sections/management.js

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManagementSection = ManagementSection;
+var react_1 = __importDefault(require("react"));
+var framer_motion_1 = require("framer-motion");
+var image_1 = __importDefault(require("next/image"));
+var badge_1 = require("../../../components/ui/badge");
+var lucide_react_1 = require("lucide-react");
+function ManagementSection(_a) {
+    var managementTeam = _a.managementTeam;
+    return (react_1.default.createElement("section", { id: "management", className: "overflow-hidden bg-white py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-16 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "Leadership"),
+                react_1.default.createElement("h2", { className: "mb-5 text-4xl font-bold text-gray-900 md:text-5xl" },
+                    "The Dedicated Team",
+                    " ",
+                    react_1.default.createElement("span", { className: "text-blue-700" }, "Behind LGGS")),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg leading-relaxed text-gray-500" }, "Our school is guided by a passionate, experienced leadership team committed to maintaining the highest standards of education, care, and institutional integrity.")),
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5" }, managementTeam.map(function (member, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: member.id, className: "group flex flex-col items-center text-center", initial: { opacity: 1, y: 50 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: i * 0.1 }, viewport: { once: true } },
+                react_1.default.createElement(framer_motion_1.motion.div, { className: "relative mb-5 h-24 w-24 rounded-full shadow-lg", whileHover: { scale: 1.08 }, transition: { type: "spring", stiffness: 300 } },
+                    react_1.default.createElement(image_1.default, { src: member.avatar, alt: member.name, fill: true, className: "rounded-full object-cover" })),
+                react_1.default.createElement("h3", { className: "mb-0.5 font-bold text-gray-900" }, member.name),
+                react_1.default.createElement("p", { className: "mb-3 text-xs font-semibold text-blue-700" }, member.title),
+                react_1.default.createElement("span", { className: "mb-3 inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 text-xs text-gray-600" },
+                    react_1.default.createElement(lucide_react_1.GraduationCap, { className: "h-3 w-3" }),
+                    member.qualifications),
+                react_1.default.createElement("p", { className: "line-clamp-4 text-xs leading-relaxed text-gray-500 transition-all duration-300 group-hover:line-clamp-none" }, member.bio))); })))));
+}

package/templates/school-v1/sections/news-events.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function NewsEventsSection(): React.JSX.Element;

package/templates/school-v1/sections/news-events.js

@@ -0,0 +1,60 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsEventsSection = NewsEventsSection;
+var react_1 = __importDefault(require("react"));
+var framer_motion_1 = require("framer-motion");
+var badge_1 = require("../../../components/ui/badge");
+var button_1 = require("../../../components/ui/button");
+var link_1 = __importDefault(require("next/link"));
+var lucide_react_1 = require("lucide-react");
+var school_v1_1 = require("../../../templates/data/school-v1");
+var eventTypeColors = {
+    Academic: "bg-blue-100 text-blue-700",
+    Parents: "bg-purple-100 text-purple-700",
+    Cultural: "bg-amber-100 text-amber-700",
+    Creative: "bg-pink-100 text-pink-700",
+    Sports: "bg-green-100 text-green-700",
+};
+function NewsEventsSection() {
+    return (react_1.default.createElement("section", { id: "news", className: "bg-slate-50 py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-16 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "News & Events"),
+                react_1.default.createElement("h2", { className: "mb-5 text-4xl font-bold text-gray-900 md:text-5xl" },
+                    "Life at ",
+                    react_1.default.createElement("span", { className: "text-blue-700" }, "LGGS")),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg leading-relaxed text-gray-500" }, "Stay connected with our vibrant school community \u2014 from academic achievements and cultural celebrations to upcoming events and competitions.")),
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-8 lg:grid-cols-3" },
+                react_1.default.createElement("div", { className: "space-y-5 lg:col-span-2" },
+                    school_v1_1.newsArticles.map(function (article, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: article.id, className: "group rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg", initial: { opacity: 0, x: -30 }, whileInView: { opacity: 1, x: 0 }, transition: { duration: 0.5, delay: i * 0.08 }, viewport: { once: true } },
+                        react_1.default.createElement("div", { className: "mb-3 flex items-center gap-3" },
+                            react_1.default.createElement(badge_1.Badge, { className: article.categoryColor }, article.category),
+                            react_1.default.createElement("span", { className: "text-xs text-gray-400" }, article.date)),
+                        react_1.default.createElement("h3", { className: "mb-2 text-lg font-bold text-gray-900 transition-colors group-hover:text-blue-700" },
+                            react_1.default.createElement(link_1.default, { href: article.href }, article.title)),
+                        react_1.default.createElement("p", { className: "mb-4 text-sm leading-relaxed text-gray-500" }, article.excerpt),
+                        react_1.default.createElement(link_1.default, { href: article.href, className: "inline-flex items-center gap-1 text-sm font-semibold text-blue-700 transition-colors hover:text-blue-900" },
+                            "Read full story ",
+                            react_1.default.createElement(lucide_react_1.ArrowRight, { className: "h-4 w-4" })))); }),
+                    react_1.default.createElement(button_1.Button, { asChild: true, variant: "outline", className: "border-blue-700 text-blue-700 hover:bg-blue-50" },
+                        react_1.default.createElement(link_1.default, { href: "/blog" }, "View All Stories"))),
+                react_1.default.createElement(framer_motion_1.motion.div, { initial: { opacity: 0, x: 30 }, whileInView: { opacity: 1, x: 0 }, transition: { duration: 0.5, delay: 0.2 }, viewport: { once: true } },
+                    react_1.default.createElement("div", { className: "sticky top-8 rounded-2xl border border-gray-100 bg-white p-6 shadow-sm" },
+                        react_1.default.createElement("h3", { className: "mb-5 text-lg font-bold text-gray-900" }, "Upcoming Events"),
+                        react_1.default.createElement("div", { className: "space-y-4" }, school_v1_1.upcomingEvents.map(function (event, i) {
+                            var _a;
+                            return (react_1.default.createElement(framer_motion_1.motion.div, { key: event.title, className: "flex items-start gap-4 border-b border-gray-100 pb-4 last:border-0 last:pb-0", initial: { opacity: 0 }, whileInView: { opacity: 1 }, transition: { duration: 0.3, delay: i * 0.06 }, viewport: { once: true } },
+                                react_1.default.createElement("div", { className: "flex h-12 w-12 flex-shrink-0 flex-col items-center justify-center rounded-xl bg-blue-700 text-white" },
+                                    react_1.default.createElement("span", { className: "text-sm leading-none font-bold" }, event.date),
+                                    react_1.default.createElement("span", { className: "text-xs opacity-80" }, event.month)),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement("div", { className: "text-sm font-medium text-gray-900" }, event.title),
+                                    react_1.default.createElement("div", { className: "mt-0.5 text-xs text-gray-400" }, event.time),
+                                    react_1.default.createElement(badge_1.Badge, { className: "mt-1.5 text-xs ".concat((_a = eventTypeColors[event.type]) !== null && _a !== void 0 ? _a : "bg-gray-100 text-gray-600") }, event.type))));
+                        })),
+                        react_1.default.createElement(button_1.Button, { className: "mt-5 w-full bg-blue-700 hover:bg-blue-800" }, "Full Events Calendar")))))));
+}

package/templates/school-v1/sections/policies.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UniformSeason, type PolicyCategory } from "../../../templates/data/school-v1";
+type PolicyHighlight = {
+    label: string;
+    value: string;
+    note: string;
+};
+export declare const PoliciesSection: ({ policyCategories, policyHighlights, uniformData, }: {
+    policyCategories: PolicyCategory[];
+    policyHighlights: PolicyHighlight[];
+    uniformData: UniformSeason[];
+}) => React.JSX.Element;
+export {};

package/templates/school-v1/sections/policies.js

@@ -0,0 +1,126 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoliciesSection = void 0;
+var react_1 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var lucide_react_1 = require("lucide-react");
+var badge_1 = require("../../../components/ui/badge");
+var categoryIcons = {
+    "book-open": lucide_react_1.BookOpen,
+    "user-plus": lucide_react_1.UserPlus,
+    "graduation-cap": lucide_react_1.GraduationCap,
+    "credit-card": lucide_react_1.CreditCard,
+    shield: lucide_react_1.Shield,
+    info: lucide_react_1.Info,
+    tag: lucide_react_1.Tag,
+};
+function AccordionItem(_a) {
+    var section = _a.section, colorClass = _a.colorClass, bgClass = _a.bgClass, borderClass = _a.borderClass, bulletBg = _a.bulletBg;
+    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
+    return (react_1.default.createElement("div", { className: "self-start overflow-hidden rounded-xl border ".concat(borderClass, " bg-white") },
+        react_1.default.createElement("button", { className: "flex w-full items-center justify-between gap-4 px-5 py-4 text-left", onClick: function () { return setOpen(function (o) { return !o; }); } },
+            react_1.default.createElement("span", { className: "text-sm font-semibold text-gray-800" }, section.title),
+            react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: open ? 180 : 0 }, transition: { duration: 0.2 } },
+                react_1.default.createElement(lucide_react_1.ChevronDown, { className: "h-4 w-4 flex-shrink-0 ".concat(colorClass) }))),
+        react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false }, open && (react_1.default.createElement(framer_motion_1.motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.25, ease: "easeInOut" } },
+            react_1.default.createElement("div", { className: "border-t ".concat(borderClass, " ").concat(bgClass, " space-y-3 px-5 py-4") }, section.points.map(function (point, i) { return (react_1.default.createElement("div", { key: i, className: "flex gap-3" },
+                react_1.default.createElement(lucide_react_1.CheckCircle, { className: "mt-0.5 h-4 w-4 flex-shrink-0 ".concat(colorClass) }),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", { className: "text-sm leading-relaxed text-gray-700" }, point.text),
+                    point.sub && (react_1.default.createElement("ul", { className: "mt-2 space-y-1" }, point.sub.map(function (s, j) { return (react_1.default.createElement("li", { key: j, className: "flex items-start gap-2" },
+                        react_1.default.createElement("span", { className: "mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full ".concat(bulletBg) }),
+                        react_1.default.createElement("span", { className: "text-sm text-gray-600" }, s))); })))))); })))))));
+}
+function UniformPanel(_a) {
+    var colorClass = _a.colorClass, bgClass = _a.bgClass, borderClass = _a.borderClass, bulletBg = _a.bulletBg, uniformData = _a.uniformData;
+    var _b = (0, react_1.useState)("Summer"), season = _b[0], setSeason = _b[1];
+    var current = uniformData.find(function (u) { return u.season === season; });
+    return (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement("div", { className: "flex w-fit gap-2 rounded-xl border border-gray-100 bg-white p-1" }, ["Summer", "Winter"].map(function (s) { return (react_1.default.createElement("button", { key: s, onClick: function () { return setSeason(s); }, className: "flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ".concat(season === s
+                ? "".concat(bgClass, " ").concat(colorClass, " shadow-sm")
+                : "text-gray-500 hover:text-gray-700") },
+            s === "Summer" ? (react_1.default.createElement(lucide_react_1.Sun, { className: "h-4 w-4" })) : (react_1.default.createElement(lucide_react_1.Snowflake, { className: "h-4 w-4" })),
+            s)); })),
+        react_1.default.createElement("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2" }, current.variants.map(function (variant, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: "".concat(variant.gender, "-").concat(variant.classes), initial: { opacity: 0, y: 12 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.2, delay: i * 0.06 }, className: "rounded-xl border ".concat(borderClass, " bg-white p-4") },
+            react_1.default.createElement("div", { className: "mb-3 flex items-center gap-2" },
+                react_1.default.createElement("span", { className: "rounded-md px-2 py-0.5 text-xs font-bold ".concat(bgClass, " ").concat(colorClass) }, variant.gender),
+                react_1.default.createElement("span", { className: "text-xs text-gray-500" }, variant.classes)),
+            react_1.default.createElement("ul", { className: "space-y-1.5" }, variant.items.map(function (item, j) { return (react_1.default.createElement("li", { key: j, className: "flex items-start gap-2" },
+                react_1.default.createElement("span", { className: "mt-2 h-1.5 w-1.5 flex-shrink-0 rounded-full ".concat(bulletBg) }),
+                react_1.default.createElement("span", { className: "text-sm leading-relaxed text-gray-600" }, item))); })))); })),
+        react_1.default.createElement("p", { className: "rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-xs text-amber-700" }, "Uniforms for both campuses are available at each campus canteen. Playgroup children may come in private clothes.")));
+}
+var PoliciesSection = function (_a) {
+    var policyCategories = _a.policyCategories, policyHighlights = _a.policyHighlights, uniformData = _a.uniformData;
+    var _b = (0, react_1.useState)("overview"), activeTab = _b[0], setActiveTab = _b[1];
+    var active = policyCategories.find(function (c) { return c.id === activeTab; });
+    var ActiveIcon = categoryIcons[active.icon];
+    return (react_1.default.createElement("section", { id: "policies", className: "overflow-hidden bg-gray-50 py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-12 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "School Charter"),
+                react_1.default.createElement("h2", { className: "mb-5 text-4xl font-bold text-gray-900 md:text-5xl" },
+                    "Rules & ",
+                    react_1.default.createElement("span", { className: "text-blue-700" }, "Policies")),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg leading-relaxed text-gray-500" }, "Everything parents and students need to know about how LGGS operates \u2014 presented clearly and concisely.")),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-12 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6", initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6, delay: 0.15 }, viewport: { once: true } }, policyHighlights.map(function (h) { return (react_1.default.createElement("div", { key: h.label, className: "rounded-2xl border border-blue-100 bg-white px-3 py-4 text-center shadow-sm" },
+                react_1.default.createElement("div", { className: "text-2xl font-bold text-blue-700" }, h.value),
+                react_1.default.createElement("div", { className: "mt-0.5 text-xs font-semibold text-gray-800" }, h.label),
+                react_1.default.createElement("div", { className: "mt-0.5 text-xs text-gray-400" }, h.note))); })),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-6 flex flex-wrap gap-2", initial: { opacity: 0, y: 16 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: 0.2 }, viewport: { once: true } }, policyCategories.map(function (cat) {
+                var Icon = categoryIcons[cat.icon];
+                var isActive = cat.id === activeTab;
+                return (react_1.default.createElement("button", { key: cat.id, onClick: function () { return setActiveTab(cat.id); }, className: "flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-all ".concat(isActive
+                        ? "".concat(cat.bgClass, " ").concat(cat.colorClass, " ").concat(cat.borderClass, " shadow-sm")
+                        : "border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:text-gray-700") },
+                    react_1.default.createElement(Icon, { className: "h-4 w-4" }),
+                    cat.label));
+            })),
+            react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" },
+                react_1.default.createElement(framer_motion_1.motion.div, { key: activeTab, initial: { opacity: 0, y: 16 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.25 } },
+                    react_1.default.createElement("div", { className: "mb-6 flex items-center gap-4 rounded-2xl border ".concat(active.borderClass, " ").concat(active.bgClass, " p-5") },
+                        react_1.default.createElement("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border ".concat(active.borderClass, " bg-white") },
+                            react_1.default.createElement(ActiveIcon, { className: "h-6 w-6 ".concat(active.colorClass) })),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("h3", { className: "text-lg font-bold ".concat(active.colorClass) }, active.label),
+                            react_1.default.createElement("p", { className: "text-sm text-gray-500" }, active.description)),
+                        react_1.default.createElement(badge_1.Badge, { className: "ml-auto ".concat(active.badgeClass, " hover:").concat(active.badgeClass) }, activeTab === "uniform"
+                            ? "2 seasons"
+                            : "".concat(active.sections.length, " section").concat(active.sections.length !== 1 ? "s" : ""))),
+                    activeTab === "uniform" ? (react_1.default.createElement(UniformPanel, { colorClass: active.colorClass, bgClass: active.bgClass, borderClass: active.borderClass, bulletBg: active.bulletBg, uniformData: uniformData })) : (react_1.default.createElement("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2" }, active.sections.map(function (section) { return (react_1.default.createElement(AccordionItem, { key: section.id, section: section, colorClass: active.colorClass, bgClass: active.bgClass, borderClass: active.borderClass, bulletBg: active.bulletBg })); }))))))));
+};
+exports.PoliciesSection = PoliciesSection;

package/templates/school-v1/sections/programs.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { Program } from "../../../templates/data/school-v1";
+export declare function ProgramsSection({ programs }: {
+    programs: Program[];
+}): React.JSX.Element;

package/templates/school-v1/sections/programs.js

@@ -0,0 +1,93 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgramsSection = ProgramsSection;
+var react_1 = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var badge_1 = require("../../../components/ui/badge");
+var card_1 = require("../../../components/ui/card");
+var button_1 = require("../../../components/ui/button");
+var link_1 = __importDefault(require("next/link"));
+var lucide_react_1 = require("lucide-react");
+function ProgramsSection(_a) {
+    var programs = _a.programs;
+    var _b = (0, react_1.useState)(0), activeIdx = _b[0], setActiveIdx = _b[1];
+    var active = programs[activeIdx];
+    return (react_1.default.createElement("section", { id: "programs", className: "bg-gray-50 py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-14 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "Our Programs"),
+                react_1.default.createElement("h2", { className: "mb-4 text-4xl font-bold text-gray-900 md:text-5xl" }, "A Complete Educational Journey"),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg text-gray-600" }, "From a child's very first steps into learning all the way to board examinations, LGGS provides nurturing, rigorous, and joyful education at every stage.")),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-10 flex flex-wrap justify-center gap-3", initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: 0.2 }, viewport: { once: true } }, programs.map(function (p, i) { return (react_1.default.createElement("button", { key: p.title, onClick: function () { return setActiveIdx(i); }, className: "rounded-full px-5 py-2.5 text-sm font-medium transition-all ".concat(activeIdx === i
+                    ? "".concat(p.color, " text-white shadow-md")
+                    : "bg-white text-gray-600 shadow-sm hover:bg-gray-100") },
+                p.title,
+                react_1.default.createElement("span", { className: "ml-2 text-xs opacity-75" }, p.ages))); })),
+            react_1.default.createElement(framer_motion_1.AnimatePresence, { mode: "wait" },
+                react_1.default.createElement(framer_motion_1.motion.div, { key: activeIdx, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 }, transition: { duration: 0.4 } },
+                    react_1.default.createElement(card_1.Card, { className: "overflow-hidden border-0 shadow-xl" },
+                        react_1.default.createElement("div", { className: "h-2 w-full ".concat(active.color) }),
+                        react_1.default.createElement(card_1.CardContent, { className: "p-0" },
+                            react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2" },
+                                react_1.default.createElement("div", { className: "p-8 md:p-12 ".concat(active.lightColor) },
+                                    react_1.default.createElement("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full ".concat(active.color, " px-4 py-1.5 text-sm font-semibold text-white") },
+                                        react_1.default.createElement(active.icon, { className: "h-4 w-4" }),
+                                        active.ages),
+                                    react_1.default.createElement("h3", { className: "mb-4 text-2xl font-bold text-gray-900 md:text-3xl" }, active.title),
+                                    react_1.default.createElement("p", { className: "mb-6 leading-relaxed text-gray-700" }, active.description),
+                                    react_1.default.createElement(button_1.Button, { asChild: true, className: "".concat(active.color, " border-0 text-white hover:opacity-90") },
+                                        react_1.default.createElement(link_1.default, { href: "#admissions" },
+                                            "Enroll Now ",
+                                            react_1.default.createElement(lucide_react_1.ArrowRight, { className: "ml-2 h-4 w-4" })))),
+                                react_1.default.createElement("div", { className: "p-8 md:p-12" },
+                                    react_1.default.createElement("h4", { className: "mb-6 text-lg font-semibold text-gray-900" }, "What Your Child Gains"),
+                                    react_1.default.createElement("ul", { className: "space-y-4" }, active.highlights.map(function (hl, i) { return (react_1.default.createElement(framer_motion_1.motion.li, { key: hl, initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, transition: { delay: i * 0.08 }, className: "flex items-start gap-3" },
+                                        react_1.default.createElement("div", { className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ".concat(active.color) },
+                                            react_1.default.createElement(lucide_react_1.Check, { className: "h-3 w-3 text-white" })),
+                                        react_1.default.createElement("span", { className: "text-gray-700" }, hl))); })))))))),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mt-12 grid grid-cols-2 gap-4 md:grid-cols-4", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6, delay: 0.3 }, viewport: { once: true } }, programs.map(function (program, index) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: program.title, whileHover: { y: -6, scale: 1.02 }, transition: { type: "spring", stiffness: 300 }, onClick: function () { return setActiveIdx(index); }, className: "cursor-pointer" },
+                react_1.default.createElement(card_1.Card, { className: "border-2 transition-all ".concat(activeIdx === index ? "border-current ".concat(program.textColor, " shadow-md") : "border-transparent") },
+                    react_1.default.createElement(card_1.CardContent, { className: "flex flex-col items-center gap-3 rounded-lg p-6 text-center ".concat(program.lightColor) },
+                        react_1.default.createElement("div", { className: "flex h-14 w-14 items-center justify-center rounded-2xl ".concat(program.color) },
+                            react_1.default.createElement(program.icon, { className: "h-7 w-7 text-white" })),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: "text-sm font-semibold text-gray-900" }, program.title),
+                            react_1.default.createElement("div", { className: "text-xs font-medium ".concat(program.textColor) }, program.ages)))))); })))));
+}

package/templates/school-v1/sections/testimonials.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { Testimonial } from "../../../templates/data/school-v1";
+export declare function TestimonialsSection({ testimonials, }: {
+    testimonials: Testimonial[];
+}): React.JSX.Element;

package/templates/school-v1/sections/testimonials.js

@@ -0,0 +1,45 @@
+"use client";
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestimonialsSection = TestimonialsSection;
+var react_1 = __importDefault(require("react"));
+var framer_motion_1 = require("framer-motion");
+var badge_1 = require("../../../components/ui/badge");
+var lucide_react_1 = require("lucide-react");
+function TestimonialsSection(_a) {
+    var testimonials = _a.testimonials;
+    return (react_1.default.createElement("section", { id: "testimonials", className: "overflow-hidden bg-white py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-16 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "Testimonials"),
+                react_1.default.createElement("h2", { className: "mb-5 text-4xl font-bold text-gray-900 md:text-5xl" },
+                    "Trusted by",
+                    " ",
+                    react_1.default.createElement("span", { className: "text-blue-700" }, "Families Across Lahore")),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg leading-relaxed text-gray-500" }, "Don't just take our word for it \u2014 hear from the parents and alumni who have experienced the LGGS difference firsthand.")),
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }, testimonials.map(function (t, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: t.id, className: "group relative overflow-hidden rounded-3xl border border-gray-100 bg-white p-7 shadow-sm transition-all duration-300 hover:shadow-xl", initial: { opacity: 0, y: 40 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: i * 0.07 }, viewport: { once: true }, whileHover: { y: -4 } },
+                react_1.default.createElement("div", { className: "pointer-events-none absolute top-0 right-0 h-24 w-24 rounded-bl-full bg-gradient-to-br ".concat(t.gradientFrom, " ").concat(t.gradientTo, " opacity-5 transition-opacity group-hover:opacity-10") }),
+                react_1.default.createElement("div", { className: "mb-4 flex gap-1" }, __spreadArray([], Array(5), true).map(function (_, s) { return (react_1.default.createElement(lucide_react_1.Star, { key: s, className: "h-4 w-4 fill-yellow-400 text-yellow-400" })); })),
+                react_1.default.createElement(lucide_react_1.Quote, { className: "mb-3 h-7 w-7 text-blue-100" }),
+                react_1.default.createElement("p", { className: "mb-6 text-sm leading-relaxed text-gray-600 italic" },
+                    "\u201C",
+                    t.quote,
+                    "\u201D"),
+                react_1.default.createElement("div", { className: "flex items-center gap-3" },
+                    react_1.default.createElement("div", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-br ".concat(t.gradientFrom, " ").concat(t.gradientTo, " text-sm font-bold text-white") }, t.initials),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "text-sm font-semibold text-gray-900" }, t.name),
+                        react_1.default.createElement("div", { className: "text-xs text-gray-400" }, t.role))))); })))));
+}

package/templates/school-v1/sections/why-choose-us.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { WhyUsFeature } from "../../../templates/data/school-v1";
+export declare function WhyChooseUsSection({ whyUsFeatures, highlightBadges, }: {
+    whyUsFeatures: WhyUsFeature[];
+    highlightBadges: string[];
+}): React.JSX.Element;

package/templates/school-v1/sections/why-choose-us.js

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhyChooseUsSection = WhyChooseUsSection;
+var react_1 = __importDefault(require("react"));
+var framer_motion_1 = require("framer-motion");
+var badge_1 = require("../../../components/ui/badge");
+var lucide_react_1 = require("lucide-react");
+function WhyChooseUsSection(_a) {
+    var whyUsFeatures = _a.whyUsFeatures, highlightBadges = _a.highlightBadges;
+    var _b = [whyUsFeatures.slice(0, 2), whyUsFeatures.slice(2)], firstTwo = _b[0], rest = _b[1];
+    return (react_1.default.createElement("section", { id: "why-choose-us", className: "overflow-hidden bg-slate-50 py-24" },
+        react_1.default.createElement("div", { className: "container mx-auto px-4" },
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "mb-16 text-center", initial: { opacity: 0, y: 30 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.6 }, viewport: { once: true } },
+                react_1.default.createElement(badge_1.Badge, { className: "mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100" }, "Why Choose LGGS?"),
+                react_1.default.createElement("h2", { className: "mb-5 text-4xl font-bold text-gray-900 md:text-5xl" },
+                    "Choose Excellence.",
+                    " ",
+                    react_1.default.createElement("span", { className: "text-blue-700" }, "Choose LGGS.")),
+                react_1.default.createElement("p", { className: "mx-auto max-w-2xl text-lg leading-relaxed text-gray-500" }, "Every parent wants the very best for their child. At Lahore Garrison Grammar School, we have built an institution where excellence is the baseline \u2014 not the exception.")),
+            react_1.default.createElement("div", { className: "mb-8 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4" },
+                firstTwo.map(function (f, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: f.title, className: "group relative overflow-hidden rounded-3xl border border-gray-100 bg-white p-8 shadow-sm transition-shadow duration-300 hover:shadow-xl lg:col-span-2", initial: { opacity: 0, y: 40 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: i * 0.1 }, viewport: { once: true }, whileHover: { y: -4 } },
+                    react_1.default.createElement("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" }),
+                    react_1.default.createElement("div", { className: "mb-5 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-50 transition-transform duration-300 group-hover:scale-110" },
+                        react_1.default.createElement(f.icon, { className: "h-7 w-7 ".concat(f.color) })),
+                    react_1.default.createElement("h3", { className: "mb-3 text-xl font-bold text-gray-900" }, f.title),
+                    react_1.default.createElement("p", { className: "leading-relaxed text-gray-500" }, f.description))); }),
+                rest.map(function (f, i) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: f.title, className: "group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition-shadow duration-300 hover:shadow-lg", initial: { opacity: 0, y: 40 }, whileInView: { opacity: 1, y: 0 }, transition: { duration: 0.5, delay: (i + 2) * 0.08 }, viewport: { once: true }, whileHover: { y: -3 } },
+                    react_1.default.createElement("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" }),
+                    react_1.default.createElement("div", { className: "mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-gray-50 transition-transform duration-300 group-hover:scale-110" },
+                        react_1.default.createElement(f.icon, { className: "h-5 w-5 ".concat(f.color) })),
+                    react_1.default.createElement("h3", { className: "mb-2 font-bold text-gray-900" }, f.title),
+                    react_1.default.createElement("p", { className: "text-sm leading-relaxed text-gray-500" }, f.description))); })),
+            react_1.default.createElement(framer_motion_1.motion.div, { className: "flex flex-wrap items-center justify-center gap-3 border-t border-gray-200 py-8", initial: { opacity: 0 }, whileInView: { opacity: 1 }, transition: { duration: 0.6, delay: 0.5 }, viewport: { once: true } }, highlightBadges.map(function (badge) { return (react_1.default.createElement(framer_motion_1.motion.div, { key: badge, className: "flex items-center gap-2 rounded-full border border-blue-100 bg-white px-4 py-2 text-sm font-medium text-blue-800 shadow-sm", whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } },
+                react_1.default.createElement(lucide_react_1.CheckCircle, { className: "h-4 w-4 text-blue-500" }),
+                badge)); })))));
+}