@ugurdemirel/landcraft 0.1.2 → 0.1.4

package/dist/styles.css

@@ -2071,6 +2071,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Blog/BlogCard.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { BlogCardProps } from "./types";
+import { BlogCardCard } from "./variants/Card";
+import { BlogCardRow } from "./variants/Row";
+
+export const BlogCard = forwardRef<HTMLAnchorElement, BlogCardProps>(
+  ({ option = "card", ...props }, ref) => {
+    if (option === "row") return <BlogCardRow ref={ref} {...props} />;
+    return <BlogCardCard ref={ref} {...props} />;
+  },
+);
+BlogCard.displayName = "BlogCard";

package/src/components/Blog/BlogSection.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+import { ArrowRight } from "../../icons";
+import { Container } from "../Container";
+import { BlogCard } from "./BlogCard";
+import type { BlogSectionProps } from "./types";
+
+const gridCols: Record<2 | 3, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+};
+
+export const BlogSection = forwardRef<HTMLElement, BlogSectionProps>(
+  (
+    {
+      className,
+      posts,
+      limit,
+      columns = 3,
+      option = "card",
+      eyebrow,
+      eyebrowStyle = "caps",
+      title,
+      description,
+      showAllLabel,
+      showAllHref,
+      LinkComponent,
+      ...props
+    },
+    ref,
+  ) => {
+    const visible = limit ? posts.slice(0, limit) : posts;
+    const Link = LinkComponent ?? "a";
+
+    return (
+      <section ref={ref} className={cn("w-full py-20 sm:py-24", className)} {...props}>
+        <Container>
+          {(eyebrow || title || description || showAllHref) && (
+            <div className="mb-12 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+              <div className="max-w-2xl">
+                {eyebrow ? (
+                  <p
+                    className={cn(
+                      "text-xs font-semibold uppercase tracking-[0.18em]",
+                      eyebrowStyle === "caps" && "text-foreground/50",
+                      eyebrowStyle === "soft" &&
+                        "inline-flex items-center rounded-full bg-primary-soft px-3 py-1.5 text-primary",
+                      eyebrowStyle === "plain" && "text-primary",
+                    )}
+                  >
+                    {eyebrow}
+                  </p>
+                ) : null}
+                {title ? (
+                  <h2 className="mt-4 font-display text-balance text-3xl font-semibold leading-[1.08] tracking-tight text-foreground sm:text-4xl">
+                    {title}
+                  </h2>
+                ) : null}
+                {description ? (
+                  <p className="mt-4 text-pretty text-base leading-7 text-muted-foreground">
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              {showAllHref ? (
+                <Link
+                  href={showAllHref}
+                  className="group inline-flex shrink-0 cursor-pointer items-center gap-1.5 text-sm font-semibold text-foreground transition-colors duration-150 hover:text-primary"
+                >
+                  {showAllLabel ?? "All posts"}
+                  <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
+                </Link>
+              ) : null}
+            </div>
+          )}
+
+          {option === "row" ? (
+            <div className="divide-y divide-border border-t border-border">
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="row" LinkComponent={LinkComponent} />
+              ))}
+            </div>
+          ) : (
+            <div className={cn("grid grid-cols-1 gap-4", gridCols[columns])}>
+              {visible.map((post) => (
+                <BlogCard key={post.title} post={post} option="card" LinkComponent={LinkComponent} />
+              ))}
+            </div>
+          )}
+        </Container>
+      </section>
+    );
+  },
+);
+BlogSection.displayName = "BlogSection";

package/src/components/Blog/index.ts

@@ -0,0 +1,8 @@
+export { BlogCard } from "./BlogCard";
+export { BlogSection } from "./BlogSection";
+export type {
+  BlogCardProps,
+  BlogSectionProps,
+  BlogPost,
+  BlogAuthor,
+} from "./types";

