southpaw 0.2.7

package/ui/blocks/pricing.tsx

@@ -0,0 +1,210 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type PricingPlan = {
+  name: string;
+  price: string;
+  period: string;
+  description: string;
+  features: string[];
+  cta: string;
+  highlighted?: boolean;
+};
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  plans?: PricingPlan[];
+  backgroundColor?: string;
+  textColor?: string;
+  accentColor?: string;
+  py?: number;
+};
+
+const Component = create_component({
+  name: "Pricing",
+  description: "A premium pricing section with tiered plans and feature lists",
+  props: {
+    title: "Simple, transparent pricing",
+    subtitle: "Pricing",
+    accentColor: "primary",
+    description:
+      "Choose the perfect plan for your project's needs. No hidden fees, just straightforward pricing.",
+    py: 120,
+    plans: [
+      {
+        name: "Starter",
+        price: "$0",
+        period: "/mo",
+        description: "Perfect for small personal projects and experiments.",
+        features: [
+          "1 Project",
+          "Basic Analytics",
+          "Unlimited Users",
+          "Free Community Support",
+        ],
+        cta: "Get Started Free",
+        highlighted: false,
+      },
+      {
+        name: "Pro",
+        price: "$49",
+        period: "/mo",
+        description:
+          "Best for growing teams and production-ready applications.",
+        features: [
+          "Unlimited Projects",
+          "Advanced Analytics",
+          "Custom Domain Support",
+          "Priority 24/7 Support",
+        ],
+        cta: "Go Pro Now",
+        highlighted: true,
+      },
+      {
+        name: "Enterprise",
+        price: "$199",
+        period: "/mo",
+        description: "Custom solutions for large-scale operations and teams.",
+        features: [
+          "Custom Security Policies",
+          "Dedicated Infrastructure",
+          "SLA Support",
+          "Advanced API Access",
+        ],
+        cta: "Contact Sales",
+        highlighted: false,
+      },
+    ],
+  } as Props,
+  propsDef: {
+    title: { type: "text", label: "Main Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    description: { type: "text", label: "Description" },
+    backgroundColor: { type: "color", label: "Background Color" },
+    textColor: { type: "color", label: "Text Color" },
+    accentColor: { type: "color", label: "Accent Color" },
+    py: { type: "number", label: "Vertical Padding" },
+    plans: { type: "list-json", label: "Plans (JSON List)" },
+  },
+  render() {
+    const {
+      title,
+      subtitle,
+      description,
+      plans,
+      backgroundColor,
+      textColor,
+      accentColor,
+      py,
+    } = this.props as Required<Props>;
+
+    return (
+      <UI.box py={py} px={40} style={{ backgroundColor }}>
+        <UI.container size="lg">
+          <UI.flex direction="column" align="center" gap={16} mb={80}>
+            {subtitle && (
+              <UI.badge
+                variant="light"
+                color={accentColor}
+                radius="xl"
+                size="lg"
+              >
+                {subtitle}
+              </UI.badge>
+            )}
+            <UI.title
+              text={title}
+              order={2}
+              fz={42}
+              fw={800}
+              ta="center"
+              c={textColor}
+            />
+            <UI.text
+              text={description}
+              size="lg"
+              ta="center"
+              maw={700}
+              c={textColor}
+              opacity={0.7}
+            />
+          </UI.flex>
+
+          <UI.simplegrid cols={{ base: 1, sm: 2, md: 3 }} spacing={32}>
+            {plans?.map((plan, index) => (
+              <UI.card
+                key={index}
+                p={40}
+                radius="xl"
+                shadow={plan.highlighted ? "xl" : "sm"}
+                withBorder
+                style={{
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  borderColor: plan.highlighted
+                    ? `var(--mantine-color-${accentColor?.split(".")[0] || "blue"}-6)`
+                    : undefined,
+                  borderWidth: plan.highlighted ? 2 : 1,
+                  transform: plan.highlighted ? "scale(1.05)" : undefined,
+                  zIndex: plan.highlighted ? 1 : 0,
+                }}
+              >
+                <UI.flex direction="column" gap={12} mb={32}>
+                  <UI.text
+                    text={plan.name}
+                    fw={700}
+                    fz="sm"
+                    tt="uppercase"
+                    lts={1.5}
+                    c={plan.highlighted ? accentColor : "gray.6"}
+                  />
+                  <UI.flex align="flex-end" gap={4}>
+                    <UI.text text={plan.price} fz={42} fw={800} c={textColor} />
+                    <UI.text
+                      text={plan.period}
+                      fz="lg"
+                      fw={500}
+                      c="gray.6"
+                      mb={8}
+                    />
+                  </UI.flex>
+                  <UI.text text={plan.description} fz="sm" c="gray.7" />
+                </UI.flex>
+
+                <UI.flex
+                  direction="column"
+                  gap={12}
+                  mb={40}
+                  style={{ flex: 1 }}
+                >
+                  {plan.features.map((feature, fIndex) => (
+                    <UI.flex key={fIndex} align="center" gap={8} opacity={0.8}>
+                      <UI.icon icon="check_circle" c={accentColor} fz={18} />
+                      <UI.text text={feature} fz="sm" c={textColor} />
+                    </UI.flex>
+                  ))}
+                </UI.flex>
+
+                <UI.button
+                  variant={plan.highlighted ? "filled" : "outline"}
+                  color={accentColor}
+                  fullWidth
+                  size="md"
+                  radius="md"
+                  fw={600}
+                >
+                  {plan.cta}
+                </UI.button>
+              </UI.card>
+            ))}
+          </UI.simplegrid>
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;

package/ui/blocks/testimonials.tsx

@@ -0,0 +1,149 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type Testimonial = {
+  quote: string;
+  author: string;
+  role: string;
+  avatar: string;
+  company?: string;
+};
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  testimonials?: Testimonial[];
+  backgroundColor?: string;
+  textColor?: string;
+  accentColor?: string;
+  py?: number;
+};
+
+const Component = create_component({
+  name: "Testimonials",
+  description: "A section for customer testimonials and success stories",
+  props: {
+    title: "Trusted by developers worldwide",
+    subtitle: "Testimonials",
+    accentColor: "primary",
+    py: 120,
+    testimonials: [
+      {
+        quote:
+          "Southpaw has completely transformed our development process. Building UI has never been this fast and intuitive.",
+        author: "Sarah Jenkins",
+        role: "Senior Frontend Engineer",
+        avatar: "https://i.pravatar.cc/150?u=sarah",
+        company: "TechFlow",
+      },
+      {
+        quote:
+          "The visual editor combined with the power of TypeScript is a game changer. Our designers and developers can now collaborate seamlessly.",
+        author: "Michael Chen",
+        role: "Product Designer",
+        avatar: "https://i.pravatar.cc/150?u=michael",
+        company: "DesignCo",
+      },
+      {
+        quote:
+          "I've never seen a framework that handles state and styling so elegantly while still giving you full control over the code.",
+        author: "Emma Rodriguez",
+        role: "CTO",
+        avatar: "https://i.pravatar.cc/150?u=emma",
+        company: "StartupInc",
+      },
+    ],
+  } as Props,
+  propsDef: {
+    title: { type: "text", label: "Main Title" },
+    subtitle: { type: "text", label: "Subtitle" },
+    backgroundColor: { type: "color", label: "Background Color" },
+    textColor: { type: "color", label: "Text Color" },
+    accentColor: { type: "color", label: "Accent Color" },
+    py: { type: "number", label: "Vertical Padding" },
+    testimonials: { type: "list-text", label: "Testimonials (JSON List)" },
+  },
+  render() {
+    const {
+      title,
+      subtitle,
+      testimonials,
+      backgroundColor,
+      textColor,
+      accentColor,
+      py,
+    } = this.props as Required<Props>;
+
+    return (
+      <UI.box py={py} px={40} style={{ backgroundColor }}>
+        <UI.container size="lg">
+          <UI.flex direction="column" align="center" gap={16} mb={80}>
+            {subtitle && (
+              <UI.badge
+                variant="light"
+                color={accentColor}
+                radius="xl"
+                size="lg"
+              >
+                {subtitle}
+              </UI.badge>
+            )}
+            <UI.title
+              text={title}
+              order={2}
+              fz={42}
+              fw={800}
+              ta="center"
+              c={textColor}
+            />
+          </UI.flex>
+
+          <UI.simplegrid cols={{ base: 1, md: 3 }} spacing={40}>
+            {testimonials?.map((testimonial, index) => (
+              <UI.card
+                key={index}
+                p={40}
+                radius="xl"
+                shadow="md"
+                withBorder={false}
+                style={{
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                }}
+              >
+                <UI.flex gap={4} mb={24}>
+                  {[1, 2, 3, 4, 5].map((_, starIndex) => (
+                    <UI.icon key={starIndex} icon="star" c="yellow.6" fz={18} />
+                  ))}
+                </UI.flex>
+                <UI.text
+                  text={`"${testimonial.quote}"`}
+                  fz="lg"
+                  fw={500}
+                  fs="italic"
+                  lh={1.6}
+                  mb={32}
+                  style={{ flex: 1 }}
+                />
+                <UI.flex align="center" gap={16}>
+                  <UI.avatar src={testimonial.avatar} radius="xl" size="md" />
+                  <UI.flex direction="column">
+                    <UI.text text={testimonial.author} fw={700} fz="sm" />
+                    <UI.text
+                      text={`${testimonial.role} at ${testimonial.company}`}
+                      fz="xs"
+                      c="gray.6"
+                    />
+                  </UI.flex>
+                </UI.flex>
+              </UI.card>
+            ))}
+          </UI.simplegrid>
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;