nextworks 0.0.1 → 0.1.0-alpha.1

package/dist/kits/blocks/app/templates/saasdashboard/components/Dashboard.tsx

@@ -0,0 +1,293 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+type FloatingCard = {
+  position: string;
+  icon: string;
+  text: string;
+};
+
+type Stat = {
+  value: string;
+  label: string;
+};
+
+interface DashboardProps {
+  stats: Stat[];
+  projects: string[];
+  floatingCards: FloatingCard[];
+  activeTab?: string;
+  navItems?: string[];
+}
+
+export function Dashboard({
+  stats,
+  projects,
+  floatingCards,
+  activeTab = "Analytics",
+  navItems = ["Analytics", "Projects", "Team"],
+}: DashboardProps) {
+  return (
+    <div className="relative isolate">
+      <DashboardMockup
+        stats={stats}
+        projects={projects}
+        activeTab={activeTab}
+        navItems={navItems}
+      />
+
+      {floatingCards.map(({ position, icon, text }) => (
+        <FloatingCard
+          key={position}
+          position={position}
+          icon={icon}
+          text={text}
+        />
+      ))}
+
+      <style jsx>{`
+        .dashboard-mockup {
+          transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
+          transition: transform 0.3s ease;
+          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+        }
+        .dashboard-mockup:hover {
+          transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
+        }
+        .trend-line {
+          clip-path: polygon(
+            0 100%,
+            20% 80%,
+            40% 85%,
+            60% 60%,
+            80% 50%,
+            100% 20%
+          );
+        }
+        @keyframes growUp {
+          0% {
+            height: 0;
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }
+        @keyframes floatAnim {
+          0%,
+          100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-20px);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function DashboardMockup({
+  stats,
+  projects,
+  activeTab,
+  navItems,
+}: {
+  stats: Stat[];
+  projects: string[];
+  activeTab?: string;
+  navItems?: string[];
+}) {
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
+  const targetTilt = useRef({ rx: 0, ry: 0 });
+  const rafId = useRef<number | null>(null);
+
+  const animate = () => {
+    setTilt((prev) => {
+      const smoothing = 0.15;
+      const nextRx = prev.rx + (targetTilt.current.rx - prev.rx) * smoothing;
+      const nextRy = prev.ry + (targetTilt.current.ry - prev.ry) * smoothing;
+      return { rx: nextRx, ry: nextRy };
+    });
+    rafId.current = requestAnimationFrame(animate);
+  };
+
+  const handleMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const rx = (y / rect.height - 0.5) * -6; // rotateX up to ~±3deg
+    const ry = (x / rect.width - 0.5) * 6; // rotateY up to ~±3deg
+    targetTilt.current = { rx, ry };
+    if (rafId.current == null) rafId.current = requestAnimationFrame(animate);
+  };
+
+  const handleLeave = () => {
+    targetTilt.current = { rx: 0, ry: 0 };
+  };
+
+  useEffect(() => {
+    return () => {
+      if (rafId.current != null) cancelAnimationFrame(rafId.current);
+    };
+  }, []);
+  return (
+    <div
+      className={
+        "dashboard-mockup transform-gpu rounded-2xl border border-blue-500/20 p-6 shadow-2xl ring-1 ring-blue-500/10 backdrop-blur transition-transform duration-150 ease-out motion-reduce:transition-none " +
+        "bg-slate-900/80 dark:bg-slate-900/80"
+      }
+      style={{
+        willChange: "transform",
+        transform: `perspective(1000px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+      }}
+      onMouseMove={handleMove}
+      onMouseLeave={handleLeave}
+    >
+      <DashboardHeader activeTab={activeTab} navItems={navItems} />
+      <DashboardGrid stats={stats} projects={projects} />
+    </div>
+  );
+}
+
+function DashboardHeader({
+  activeTab = "Analytics",
+  navItems = ["Analytics", "Projects", "Team"],
+}: {
+  activeTab?: string;
+  navItems?: string[];
+}) {
+  return (
+    <div className="mb-6 flex items-center justify-between border-b border-blue-500/10 pb-4">
+      <div className="text-[1.1rem] font-semibold text-slate-200">
+        Business Overview
+      </div>
+      <div className="hidden gap-3 md:flex">
+        {navItems.map((item) => (
+          <div
+            key={item}
+            className={
+              "rounded-md px-3 py-2 text-sm " +
+              (item === activeTab
+                ? "bg-gradient-to-br from-blue-500 to-purple-500 text-white"
+                : "bg-blue-500/10 text-blue-400")
+            }
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function DashboardGrid({
+  stats,
+  projects,
+}: {
+  stats: Stat[];
+  projects: string[];
+}) {
+  return (
+    <div className="mb-4 grid grid-cols-[2fr_1fr] gap-4">
+      <ChartArea />
+      <StatsPanel stats={stats} />
+      <ProjectList projects={projects} />
+    </div>
+  );
+}
+
+function ChartArea() {
+  const barHeights = [30, 45, 35, 60, 55, 75, 70, 85, 90, 100];
+  return (
+    <div className="relative overflow-hidden rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Revenue Growth</div>
+      <div
+        className="relative h-32 overflow-hidden rounded-md"
+        style={{
+          background:
+            "linear-gradient(45deg, transparent 20%, rgba(59,130,246,0.1) 20%, rgba(59,130,246,0.1) 40%, transparent 40%, transparent 60%, rgba(139,92,246,0.1) 60%, rgba(139,92,246,0.1) 80%, transparent 80%)",
+        }}
+      >
+        <div className="absolute inset-[10px] flex items-end gap-[3px]">
+          {barHeights.map((h, i) => (
+            <div
+              key={i}
+              className="flex-1 rounded-t bg-gradient-to-b from-blue-500 to-purple-500"
+              style={{
+                minHeight: "20px",
+                height: `${h}%`,
+                animation: "growUp 2s ease-out both",
+                animationDelay: `${(i + 1) * 0.1}s`,
+              }}
+            />
+          ))}
+        </div>
+        <div className="trend-line absolute top-5 right-[5%] left-[5%] h-[2px] rounded bg-gradient-to-r from-emerald-500 to-blue-500 opacity-80" />
+      </div>
+    </div>
+  );
+}
+
+function StatsPanel({ stats }: { stats: Stat[] }) {
+  return (
+    <div className="flex flex-col gap-2">
+      {stats.map((s, i) => (
+        <div
+          key={i}
+          className="rounded-lg border border-blue-500/10 bg-slate-900/50 p-3"
+        >
+          <div className="text-lg font-bold text-blue-500">{s.value}</div>
+          <div className="text-[0.7rem] text-slate-400 uppercase">
+            {s.label}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ProjectList({ projects }: { projects: string[] }) {
+  return (
+    <div className="col-span-2 rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Active Projects</div>
+      <div className="flex flex-wrap gap-2">
+        {projects.map((p, i) => (
+          <div
+            key={i}
+            className="rounded border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/10 px-2 py-2 text-[0.8rem] text-slate-200"
+          >
+            {p}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FloatingCard({ position, icon, text }: FloatingCard) {
+  const positionClasses =
+    position === "card-1"
+      ? "top-[10%] right-[6%]"
+      : position === "card-2"
+        ? "bottom-[20%] left-[2%]"
+        : "top-0 left-0";
+
+  return (
+    <div
+      className={[
+        "absolute z-10 transform-gpu rounded-lg border border-blue-500/20 p-4 shadow-lg",
+        "animate-[floatAnim_6s_ease-in-out_infinite]",
+        "bg-slate-800 dark:bg-slate-900",
+        positionClasses,
+      ].join(" ")}
+      style={{ willChange: "transform" }}
+    >
+      <div className="mb-2 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-purple-500 text-sm text-white">
+        {icon}
+      </div>
+      <div className="text-sm text-slate-300">{text}</div>
+    </div>
+  );
+}

package/dist/kits/blocks/app/templates/saasdashboard/components/FAQ.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { FAQ as SharedFAQ } from "@/components/sections/FAQ";
+
+const defaultFAQArray = [
+  {
+    question: "Can I migrate from other tools?",
+    answer: "Yes, we help with data import.",
+  },
+  {
+    question: "What integrations are available?",
+    answer: "50+ apps including Slack, Google, Zapier.",
+  },
+  { question: "How long does setup take?", answer: "Less than 15 minutes." },
+  {
+    question: "Is there a free trial?",
+    answer: "Yes — start a 14-day free trial with no credit card required.",
+  },
+  {
+    question: "What support do you offer?",
+    answer: "Email, chat, and dedicated onboarding for paid plans.",
+  },
+  {
+    question: "Are there discounts for teams or annual billing?",
+    answer:
+      "Yes — we offer team pricing and discounts for annual subscriptions.",
+  },
+];
+
+export function FAQ() {
+  return (
+    <SharedFAQ
+      faqData={defaultFAQArray}
+      faqSectionHeaderText="Frequently Asked Questions"
+      section={{ className: "py-10 px-5 bg-background text-[var(--card-fg)]" }}
+      heading={{
+        className:
+          "text-3xl font-bold font-inter text-center mb-6 text-[var(--heading-fg)]",
+      }}
+      grid={{ className: "grid grid-cols-2 gap-4" }}
+      item={{ className: "mb-0" }}
+      questionButton={{
+        className:
+          "p-5 rounded-lg transition-all duration-200 flex items-center justify-between cursor-pointer shadow-lg hover:shadow-xl hover:-translate-y-0.5 font-inter bg-gradient-to-r from-sky-600 to-sky-700 hover:from-sky-700 hover:to-sky-800 text-white [--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)] [--btn-border:theme(colors.sky.500)] dark:[--btn-border:theme(colors.sky.400)]",
+      }}
+      questionText={{ className: "font-inter font-semibold text-base" }}
+      answer={{
+        className:
+          "mt-1 rounded-lg bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+      }}
+      answerText={{ className: "font-inter text-base text-[var(--card-fg)]" }}
+      allowMultipleOpen={true}
+    />
+  );
+}

package/dist/kits/blocks/app/templates/saasdashboard/components/Features.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Features as SharedFeatures } from "@/components/sections/Features";
+import { cn } from "@/lib/utils";
+
+const defaultFeaturesData = [
+  {
+    imageSrc: "/placeholders/saas_dashboard/projectBoard.png",
+    imageAlt: "Project Management Dashboard",
+    headingText: "Track Every Project",
+    subheadingText:
+      "Kanban boards, Gantt charts, and timeline views keep your team aligned and deadlines met",
+  },
+  {
+    imageSrc: "/placeholders/saas_dashboard/analytics.png",
+    imageAlt: "Analytics Dashboard",
+    headingText: "Data-Driven Insights",
+    subheadingText:
+      "Real-time metrics, custom reports, and forecasting tools to make smarter business decisions",
+  },
+  {
+    imageSrc: "/placeholders/saas_dashboard/chat.png",
+    imageAlt: "Team Collaboration Tools",
+    headingText: "Seamless Teamwork",
+    subheadingText:
+      "Built-in chat, file sharing, and @mentions keep everyone connected and productive",
+  },
+];
+
+export function Features() {
+  return (
+    <SharedFeatures
+      sectionHeading="Everything You Need to Run Your Business"
+      sectionSubheading="Powerful tools and insights to streamline your workflow and boost productivity"
+      featuresData={defaultFeaturesData}
+      className={cn("relative")}
+      section={{ className: "py-16 md:py-20 lg:py-24 bg-background" }}
+      container={{ className: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8" }}
+      header={{ className: "text-center mb-12 md:mb-16" }}
+      heading={{
+        className: cn(
+          "font-inter mb-4 text-3xl font-bold text-[var(--heading-fg)] md:text-4xl lg:text-5xl",
+        ),
+      }}
+      subheading={{
+        className: cn(
+          "font-inter mx-auto max-w-3xl text-lg leading-relaxed text-[var(--subheading-fg)] md:text-xl",
+        ),
+      }}
+      grid={{
+        className:
+          "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8",
+      }}
+      cardWrapper={{
+        className:
+          "group motion-reduce:transform-none motion-reduce:transition-none",
+      }}
+      card={{
+        className:
+          "h-full transition-all duration-300 hover:-translate-y-2 hover:shadow-xl bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] rounded-lg shadow-md overflow-hidden",
+      }}
+      image={{
+        className:
+          "w-full h-48 md:h-56 object-cover transition-transform duration-300 group-hover:scale-[1.03]",
+      }}
+      cardHeading={{
+        className: cn(
+          "font-inter mb-3 text-xl leading-tight font-semibold text-[var(--card-title-fg)] md:text-2xl",
+        ),
+      }}
+      cardSubheading={{
+        className: cn(
+          "font-inter text-sm leading-relaxed text-[var(--card-muted-fg)] md:text-base",
+        ),
+      }}
+      // Motion config showcasing upgraded API
+      motionConfig={{
+        initial: { opacity: 0, y: 12 },
+        whileInView: { opacity: 1, y: 0 },
+        viewport: { once: true, amount: 0.2 },
+        transition: {
+          type: "spring",
+          stiffness: 125,
+          damping: 50,
+          delay: 0.12,
+        },
+      }}
+      ariaLabel="Features section"
+    />
+  );
+}

package/dist/kits/blocks/app/templates/saasdashboard/components/Footer.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Footer as SharedFooter } from "@/components/sections/Footer";
+import { cn } from "@/lib/utils";
+
+const defaultNavLinks = [
+  {
+    heading: "Product",
+    links: [
+      { name: "Features", href: "#features" },
+      { name: "Pricing", href: "#pricing" },
+      { name: "Documentation", href: "#documentation" },
+      { name: "FAQ", href: "#faq" },
+    ],
+  },
+  {
+    heading: "Company",
+    links: [
+      { name: "About", href: "#about" },
+      { name: "Careers", href: "#careers" },
+      { name: "Blog", href: "#blog" },
+      { name: "Contact", href: "#contact" },
+    ],
+  },
+  {
+    heading: "Resources",
+    links: [
+      { name: "Help Center", href: "#help" },
+      { name: "Terms of Service", href: "#terms" },
+      { name: "Privacy Policy", href: "#privacy" },
+      { name: "Status", href: "#status" },
+    ],
+  },
+];
+
+export function Footer() {
+  return (
+    <SharedFooter
+      footerBrandName="Dash Flow"
+      footerNavLinks={defaultNavLinks}
+      className={cn("w-full")}
+      section={{
+        className:
+          "w-full bg-blue-50 dark:bg-gray-900 text-gray-800 dark:text-white",
+      }}
+      container={{ className: "max-w-7xl mx-auto px-6" }}
+      brand={{
+        className:
+          "text-xl font-bold text-blue-600 dark:text-blue-400 font-outfit",
+      }}
+      brandWrapper={{
+        className: "flex flex-col items-start text-left lg:pr-8",
+      }}
+      navSection={{
+        className:
+          "flex flex-col lg:flex-row items-start lg:items-start justify-center gap-8 lg:gap-12 pt-6.5 pb-8",
+      }}
+      navGroup={{ className: "flex flex-col items-start text-left pt-1.5" }}
+      navHeading={{
+        className:
+          "font-semibold text-gray-800 dark:text-white mb-3 text-xs uppercase tracking-wider font-inter",
+      }}
+      navLink={{
+        className:
+          "text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-xs mb-2 block font-inter",
+      }}
+      socialSection={{
+        className: "flex items-center justify-center gap-4 py-4",
+      }}
+      copyright={{
+        className:
+          "text-center text-xs text-gray-500 dark:text-gray-400 py-4 border-t border-gray-200 dark:border-gray-700 font-inter",
+      }}
+      ariaLabel="Footer section"
+    />
+  );
+}

package/dist/kits/blocks/app/templates/saasdashboard/components/Hero.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
+import { Dashboard } from "./Dashboard";
+import { cn } from "@/lib/utils";
+
+const stats = [
+  { value: "$124K", label: "Monthly Revenue" },
+  { value: "+23%", label: "Growth Rate" },
+  { value: "847", label: "Active Users" },
+];
+
+const projects = ["Website Redesign", "Mobile App v2.0", "Marketing Campaign"];
+
+const floatingCards = [
+  { position: "card-1", icon: "📊", text: "Real-time Analytics" },
+  { position: "card-2", icon: "👥", text: "Team Collaboration" },
+];
+
+const activeTab = "Analytics";
+const navItems = ["Analytics", "Projects", "Team"];
+
+export function Hero() {
+  return (
+    <div className="relative">
+      <SharedHeroSplit
+        className={cn("relative")}
+        heading={{
+          text: "Manage Your Entire Business From One Powerful Dashboard",
+          className:
+            "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight font-inter text-[var(--heading-fg)]",
+        }}
+        subheading={{
+          text: "Stop switching between 12 different apps. DashFlow combines project management, analytics, team chat, and customer insights in one beautiful interface.",
+          className:
+            "text-base md:text-lg mt-6 mb-8 max-w-2xl font-inter font-normal text-[var(--subheading-fg)]",
+        }}
+        section={{
+          className:
+            "relative pt-1 px-8 pb-8 bg-[var(--hero-bg)] dark:bg-[var(--hero-bg)]",
+        }}
+        cta1={{
+          label: "Start Free Trial",
+          href: "#contact",
+          variant: "default",
+          size: "lg",
+          className: [
+            "text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
+            "[--btn-bg:theme(colors.sky.600)]",
+            "hover:[--btn-hover-bg:theme(colors.sky.700)]",
+            "[--btn-fg:theme(colors.white)]",
+            "hover:[--btn-hover-fg:theme(colors.white)]",
+          ].join(" "),
+        }}
+        cta2={{
+          label: "Watch demo",
+          href: "#demo",
+          variant: "outline",
+          size: "lg",
+          className: [
+            "text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
+            "[--btn-fg:theme(colors.sky.600)]",
+            "[--btn-border:theme(colors.sky.600)]",
+            "hover:[--btn-hover-bg:theme(colors.sky.50)]",
+            "hover:[--btn-hover-fg:theme(colors.sky.600)]",
+            "dark:[--btn-fg:theme(colors.sky.500)]",
+            "dark:[--btn-border:theme(colors.sky.500)]",
+            "dark:hover:[--btn-hover-bg:theme(colors.sky.950)]",
+            "dark:hover:[--btn-hover-fg:theme(colors.sky.500)]",
+          ].join(" "),
+        }}
+        image={{ src: undefined, alt: "Dashboard preview" }}
+        imageLayout="padded"
+        fallback={
+          <div className="flex h-full w-full items-center justify-center">
+            <div className="relative w-[min(100%,720px)] overflow-hidden rounded-xl bg-white p-0 p-1 opacity-100 md:pt-8 lg:pt-1 dark:bg-blue-950">
+              <Dashboard
+                stats={stats}
+                projects={projects}
+                floatingCards={floatingCards}
+                navItems={navItems}
+                activeTab={activeTab}
+              />
+            </div>
+          </div>
+        }
+        imageContainer={{
+          className:
+            "pl-0 relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[32rem] md:h-[34rem] lg:h-[33rem] md:w-1/2 mb-0 md:mb-0 lg:mb-0 opacity-100",
+          // "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[28rem] md:w-1/2 mb-6 md:mb-0",
+        }}
+        textContainer={{ className: "flex-1 p-5 lg:p-8" }}
+        buttonsContainer={{
+          className: [
+            "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
+            "[--btn-ring:theme(colors.sky.500)]",
+            "dark:[--btn-ring:theme(colors.sky.400)]",
+          ].join(" "),
+        }}
+        textAlign="center"
+        ariaLabel="DashFlow hero section"
+      />
+    </div>
+  );
+}