package/src/components/Blog/parts.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { BlogPost } from "./types";
+
+export function AuthorMark({ name, avatar }: { name: string; avatar?: ReactNode }) {
+  if (avatar) return avatar;
+  const initials = name
+    .split(" ")
+    .map((p) => p[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  return (
+    <span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-primary-soft text-[11px] font-bold text-primary">
+      {initials}
+    </span>
+  );
+}
+
+export const Cover = ({ post }: { post: BlogPost }) =>
+  post.cover ? (
+    <img src={post.cover} alt="" loading="lazy" className="aspect-[16/10] w-full object-cover" />
+  ) : (
+    <div
+      className="grid aspect-[16/10] w-full place-items-center bg-surface-strong"
+      style={
+        post.accent
+          ? { background: `linear-gradient(135deg, ${post.accent}22, ${post.accent}11)` }
+          : undefined
+      }
+    >
+      <span
+        className="font-display text-4xl font-bold tracking-[-0.04em]"
+        style={{ color: post.accent ?? "rgb(var(--color-foreground) / 0.12)" }}
+      >
+        {post.category?.[0]?.toUpperCase()}
+      </span>
+    </div>
+  );

package/src/components/Blog/types.ts

@@ -0,0 +1,42 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export interface BlogAuthor {
+  name: string;
+  avatar?: ReactNode;
+}
+
+export interface BlogPost {
+  title: string;
+  excerpt?: string;
+  /** Display date, e.g. "12 Aug 2026". */
+  date: string;
+  readTime?: string;
+  category?: string;
+  cover?: string;
+  /** Arbitrary CSS color for the cover placeholder accent. */
+  accent?: string;
+  href?: string;
+  author?: BlogAuthor;
+}
+
+export interface BlogCardProps extends HTMLAttributes<HTMLAnchorElement> {
+  post: BlogPost;
+  option?: "card" | "row";
+  /** Component used to render the card link. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
+}
+
+export interface BlogSectionProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  posts: BlogPost[];
+  /** Show only the first N posts. */
+  limit?: number;
+  columns?: 2 | 3;
+  option?: "card" | "row";
+  eyebrow?: ReactNode;
+  eyebrowStyle?: "caps" | "soft" | "plain";
+  title?: ReactNode;
+  description?: ReactNode;
+  showAllLabel?: string;
+  showAllHref?: string;
+  LinkComponent?: ElementType;
+}

package/src/components/Blog/variants/Card.tsx

@@ -0,0 +1,62 @@
+import { forwardRef, type ElementType } from "react";
+import { cn } from "../../../utils/cn";
+import { ArrowRight } from "../../../icons";
+import { Badge } from "../../Badge";
+import { AuthorMark, Cover } from "../parts";
+import type { BlogPost } from "../types";
+
+interface BlogCardCardProps {
+  post: BlogPost;
+  LinkComponent?: ElementType;
+  className?: string;
+}
+
+export const BlogCardCard = forwardRef<HTMLAnchorElement, BlogCardCardProps>(
+  ({ className, post, LinkComponent, ...props }, ref) => {
+    const Link = LinkComponent ?? "a";
+    const author = post.author;
+    return (
+      <Link
+        ref={ref}
+        href={post.href ?? "#"}
+        className={cn(
+          "group flex h-full cursor-pointer flex-col overflow-hidden rounded-xl border border-border bg-surface transition-colors duration-200 hover:border-foreground/20",
+          className,
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          <Cover post={post} />
+        </div>
+        <div className="flex flex-1 flex-col p-6">
+          <div className="flex items-center justify-between gap-3">
+            {post.category ? <Badge variant="soft" size="sm">{post.category}</Badge> : <span />}
+            {post.readTime ? (
+              <span className="text-xs text-muted-foreground">{post.readTime}</span>
+            ) : null}
+          </div>
+          <h3 className="mt-4 font-display text-lg font-semibold leading-snug tracking-tight text-foreground sm:text-xl">
+            {post.title}
+          </h3>
+          {post.excerpt ? (
+            <p className="mt-2.5 line-clamp-2 text-sm leading-6 text-muted-foreground">
+              {post.excerpt}
+            </p>
+          ) : null}
+          <div className="mt-5 flex items-center justify-between gap-3 border-t border-border pt-4">
+            {author ? (
+              <span className="flex min-w-0 items-center gap-2.5">
+                <AuthorMark name={author.name} avatar={author.avatar} />
+                <span className="truncate text-xs font-medium text-foreground">{author.name}</span>
+              </span>
+            ) : (
+              <span className="text-xs tabular-nums text-muted-foreground">{post.date}</span>
+            )}
+            <ArrowRight className="h-4 w-4 text-foreground/35 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground" />
+          </div>
+        </div>
+      </Link>
+    );
+  },
+);
+BlogCardCard.displayName = "BlogCardCard";

package/src/components/Blog/variants/Row.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, type ElementType } from "react";
+import { cn } from "../../../utils/cn";
+import { ArrowUpRight } from "../../../icons";
+import type { BlogPost } from "../types";
+
+interface BlogCardRowProps {
+  post: BlogPost;
+  LinkComponent?: ElementType;
+  className?: string;
+}
+
+export const BlogCardRow = forwardRef<HTMLAnchorElement, BlogCardRowProps>(
+  ({ className, post, LinkComponent, ...props }, ref) => {
+    const Link = LinkComponent ?? "a";
+    return (
+      <Link
+        ref={ref}
+        href={post.href ?? "#"}
+        className={cn("group flex cursor-pointer items-baseline gap-5 py-6", className)}
+        {...props}
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-3">
+            {post.category ? <span className="rounded-full bg-primary-soft px-2.5 py-0.5 text-xs font-semibold text-primary">{post.category}</span> : null}
+            <span className="text-xs tabular-nums text-muted-foreground">
+              {post.date}
+              {post.readTime ? ` · ${post.readTime}` : ""}
+            </span>
+          </div>
+          <h3 className="mt-2.5 font-display text-xl font-semibold tracking-tight text-foreground transition-transform duration-200 group-hover:translate-x-1 sm:text-2xl">
+            {post.title}
+          </h3>
+        </div>
+        <span className="text-foreground/30 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-foreground">
+          <ArrowUpRight className="h-5 w-5" />
+        </span>
+      </Link>
+    );
+  },
+);
+BlogCardRow.displayName = "BlogCardRow";

package/src/components/CTA/CTA.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { CTAProps } from "./types";
+import { CTAPanel } from "./variants/Panel";
+import { CTASurface } from "./variants/Surface";
+import { CTAInverse } from "./variants/Inverse";
+
+export const CTA = forwardRef<HTMLElement, CTAProps>(({ option = "panel", ...props }, ref) => {
+  if (option === "surface") return <CTASurface ref={ref} {...props} />;
+  if (option === "inverse") return <CTAInverse ref={ref} {...props} />;
+  return <CTAPanel ref={ref} {...props} />;
+});
+CTA.displayName = "CTA";

package/src/components/CTA/index.ts

@@ -0,0 +1,2 @@
+export { CTA } from "./CTA";
+export type { CTAProps, CTAOption } from "./types";

package/src/components/CTA/parts.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn";
+
+export function CTAActions({
+  action,
+  secondaryAction,
+  align,
+  actionClassName = "flex flex-wrap items-center gap-4",
+}: {
+  action?: ReactNode;
+  secondaryAction?: ReactNode;
+  align?: "left" | "center";
+  actionClassName?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        actionClassName,
+        align === "center" && "justify-center",
+      )}
+    >
+      {action}
+      {secondaryAction}
+    </div>
+  );
+}

package/src/components/CTA/types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type CTAOption = "panel" | "surface" | "inverse";
+
+export interface CTAProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  secondaryAction?: ReactNode;
+  option?: CTAOption;
+  align?: "left" | "center";
+}

