jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/marketing/feature-section-3/render.jsx

@@ -0,0 +1,105 @@
+iimport { Zap, DollarSign, Sparkles, Wand2, ArrowUpRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { Card, CardContent } from "@/components/ui/card";
+
+const features = [
+  {
+    icon: Zap,
+    title: "Rapid Generation",
+    description:
+      "Accelerate content creation instantly with workflows far faster than traditional writing methods.",
+    color: "purple",
+    highlighted: true,
+  },
+  {
+    icon: DollarSign,
+    title: "Cost Effective",
+    description:
+      "Significantly reduce production expenses with no need for professional writers tools.",
+    color: "purple",
+    highlighted: false,
+  },
+  {
+    icon: Sparkles,
+    title: "Premium Quality Output",
+    description:
+      "Produce natural, polished, and high-standard content automatically every single time you generate.",
+    color: "purple",
+    highlighted: false,
+  },
+  {
+    icon: Wand2,
+    title: "Flexible Customization",
+    description:
+      "Enjoy a fast, highly intuitive generation process using advanced, easy-to-control customization tools.",
+    color: "purple",
+    highlighted: false,
+  },
+];
+
+export default function FeatureSectionThree() {
+  return (
+    <section className="py-14 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="mb-12 grid max-w-3xl gap-4 md:items-start lg:max-w-max lg:grid-cols-2 lg:gap-12">
+          <h2 className="text-3xl leading-tight font-bold text-balance md:text-4xl">
+            Generate{" "}
+            <span className="bg-linear-to-r from-purple-500 to-blue-600 bg-clip-text text-transparent">
+              exceptional
+            </span>{" "}
+            content instantly!
+          </h2>
+
+          <div className="flex flex-col gap-4">
+            <p className="text-muted-foreground text-balance md:text-lg">
+              Transform Concepts into Content in Minutes: Empower Your Writing
+              Process with Our AI Content Generator
+            </p>
+            <Button size="lg" className="w-fit">
+              Try ContentAI
+              <ArrowUpRight />
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+
+            return (
+              <Card
+                key={feature.title}
+                className="group hover:border-primary relative shadow-none transition-colors"
+              >
+                <CardContent>
+                  <div className="mb-4">
+                    <div className="bg-primary inline-flex size-12 items-center justify-center rounded-full">
+                      <Icon className="text-primary-foreground size-5 transition-transform group-hover:rotate-12" />
+                    </div>
+                  </div>
+
+                  <h4 className="text-foreground mb-2 md:text-lg font-medium">
+                    {feature.title}
+                  </h4>
+
+                  <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
+                    {feature.description}
+                  </p>
+
+                  <Link
+                    href="#"
+                    className="text-foreground inline-flex items-center gap-1 text-sm font-medium transition-colors hover:underline"
+                  >
+                    Learn more
+                    <ArrowUpRight className="size-3 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                  </Link>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/feature-section-4/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/feature-section-4/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/feature-section-4/render.jsx

@@ -0,0 +1,127 @@
+import {
+  FileText,
+  Calendar,
+  Puzzle,
+  BookOpen,
+  BarChart3,
+  Presentation,
+} from "lucide-react";
+import Image from "next/image";
+
+const features = [
+  {
+    icon: FileText,
+    title: "Performance Metrics",
+    description: "Discover the impact of our platform's analytics and outcomes",
+    side: "left",
+  },
+  {
+    icon: Calendar,
+    title: "Scheduled Events",
+    description:
+      "Structured to deliver the tools and networking opportunities you require",
+    side: "left",
+  },
+  {
+    icon: Puzzle,
+    title: "Third-Party Connections",
+    description:
+      "Unify your applications and information. Connect with numerous external services.",
+    side: "left",
+  },
+  {
+    icon: BookOpen,
+    title: "Expert Documentation",
+    description:
+      "Comprehensive guide covering all capabilities to maximize platform utilization",
+    side: "right",
+  },
+  {
+    icon: BarChart3,
+    title: "Live Analytics",
+    description:
+      "Access instant visibility into performance and enable teams to monitor their progress",
+    side: "right",
+  },
+  {
+    icon: Presentation,
+    title: "Project Planning",
+    description:
+      "Design and arrange workflows as needed. Efficiently managing assignments.",
+    side: "right",
+  },
+];
+
+export default function FeatureSectionFour() {
+  return (
+    <section className="py-14 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4">
+        <header className="mx-auto mb-12 max-w-3xl text-center">
+          <h2 className="text-foreground mb-4 text-3xl md:text-4xl font-bold">
+            Our Advanced Capabilities
+          </h2>
+          <p className="text-muted-foreground md:text-lg">
+            Leveraging innovation to make analytics clearer, more intelligent
+            and more valuable.
+          </p>
+        </header>
+
+        <div className="relative">
+          <div className="grid justify-center gap-4 lg:gap-12 lg:grid-cols-12 lg:items-center">
+            <div className="space-y-8 lg:col-span-3">
+              {features
+                .filter((f) => f.side === "left")
+                .map((feature) => {
+                  const Icon = feature.icon;
+                  return (
+                    <div key={feature.title} className="space-y-2 md:space-y-3">
+                      <div className="bg-primary/10 inline-flex size-12 items-center justify-center rounded-full">
+                        <Icon className="size-5" />
+                      </div>
+                      <h3 className="text-foreground md:text-lg font-medium">
+                        {feature.title}
+                      </h3>
+                      <p className="text-muted-foreground text-sm leading-relaxed">
+                        {feature.description}
+                      </p>
+                    </div>
+                  );
+                })}
+            </div>
+
+            <figure className="w-full flex-1 lg:col-span-6">
+              <Image
+                src="https://images.unsplash.com/photo-1551721434-8b94ddff0e6d?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Feature Section 4"
+                width={500}
+                height={1000}
+                className="w-full aspect-square object-cover rounded-lg"
+              />
+            </figure>
+
+            <div className="space-y-8 lg:col-span-3">
+              {features
+                .filter((f) => f.side === "right")
+                .map((feature) => {
+                  const Icon = feature.icon;
+                  return (
+                    <div key={feature.title} className="space-y-2 md:space-y-3">
+                      <div className="bg-primary/10 inline-flex size-12 items-center justify-center rounded-full">
+                        <Icon className="size-5" />
+                      </div>
+                      <h3 className="text-foreground md:text-lg font-medium">
+                        {feature.title}
+                      </h3>
+                      <p className="text-muted-foreground text-sm leading-relaxed">
+                        {feature.description}
+                      </p>
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/feature-section-5/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/feature-section-5/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/feature-section-5/render.jsx

@@ -0,0 +1,78 @@
+import { Link2, ThumbsUp, Grid2x2, Clock } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import Image from "next/image";
+
+const features = [
+  {
+    icon: Link2,
+    title: "Streamline Profile Updates",
+    description:
+      "Enjoy the straightforward approach of our platform's profile management system.",
+  },
+  {
+    icon: ThumbsUp,
+    title: "Highly Adaptable",
+    description:
+      "System is built to be versatile and configurable, allowing you to customize it according to your specific requirements.",
+  },
+  {
+    icon: Grid2x2,
+    title: "Diverse Solutions",
+    description:
+      "Offers you numerous choices of industry solutions to enhance your experience with our platform",
+  },
+  {
+    icon: Clock,
+    title: "Rapid Processing",
+    description:
+      "Enhance your productivity and increase your efficiency with our high-performance infrastructure",
+  },
+];
+
+export default function FeatureSectionFive() {
+  return (
+    <section className="py-14 sm:py-20">
+      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <header className="mx-auto mb-12 max-w-xl space-y-2 text-center">
+          <Badge variant="outline">Our 300+ Integration Options</Badge>
+          <h2 className="text-foreground text-3xl leading-tight font-bold text-balance lg:text-4xl">
+            Build Better Customer Relationships
+          </h2>
+        </header>
+
+        <div className="grid gap-12 lg:grid-cols-2 lg:items-center lg:gap-16">
+          <div className="space-y-8">
+            {features.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="flex gap-4">
+                  <div className="shrink-0">
+                    <div className="bg-primary/10 mt-1 inline-flex size-10 items-center justify-center rounded-lg">
+                      <Icon className="size-4" />
+                    </div>
+                  </div>
+                  <div className="flex-1 space-y-1.5">
+                    <h3 className="font-medium">{feature.title}</h3>
+                    <p className="text-muted-foreground text-sm leading-relaxed text-balance">
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <figure className="relative">
+            <Image
+              src="https://images.unsplash.com/photo-1551721434-8b94ddff0e6d?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Feature Section 5"
+              width={500}
+              height={1000}
+              className="aspect-square rounded-lg object-cover"
+            />
+          </figure>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/feature-section-6/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/feature-section-6/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/feature-section-6/render.jsx

@@ -0,0 +1,79 @@
+iimport { CheckCircle2, Layers, Lock, ThumbsUp } from "lucide-react";
+import Image from "next/image";
+
+const features = [
+  {
+    icon: CheckCircle2,
+    title: "Data Protection",
+    description:
+      "Advanced privacy controls ensure your confidential information and personal details remain protected.",
+  },
+  {
+    icon: Layers,
+    title: "Zero Cost Transfers",
+    description:
+      "No transfer charges, allowing you to reduce expenses and optimize your financial returns.",
+  },
+  {
+    icon: Lock,
+    title: "Enhanced Protection",
+    description:
+      "Enjoy the confidence that comes with understanding your information is fully safeguarded.",
+  },
+  {
+    icon: ThumbsUp,
+    title: "Unified Platform",
+    description:
+      "Comprehensive platform guarantees that you can effortlessly handle all your business requirements.",
+  },
+];
+
+export default function FeatureSectionSix() {
+  return (
+    <section className="py-14 sm:py-20">
+      <div className="mx-auto max-w-5xl space-y-8 px-4 md:space-y-12">
+        <header className="max-w-xl space-y-4">
+          <h2 className="text-3xl leading-tight font-bold text-balance md:text-4xl">
+            Seamless collaboration tools for your team
+          </h2>
+          <p className="text-muted-foreground md:text-lg">
+            Rely on the precision and clarity of our platform&apos;s
+            collaboration features, which deliver instant synchronization and
+            alerts on your team activities and project updates.
+          </p>
+        </header>
+
+        <div className="grid gap-12 lg:grid-cols-5 lg:items-center">
+          <div className="grid gap-6 sm:grid-cols-2 lg:col-span-3">
+            {features.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div key={feature.title} className="space-y-3">
+                  <div className="inline-flex size-10 items-center justify-center rounded-lg border">
+                    <Icon className="size-4" />
+                  </div>
+                  <h3 className="text-foreground font-medium md:text-lg">
+                    {feature.title}
+                  </h3>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {feature.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+
+          <figure className="relative lg:col-span-2">
+            <Image
+              src="https://images.unsplash.com/photo-1551721434-8b94ddff0e6d?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Feature Section 5"
+              width={300}
+              height={1000}
+              className="aspect-square w-full rounded-lg object-cover"
+            />
+          </figure>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/feature-section-7/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/feature-section-7/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/marketing/feature-section-7/render.jsx

@@ -0,0 +1,138 @@
+import {
+  User,
+  Palette,
+  Monitor,
+  Layers,
+  Clock,
+  Heart,
+  ArrowRight,
+  Cloud,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+
+const features = [
+  {
+    icon: User,
+    title: "User-centric approach",
+    description:
+      "Focusing on user experience to create functional and scalable cloud solutions.",
+  },
+  {
+    icon: Palette,
+    title: "Custom infrastructure solutions",
+    description:
+      "Tailored cloud setups that perfectly align with your business goals and technical requirements.",
+  },
+  {
+    icon: Monitor,
+    title: "Multi-platform compatibility",
+    description:
+      "Ensuring seamless performance across all devices and platforms, from servers to mobile clients.",
+  },
+  {
+    icon: Layers,
+    title: "Collaborative deployment",
+    description:
+      "Working together to transform your infrastructure needs into robust cloud architectures.",
+  },
+  {
+    icon: Clock,
+    title: "Timely deployment",
+    description:
+      "Committed to delivering high-quality infrastructure solutions on time, every time.",
+  },
+  {
+    icon: Heart,
+    title: "Ongoing support",
+    description:
+      "Providing continuous assistance to keep your cloud infrastructure optimized and secure.",
+  },
+];
+
+export default function FeatureSectionSeven() {
+  return (
+    <section className="py-14 sm:py-16">
+      <div className="mx-auto max-w-7xl space-y-10 px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-4 lg:grid-cols-2 lg:items-start lg:gap-8">
+          <div className="space-y-4">
+            <Badge
+              variant="outline"
+              className="text-[10px] font-light tracking-wider uppercase"
+            >
+              <Cloud />
+              Cloud Infrastructure
+            </Badge>
+
+            <h3 className="text-3xl leading-tight font-bold text-balance lg:text-4xl/tight">
+              Building scalable solutions, engineered for your success
+            </h3>
+          </div>
+
+          <div className="flex flex-col justify-center space-y-6">
+            <p className="text-muted-foreground leading-relaxed sm:text-lg">
+              Our cloud infrastructure transforms your business into a
+              high-performance digital ecosystem. From deployment to
+              optimization, we focus on innovative solutions that scale and
+              drive growth.
+            </p>
+
+            <Button className="w-fit">
+              Let&apos;s talk
+              <ArrowRight />
+            </Button>
+          </div>
+        </div>
+
+        <div className="bg-muted overflow-hidden rounded-2xl">
+          <div className="relative aspect-4/2 w-full">
+            <div
+              className="absolute inset-0 opacity-20 dark:opacity-10"
+              style={{
+                backgroundImage: `linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+                  linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)`,
+                backgroundSize: "40px 40px",
+              }}
+            />
+
+            <Image
+              src="https://images.unsplash.com/photo-1708559348128-3cde89847e2b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="Cloud infrastructure"
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-8">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+
+            return (
+              <Card
+                key={feature.title}
+                className="bg-background border-0 py-0 shadow-none"
+              >
+                <CardContent className="p-0">
+                  <div className="mb-4">
+                    <div className="bg-primary/10 inline-flex size-10 items-center justify-center rounded-full">
+                      <Icon className="text-foreground size-4" />
+                    </div>
+                  </div>
+                  <h4 className="text-foreground mb-2 text-lg font-medium">
+                    {feature.title}
+                  </h4>
+                  <p className="text-muted-foreground text-sm leading-relaxed">
+                    {feature.description}
+                  </p>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/marketing/feature-section-8/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/marketing/feature-section-8/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }