nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/blocks/components/sections/ServicesGrid.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Data structure representing a single service card.
+ */
+export interface ServiceCardData {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+/**
+ * Props to configure the ServicesGrid component (upgraded slots + cn).
+ */
+export interface ServicesGridProps {
+  /** Optional id on root */
+  id?: string;
+  /** Root className merged into section slot */
+  className?: string;
+  sectionHeading?: string;
+  servicesData?: ServiceCardData[];
+  /** When false, disables entrance animations and hover transitions */
+  enableMotion?: boolean;
+  /** Styling configuration objects */
+  section?: {
+    className?: string;
+  };
+  container?: {
+    className?: string;
+  };
+  heading?: {
+    className?: string;
+  };
+  grid?: {
+    className?: string;
+  };
+  card?: {
+    className?: string;
+  };
+  cardContent?: {
+    className?: string;
+  };
+  icon?: {
+    className?: string;
+  };
+  title?: {
+    className?: string;
+  };
+  description?: {
+    className?: string;
+  };
+  /** ARIA label for the services section */
+  ariaLabel?: string;
+}
+
+/**
+ * Default services data for digital agency
+ */
+const defaultServicesData: ServiceCardData[] = [
+  {
+    icon: "💻",
+    title: "Web Design & Development",
+    description:
+      "Custom websites that capture your brand and convert visitors into customers",
+  },
+  {
+    icon: "📈",
+    title: "SEO & Digital Marketing",
+    description:
+      "Get found on Google and drive qualified traffic to your website",
+  },
+  {
+    icon: "🛒",
+    title: "E-commerce Solutions",
+    description: "Online stores that maximize sales and customer experience",
+  },
+  {
+    icon: "🎨",
+    title: "Brand Identity & Design",
+    description: "Logo, branding, and visual identity that makes you stand out",
+  },
+];
+
+/**
+ * Responsive services grid with subtle motion and slot-style overrides.
+ *
+ * @remarks
+ * - Motion can be disabled globally with enableMotion.
+ * - Each card uses simple emoji icons by default; replace with real icons if preferred.
+ *
+ * @example
+ * <ServicesGrid servicesData={[{ icon: '⚙️', title: 'Automation', description: '...' }]} />
+ */
+export function ServicesGrid({
+  id,
+  className,
+  sectionHeading = "Our Services",
+  servicesData = defaultServicesData,
+  enableMotion = true,
+  section = {
+    className: "py-16 md:py-20 lg:py-24 bg-muted",
+  },
+  container = {
+    className: "max-w-6xl mx-auto px-4 md:px-6 lg:px-8",
+  },
+  heading = {
+    className:
+      "text-3xl md:text-4xl lg:text-5xl font-bold font-poppins text-foreground text-center mb-8 md:mb-12",
+  },
+  grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 items-stretch",
+  },
+  card = {
+    className:
+      "bg-card/90 backdrop-blur p-6 md:p-8 rounded-lg border border-border shadow-sm hover:shadow-md transition-all duration-300 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+  },
+  cardContent = {
+    className: "flex flex-col h-full space-y-4",
+  },
+  icon = {
+    className: "text-4xl",
+  },
+  title = {
+    className:
+      "text-lg md:text-xl font-semibold font-poppins text-card-foreground leading-tight text-[var(--card-title-fg)]",
+  },
+  description = {
+    className:
+      "text-sm md:text-base font-inter leading-relaxed flex-1 text-[var(--card-muted-fg)]",
+  },
+  ariaLabel = "Services section",
+}: ServicesGridProps) {
+  return (
+    <section
+      id={id}
+      className={cn(section.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={container.className}>
+        {/* Section Heading */}
+        <h2 className={heading.className}>{sectionHeading}</h2>
+
+        {/* Services Grid */}
+        <div className={grid.className}>
+          {servicesData.map((service, index) => (
+            <motion.div
+              key={index}
+              initial={
+                enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }
+              }
+              whileInView={
+                enableMotion ? { opacity: 1, y: 0 } : { opacity: 1, y: 0 }
+              }
+              viewport={
+                enableMotion
+                  ? { once: true, amount: 0.2 }
+                  : { once: true, amount: 0 }
+              }
+              transition={
+                enableMotion
+                  ? {
+                      type: "spring",
+                      stiffness: 125,
+                      damping: 50,
+                      mass: 1,
+                      delay: 0.12 + index * 0.05,
+                    }
+                  : { type: "tween", duration: 0 }
+              }
+              className={cn(
+                "h-full motion-reduce:transform-none motion-reduce:transition-none",
+              )}
+            >
+              <div
+                className={cn(
+                  card.className,
+                  "flex h-full flex-col",
+                  enableMotion
+                    ? "transition-transform duration-200 hover:-translate-y-1"
+                    : "transition-none hover:!translate-y-0 hover:shadow-none",
+                )}
+              >
+                <div className={cardContent.className}>
+                  {/* Service Icon */}
+                  <div
+                    className={icon.className}
+                    role="img"
+                    aria-label={service.title}
+                  >
+                    {service.icon}
+                  </div>
+
+                  {/* Service Title */}
+                  <h3 className={title.className}>{service.title}</h3>
+
+                  {/* Service Description */}
+                  <p className={description.className}>{service.description}</p>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/kits/blocks/components/sections/Team.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+/**
+ * A social link shown on a team member card.
+ * @public
+ */
+export interface SocialLink {
+  /** Platform name (e.g., "LinkedIn") */
+  platform: string;
+  /** Destination URL */
+  url: string;
+  /** Icon identifier or emoji; replace with SVGs in real usage */
+  icon: string;
+}
+
+/**
+ * Team member data rendered by Team.
+ * @public
+ */
+export interface TeamMemberData {
+  /** Member name */
+  name?: string;
+  /** Job role or title */
+  role?: string;
+  /** Short bio or description */
+  bio?: string;
+  /** Avatar content (emoji or image URL if swapped out) */
+  avatar?: string;
+  /** Optional social links */
+  socialLinks?: SocialLink[];
+}
+
+/**
+ * Props for the Team section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: enableMotion controls hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ */
+export interface TeamProps {
+  /** Optional id on root. @defaultValue "team" */
+  id?: string;
+  /** Top-level className override */
+  className?: string;
+  /** Section heading text or object. @defaultValue "Meet Our Team" */
+  teamHeadingText?: string | { text?: string; className?: string };
+  /** Optional subheading text or object. @defaultValue "The talented people behind your success" */
+  teamSubheadingText?: string | { text?: string; className?: string };
+  /** Members to render. @defaultValue DefaultTeamData */
+  teamMembers?: TeamMemberData[];
+
+  /** Slot-style overrides */
+  section?: { className?: string };
+  container?: { className?: string };
+  header?: { className?: string };
+  heading?: { className?: string };
+  subheading?: { className?: string };
+  grid?: { className?: string };
+  card?: { className?: string };
+  cardContent?: { className?: string };
+  avatar?: { className?: string };
+  name?: { className?: string };
+  role?: { className?: string };
+  bio?: { className?: string };
+  socialLinks?: { className?: string };
+  socialLink?: { className?: string };
+
+  /** When false, removes hover lift on cards */
+  enableMotion?: boolean;
+
+  /** ARIA label for the section. @defaultValue "Team section" */
+  ariaLabel?: string;
+}
+
+const DefaultTeamData: TeamMemberData[] = [
+  {
+    name: "Alex Chen",
+    role: "CEO & Founder",
+    bio: "Full-stack developer with 8+ years.",
+    avatar: "👨‍💼",
+    socialLinks: [{ platform: "LinkedIn", url: "#", icon: "💼" }],
+  },
+  {
+    name: "Sarah Martinez",
+    role: "Lead Designer",
+    bio: "UI/UX expert.",
+    avatar: "👩‍🎨",
+    socialLinks: [{ platform: "Dribbble", url: "#", icon: "🎨" }],
+  },
+  {
+    name: "Jordan Patel",
+    role: "DevOps Engineer",
+    bio: "Automates cloud infra and CI/CD pipelines.",
+    avatar: "🛠️",
+    socialLinks: [{ platform: "GitHub", url: "#", icon: "🐙" }],
+  },
+  {
+    name: "Maya Thompson",
+    role: "Product Manager",
+    bio: "Drives roadmap and aligns cross‑functional teams.",
+    avatar: "🧭",
+    socialLinks: [{ platform: "Twitter", url: "#", icon: "🐦" }],
+  },
+];
+
+/**
+ * Internal presentational card for a single team member.
+ * Receives already-merged className strings from the parent.
+ */
+function TeamCard({
+  member,
+  card = { className: "" },
+  cardContent = { className: "" },
+  avatar = { className: "" },
+  name = { className: "" },
+  role = { className: "" },
+  bio = { className: "" },
+  socialLinks = { className: "" },
+  socialLink = { className: "" },
+}: {
+  member: TeamMemberData;
+  card?: { className?: string };
+  cardContent?: { className?: string };
+  avatar?: { className?: string };
+  name?: { className?: string };
+  role?: { className?: string };
+  bio?: { className?: string };
+  socialLinks?: { className?: string };
+  socialLink?: { className?: string };
+}) {
+  return (
+    <div className={card.className}>
+      <div className={cardContent.className}>
+        <div className={avatar.className}>{member.avatar}</div>
+        <h3 className={name.className}>{member.name}</h3>
+        <p className={role.className}>{member.role}</p>
+        <p className={bio.className}>{member.bio}</p>
+        {member.socialLinks && member.socialLinks.length > 0 && (
+          <div className={socialLinks.className}>
+            {member.socialLinks.map((social, index) => (
+              <Link
+                key={index}
+                href={social.url}
+                className={socialLink.className}
+                title={social.platform}
+                aria-label={`${member.name}'s ${social.platform} profile`}
+              >
+                {social.icon}
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Team section with heading, subheading, and a responsive member grid.
+ *
+ * @remarks
+ * - Uses a slot-style API for className overrides merged via cn().
+ * - Motion: enableMotion toggles hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ *
+ * @example
+ * <Team teamMembers={[{ name: 'Alex', role: 'Engineer' }]} />
+ */
+export function Team({
+  id,
+  className,
+  teamMembers = DefaultTeamData,
+  teamHeadingText = "Meet Our Team",
+  teamSubheadingText = "The talented people behind your success",
+  section,
+  container,
+  header,
+  heading,
+  subheading,
+  grid,
+  card,
+  cardContent,
+  avatar,
+  name,
+  role,
+  bio,
+  socialLinks,
+  socialLink,
+  enableMotion = true,
+  ariaLabel = "Team section",
+}: TeamProps) {
+  // Defaults for slots
+  const defaultSection = "py-16 px-6 bg-muted";
+  const defaultContainer = "max-w-7xl mx-auto";
+  const defaultHeader = "space-y-12 items-center";
+  const defaultHeadingClass =
+    "text-3xl font-bold font-poppins text-foreground text-center text-[var(--heading-fg)]";
+  const defaultSubheadingClass =
+    "text-lg font-inter text-muted-foreground opacity-80 leading-relaxed text-center max-w-2xl text-[var(--subheading-fg)]";
+  const defaultGrid =
+    "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full";
+  const defaultCardBase =
+    "bg-card p-6 rounded-lg shadow-md text-center border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]";
+  const defaultCardContent = "flex flex-col items-center space-y-4";
+  const defaultAvatar = "text-4xl mb-2";
+  const defaultName =
+    "text-xl font-bold font-poppins text-card-foreground text-[var(--card-fg)]";
+  const defaultRole = "text-md font-semibold font-poppins text-primary";
+  const defaultBio =
+    "text-sm font-inter text-muted-foreground opacity-80 leading-relaxed text-[var(--card-muted-fg)]";
+  const defaultSocialLinks = "flex gap-3 mt-2";
+  const defaultSocialLink =
+    "text-lg text-primary hover:text-accent-foreground transition-colors duration-200";
+
+  // Motion control for card
+  const motionCard = enableMotion
+    ? "transition-transform duration-200 hover:-translate-y-1"
+    : "transition-none hover:!translate-y-0";
+
+  // Merge slot classes using cn (defaults first, then overrides)
+  const finalSectionClass = cn(defaultSection, section?.className, className);
+  const finalContainerClass = cn(defaultContainer, container?.className);
+  const finalHeaderClass = cn(defaultHeader, header?.className);
+  const finalGridClass = cn(defaultGrid, grid?.className);
+
+  const finalCardClass = cn(defaultCardBase, motionCard, card?.className);
+  const finalCardContentClass = cn(defaultCardContent, cardContent?.className);
+  const finalAvatarClass = cn(defaultAvatar, avatar?.className);
+  const finalNameClass = cn(defaultName, name?.className);
+  const finalRoleClass = cn(defaultRole, role?.className);
+  const finalBioClass = cn(defaultBio, bio?.className);
+  const finalSocialLinksClass = cn(defaultSocialLinks, socialLinks?.className);
+  const finalSocialLinkClass = cn(defaultSocialLink, socialLink?.className);
+
+  // Normalize heading/subheading allowing string or object, plus slot class merges
+  const normalizedHeading =
+    typeof teamHeadingText === "string"
+      ? {
+          text: teamHeadingText,
+          className: cn(defaultHeadingClass, heading?.className),
+        }
+      : {
+          text: teamHeadingText?.text ?? "Meet Our Team",
+          className: cn(
+            defaultHeadingClass,
+            teamHeadingText?.className,
+            heading?.className,
+          ),
+        };
+
+  const normalizedSubheading =
+    typeof teamSubheadingText === "string"
+      ? {
+          text: teamSubheadingText,
+          className: cn(defaultSubheadingClass, subheading?.className),
+        }
+      : {
+          text:
+            teamSubheadingText?.text ??
+            "The talented people behind your success",
+          className: cn(
+            defaultSubheadingClass,
+            teamSubheadingText?.className,
+            subheading?.className,
+          ),
+        };
+
+  return (
+    <section
+      id={id || "team"}
+      className={finalSectionClass}
+      aria-label={ariaLabel}
+    >
+      <div className={finalContainerClass}>
+        <div className={finalHeaderClass}>
+          <div className="mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center">
+            <h2 className={normalizedHeading.className}>
+              {normalizedHeading.text}
+            </h2>
+            <p className={normalizedSubheading.className}>
+              {normalizedSubheading.text}
+            </p>
+          </div>
+          <div className={finalGridClass}>
+            {teamMembers.map((member, index) => (
+              <TeamCard
+                key={index}
+                member={member}
+                card={{ className: finalCardClass }}
+                cardContent={{ className: finalCardContentClass }}
+                avatar={{ className: finalAvatarClass }}
+                name={{ className: finalNameClass }}
+                role={{ className: finalRoleClass }}
+                bio={{ className: finalBioClass }}
+                socialLinks={{ className: finalSocialLinksClass }}
+                socialLink={{ className: finalSocialLinkClass }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/kits/blocks/components/sections/Testimonials.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { TestimonialCard } from "@/components/ui/testimonial-card";
+
+/**
+ * Data used to render a TestimonialCard.
+ * @public
+ */
+export interface TestimonialCardData {
+  /** The testimonial quote text */
+  testimonialText: string;
+  /** The author's display name (prefixed with hyphen in defaults) */
+  testimonialAuthor: string;
+  /** Author initials displayed in the avatar */
+  testimonialAuthorInitials: string;
+}
+
+/**
+ * Props for the Testimonials section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: enableMotion toggles card hover transitions.
+ * - Accessibility: semantic <section> with aria-label.
+ */
+export interface TestimonialsProps {
+  /** Optional id */
+  id?: string;
+  /** Root className merged into slots */
+  className?: string;
+
+  /** Testimonial items to render. @defaultValue defaultTestimonialData */
+  testimonials?: TestimonialCardData[];
+  /** Heading displayed above the grid. @defaultValue "What Our Customers Say" */
+  testimonialSectionHeader?: string;
+
+  /** When false, disables hover transitions on cards */
+  enableMotion?: boolean;
+
+  /** Slot-style overrides */
+  section?: { className?: string };
+  container?: { className?: string };
+  header?: { className?: string };
+  heading?: { className?: string };
+  grid?: { className?: string };
+  card?: { className?: string };
+  content?: { className?: string };
+  text?: { className?: string };
+  author?: { className?: string };
+  avatar?: { className?: string };
+  avatarText?: { className?: string };
+
+  /** ARIA label for the section. @defaultValue "Testimonials section" */
+  ariaLabel?: string;
+}
+
+const defaultTestimonialData: TestimonialCardData[] = [
+  {
+    testimonialText: "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.",
+    testimonialAuthor: " - Cillum Dolore",
+    testimonialAuthorInitials: "CD",
+  },
+  {
+    testimonialText:
+      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi!",
+    testimonialAuthor: " - Voluptate Velit",
+    testimonialAuthorInitials: "VV",
+  },
+  {
+    testimonialText: "Cillum dolore eu fugiat nulla pariatur!",
+    testimonialAuthor: " - Laboris Nisi",
+    testimonialAuthorInitials: "LN",
+  },
+];
+
+/**
+ * Testimonials section that renders a grid of TestimonialCard items.
+ *
+ * @remarks
+ * - Slot-style overrides match TestimonialCard sub-slots (card, content, text, etc.).
+ * - Motion can be disabled via enableMotion.
+ *
+ * @example
+ * <Testimonials testimonials={[{ testimonialText: 'Great!', testimonialAuthor: ' - Jane', testimonialAuthorInitials: 'J' }]} />
+ */
+export function Testimonials({
+  id,
+  className,
+  testimonials = defaultTestimonialData,
+  testimonialSectionHeader = "What Our Customers Say",
+  enableMotion = true,
+  section = { className: "py-16 px-6 bg-muted" },
+  container = { className: "max-w-7xl mx-auto" },
+  header = { className: "text-center mb-12" },
+  heading = {
+    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground",
+  },
+  grid = { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" },
+  card = {
+    className:
+      "bg-card/90 backdrop-blur p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+  },
+  content = { className: "flex flex-col space-y-4" },
+  text = {
+    className:
+      "text-card-foreground text-base leading-relaxed italic font-inter text-[var(--card-fg)]",
+  },
+  author = {
+    className:
+      "text-muted-foreground text-sm font-medium font-poppins text-[var(--card-muted-fg)]",
+  },
+  avatar = {
+    className:
+      "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+  },
+  avatarText = { className: "text-primary-foreground font-bold" },
+  ariaLabel = "Testimonials section",
+}: TestimonialsProps) {
+  return (
+    <section
+      id={id || "testimonials"}
+      className={cn(section.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={container.className}>
+        {/* Section Header */}
+        <div className={header.className}>
+          <h2 className={heading.className}>{testimonialSectionHeader}</h2>
+        </div>
+
+        {/* Testimonials Grid */}
+        <div className={grid.className}>
+          {testimonials.map((testimonial, index) => (
+            <TestimonialCard
+              key={index}
+              testimonialText={testimonial.testimonialText}
+              testimonialAuthor={testimonial.testimonialAuthor}
+              testimonialAuthorInitials={testimonial.testimonialAuthorInitials}
+              card={{
+                className: cn(
+                  card.className,
+                  !enableMotion && "transition-none hover:!translate-y-0",
+                ),
+              }}
+              content={content}
+              text={text}
+              author={author}
+              avatar={avatar}
+              avatarText={avatarText}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}