package/src/components/CTA/variants/Inverse.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { useTokenForeground } from "../../../utils/useTokenForeground";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** inverse — ink panel with a wide left-aligned split. */
+export const CTAInverse = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
+    const fg = useTokenForeground("--color-secondary");
+
+    return (
+      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
+        <Container>
+          <div
+            className="relative overflow-hidden rounded-[1.75rem] px-7 py-16 sm:px-16 sm:py-20"
+            style={{
+              backgroundColor: "rgb(var(--color-secondary))",
+              color: fg,
+            }}
+          >
+            <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.09] mix-blend-overlay" />
+            <div
+              className={cn(
+                "relative flex flex-col items-start gap-10",
+                align === "center" && "items-center text-center",
+                "lg:flex-row lg:items-end lg:justify-between",
+              )}
+            >
+              <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+                <h2 className="font-display text-balance text-4xl font-semibold leading-[1.02] tracking-[-0.03em] sm:text-6xl">
+                  {title}
+                </h2>
+                {description ? (
+                  <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 sm:text-lg", align === "center" && "mx-auto")}>
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  },
+);
+CTAInverse.displayName = "CTAInverse";

package/src/components/CTA/variants/Panel.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { useTokenForeground } from "../../../utils/useTokenForeground";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** panel — brand gradient panel, rounded corners. */
+export const CTAPanel = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => {
+    const fg = useTokenForeground("--color-primary");
+
+    return (
+      <section ref={ref} id={id} className={cn("w-full py-6 pb-20", className)} {...props}>
+        <Container>
+          <div
+            className="relative overflow-hidden rounded-[1.75rem] px-7 py-14 sm:px-14 sm:py-20"
+            style={{
+              background:
+                "radial-gradient(120% 160% at 0% 0%, rgb(var(--color-primary)), rgb(var(--color-primary-hover)) 55%, rgb(var(--color-primary) / 0.85))",
+              color: fg,
+            }}
+          >
+            <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay" />
+            <div
+              aria-hidden
+              className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full"
+              style={{ background: "rgb(var(--color-accent))", opacity: 0.35, filter: "blur(60px)" }}
+            />
+            <div
+              className={cn(
+                "relative flex flex-col gap-9",
+                align === "center" ? "items-center text-center" : "items-start",
+              )}
+            >
+              <div className={cn("max-w-2xl", align === "center" && "mx-auto")}>
+                <h2 className="font-display text-balance text-3xl font-semibold leading-[1.06] tracking-[-0.02em] sm:text-5xl">
+                  {title}
+                </h2>
+                {description ? (
+                  <p
+                    className={cn(
+                      "mt-4 text-pretty text-base leading-7 sm:text-lg",
+                      align === "center" && "mx-auto max-w-xl",
+                    )}
+                  >
+                    {description}
+                  </p>
+                ) : null}
+              </div>
+              <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  },
+);
+CTAPanel.displayName = "CTAPanel";

