shipd 0.1.3 → 0.2.0

package/features/marketing-landing/components/homepage/pricing-section.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Check } from "lucide-react";
+
+const plans = [
+  {
+    name: "Starter",
+    price: "$29",
+    interval: "month",
+    description: "Perfect to kick off your SaaS",
+    highlights: ["All core pages", "UI components", "Auth-ready"],
+    cta: "Get Starter",
+    featured: false,
+  },
+  {
+    name: "Pro",
+    price: "$99",
+    interval: "month",
+    description: "For teams shipping faster",
+    highlights: ["Everything in Starter", "Dashboard layout", "CLI + append"],
+    cta: "Go Pro",
+    featured: true,
+  },
+];
+
+export default function PricingSection() {
+  return (
+    <section id="pricing" className="bg-black px-4 pb-24">
+      <div className="mx-auto max-w-5xl text-center">
+        <div className="mb-12 space-y-4">
+          <h2 className="text-4xl font-semibold bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            Simple, transparent pricing
+          </h2>
+          <p className="text-gray-400 text-lg">
+            Choose a plan that fits your launch. Swap later as you grow.
+          </p>
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {plans.map((plan) => (
+            <Card
+              key={plan.name}
+              className={`bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/30 transition-all duration-300 ${
+                plan.featured ? "shadow-lg shadow-[#ff5722]/10" : ""
+              }`}
+            >
+              <CardHeader className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-2xl text-white">{plan.name}</CardTitle>
+                  {plan.featured && (
+                    <Badge
+                      variant="secondary"
+                      className="bg-[#ff5722]/20 text-[#ff5722] border border-[#ff5722]/30"
+                    >
+                      Popular
+                    </Badge>
+                  )}
+                </div>
+                <CardDescription className="text-gray-400">
+                  {plan.description}
+                </CardDescription>
+                <div className="mt-2">
+                  <span className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">
+                    {plan.price}
+                  </span>
+                  <span className="text-gray-400">/{plan.interval}</span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {plan.highlights.map((item) => (
+                  <div key={item} className="flex items-center gap-3">
+                    <Check className="h-5 w-5 text-[#ff5722]" />
+                    <span className="text-gray-300">{item}</span>
+                  </div>
+                ))}
+              </CardContent>
+              <CardFooter>
+                <Button className="w-full" variant={plan.featured ? "default" : "outline"}>
+                  {plan.cta}
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/features/marketing-landing/components/homepage/testimonials-section.tsx

@@ -0,0 +1,34 @@
+export default function TestimonialsSection() {
+  return (
+    <section className="py-20 px-6 lg:px-0 bg-gradient-to-b from-black via-[#0a0a0a] to-black">
+      <div className="mx-auto max-w-6xl">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            Built for Speed
+          </h2>
+          <p className="text-gray-400 text-xl max-w-2xl mx-auto">
+            Everything you need to launch your SaaS in minutes, not weeks
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="flex flex-wrap items-center justify-center gap-8 text-center">
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">10+</p>
+            <p className="text-gray-400 mt-1">Pre-built Integrations</p>
+          </div>
+          <div className="h-12 w-px bg-[#2a2a2a] hidden sm:block" />
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">24+</p>
+            <p className="text-gray-400 mt-1">UI Components</p>
+          </div>
+          <div className="h-12 w-px bg-[#2a2a2a] hidden sm:block" />
+          <div>
+            <p className="text-4xl font-bold bg-gradient-to-r from-[#ff5722] to-[#ff7043] bg-clip-text text-transparent">5 Min</p>
+            <p className="text-gray-400 mt-1">Setup Time</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/features/marketing-landing/components/logos/BetterAuth.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const BetterAuth = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 500 500"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path fill="#fff" d="M0 0h500v500H0z" />
+    <path fill="#000" d="M69 121h86.988v259H69zM337.575 121H430v259h-92.425z" />
+    <path
+      fill="#000"
+      d="M427.282 121v83.456h-174.52V121zM430 296.544V380H252.762v-83.456z"
+    />
+    <path fill="#000" d="M252.762 204.455v92.089h-96.774v-92.089z" />
+  </svg>
+);
+export default BetterAuth;

package/features/marketing-landing/components/logos/NeonPostgres.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Neon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    preserveAspectRatio="xMidYMid"
+    {...props}
+  >
+    <defs>
+      <linearGradient id="a" x1="100%" x2="12.069%" y1="100%" y2="0%">
+        <stop offset="0%" stopColor="#62F755" />
+        <stop offset="100%" stopColor="#8FF986" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient id="b" x1="100%" x2="40.603%" y1="100%" y2="76.897%">
+        <stop offset="0%" stopOpacity={0.9} />
+        <stop offset="100%" stopColor="#1A1A1A" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+    <path
+      fill="#00E0D9"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#a)"
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="url(#b)"
+      fillOpacity={0.4}
+      d="M0 44.139C0 19.762 19.762 0 44.139 0H211.86C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723h-76.36C19.763 256 0 236.238 0 211.861V44.14Zm44.139-8.825c-4.879 0-8.825 3.946-8.825 8.818v167.73c0 4.878 3.946 8.831 8.818 8.831h77.688c2.44 0 3.087-1.977 3.087-4.416v-101.22c0-25.222 31.914-36.166 47.395-16.255l48.391 62.243V44.14c0-4.879.455-8.825-4.416-8.825H44.14Z"
+    />
+    <path
+      fill="#63F655"
+      d="M211.861 0C236.238 0 256 19.762 256 44.139v142.649c0 25.216-31.915 36.16-47.388 16.256l-48.392-62.251v75.484c0 21.939-17.784 39.723-39.722 39.723a4.409 4.409 0 0 0 4.409-4.409V115.058c0-25.223 31.914-36.167 47.395-16.256l48.391 62.243V8.825c0-4.871-3.953-8.825-8.832-8.825Z"
+    />
+  </svg>
+);
+export default Neon;

package/features/marketing-landing/components/logos/Nextjs.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const Nextjs = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 180 180"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_408_139"
+      style={{
+        maskType: "alpha",
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={180}
+      height={180}
+    >
+      <circle cx={90} cy={90} r={90} fill="black" />
+    </mask>
+    <g mask="url(#mask0_408_139)">
+      <circle
+        cx={90}
+        cy={90}
+        r={87}
+        fill="black"
+        stroke="white"
+        strokeWidth={6}
+      />
+      <path
+        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
+        fill="url(#paint0_linear_408_139)"
+      />
+      <rect
+        x={115}
+        y={54}
+        width={12}
+        height={72}
+        fill="url(#paint1_linear_408_139)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_408_139"
+        x1={109}
+        y1={116.5}
+        x2={144.5}
+        y2={160.5}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_408_139"
+        x1={121}
+        y1={54}
+        x2={120.799}
+        y2={106.875}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset={1} stopColor="white" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default Nextjs;

package/features/marketing-landing/components/logos/Polar.tsx

@@ -0,0 +1,7 @@
+import Image from "next/image";
+
+export default function Polar() {
+  return (
+    <Image src="/polar-sh.svg" alt="Polar Logo" width={100} height={100} />
+  );
+}

package/features/marketing-landing/components/logos/TailwindCSS.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const TailwindCSS = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 54 33"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        fill="#38bdf8"
+        fillRule="evenodd"
+        d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h54v32.4H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default TailwindCSS;

package/features/marketing-landing/components/logos/index.ts

@@ -0,0 +1,6 @@
+export { default as Nextjs } from "./Nextjs";
+export { default as Polar } from "./Polar";
+export { default as BetterAuth } from "./BetterAuth";
+export { default as NeonPostgres } from "./NeonPostgres";
+export { default as TailwindCSS } from "./TailwindCSS";
+export { default as Shadcnui } from "./shadcnui";

package/features/marketing-landing/components/logos/shadcnui.tsx

@@ -0,0 +1,8 @@
+import Image from "next/image";
+
+const Shadcnui = () => {
+  return (
+    <Image src="/shadcn-ui.svg" alt="Shadcnui Logo" width={100} height={100} />
+  );
+};
+export default Shadcnui;

package/features/marketing-landing/feature.config.json

@@ -0,0 +1,23 @@
+{
+  "name": "marketing-landing",
+  "version": "1.0.0",
+  "description": "Landing page module with hero, features, workflow, integrations, pricing, and footer",
+  "files": [
+    "app/page.tsx",
+    "components/homepage/navigation.tsx",
+    "components/homepage/hero-section.tsx",
+    "components/homepage/cli-workflow-section.tsx",
+    "components/homepage/features-section.tsx",
+    "components/homepage/testimonials-section.tsx",
+    "components/homepage/news-section.tsx",
+    "components/homepage/integrations.tsx",
+    "components/homepage/pricing-section.tsx",
+    "components/homepage/footer.tsx",
+    "components/logos/*"
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "envVars": [],
+  "requires": [],
+  "conflicts": []
+}