package/src/components/CTA/variants/Surface.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/cn";
+import { Container } from "../../Container";
+import { CTAActions } from "../parts";
+import type { CTAProps } from "../types";
+
+/** surface — quiet paper band: hairline rule, big display type, actions right. */
+export const CTASurface = forwardRef<HTMLElement, CTAProps>(
+  ({ className, title, description, action, secondaryAction, align = "left", id, ...props }, ref) => (
+    <section ref={ref} id={id} className={cn("w-full", className)} {...props}>
+      <Container className="py-20 sm:py-24">
+        <div
+          className={cn(
+            "flex flex-col gap-10 border-t border-border pt-14 sm:flex-row sm:items-end sm:justify-between sm:pt-16",
+            align === "center" && "items-center text-center sm:flex-col sm:items-center",
+          )}
+        >
+          <div className={cn("max-w-3xl", align === "center" && "mx-auto")}>
+            <h2 className="font-display text-4xl font-semibold leading-[1.03] tracking-[-0.03em] text-balance text-foreground sm:text-6xl">
+              {title}
+            </h2>
+            {description ? (
+              <p className={cn("mt-5 max-w-xl text-pretty text-base leading-7 text-muted-foreground sm:text-lg", align === "center" && "mx-auto")}>
+                {description}
+              </p>
+            ) : null}
+          </div>
+          <CTAActions action={action} secondaryAction={secondaryAction} align={align} />
+        </div>
+      </Container>
+    </section>
+  ),
+);
+CTASurface.displayName = "CTASurface";

package/src/components/FAQ/FAQ.tsx

@@ -0,0 +1,48 @@
+import type { FAQProps } from "./types";
+import { FaqCards } from "./variants/Cards";
+import { FaqAccordion } from "./variants/Accordion";
+import { FaqSplit } from "./variants/Split";
+
+export const FAQ = ({
+  className,
+  items,
+  option = "accordion",
+  allowMultiple = false,
+  defaultOpen = [],
+  eyebrow,
+  title,
+  description,
+  ...props
+}: FAQProps) => {
+  if (option === "cards") {
+    return <FaqCards className={className} items={items} eyebrow={eyebrow} {...props} />;
+  }
+
+  if (option === "split") {
+    return (
+      <FaqSplit
+        className={className}
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+        eyebrow={eyebrow}
+        title={title}
+        description={description}
+        {...props}
+      />
+    );
+  }
+
+  // accordion
+  return (
+    <div className="mx-auto w-full max-w-3xl">
+      <FaqAccordion
+        className={className}
+        items={items}
+        allowMultiple={allowMultiple}
+        defaultOpen={defaultOpen}
+      />
+    </div>
+  );
+};
+FAQ.displayName = "FAQ";

package/src/components/FAQ/index.ts

@@ -0,0 +1,2 @@
+export { FAQ } from "./FAQ";
+export type { FAQProps, FAQOption, FaqItem } from "./types";

package/src/components/FAQ/parts.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useState } from "react";
+import { cn } from "../../utils/cn";
+import { Plus } from "../../icons";
+import type { FaqItem } from "./types";
+
+export function useFaqState(allowMultiple: boolean, defaultOpen: number[]) {
+  const [openSet, setOpenSet] = useState<Set<number>>(
+    () => new Set(allowMultiple ? defaultOpen : defaultOpen.slice(0, 1)),
+  );
+
+  const toggle = (index: number) => {
+    setOpenSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        if (!allowMultiple) next.clear();
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  return { openSet, toggle, isOpen: (i: number) => openSet.has(i) };
+}
+
+export function FaqItemRow({
+  item,
+  open,
+  onToggle,
+  style,
+}: {
+  item: FaqItem;
+  open: boolean;
+  onToggle: () => void;
+  style: "boxed" | "bare";
+}) {
+  return (
+    <div>
+      <h3>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={onToggle}
+          className={
+            style === "boxed"
+              ? "flex w-full cursor-pointer items-center justify-between gap-4 px-6 py-5 text-left text-[15px] font-medium text-foreground transition-colors duration-150 hover:bg-surface-strong/60 focus-visible:outline-none"
+              : "flex w-full cursor-pointer items-center justify-between gap-4 py-5 text-left text-base font-semibold text-foreground transition-colors duration-150 focus-visible:outline-none"
+          }
+        >
+          {item.question}
+          <Plus
+            className={cn(
+              "h-4.5 w-4.5 shrink-0 text-foreground/45 transition-transform duration-200 sm:h-5 sm:w-5",
+              open && "rotate-45 text-primary",
+            )}
+          />
+        </button>
+      </h3>
+      {open ? (
+        <p className={style === "boxed" ? "px-6 pb-6 text-sm leading-7 text-muted-foreground" : "pb-6 text-sm leading-7 text-muted-foreground"}>
+          {item.answer}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function FaqEyebrow({ label }: { label: string }) {
+  return (
+    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">{label}</p>
+  );
+}