@allbluecn/web-app 0.17.0 → 0.17.1

package/src/components/shadcn-space/blocks/pricing-01/pricing.tsx

@@ -1,187 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-import { ArrowUpRight, Check } from "lucide-react";
-import { m } from "motion/react";
-import { m as msg } from "@/paraglide/messages.js";
-
-type PricingPlan = {
-  plan_bg_color: string;
-  plan_name: string;
-  plan_descp: string;
-  plan_price: number;
-  plan_feature: string[];
-};
-
-const pricingData: PricingPlan[] = [
-  {
-    plan_bg_color: "bg-blue-500/10",
-    plan_name: "Free",
-    plan_descp: "",
-    plan_price: 0,
-    plan_feature: [
-      "Design Updates",
-      "Mid-level Designer",
-      "SEO Optimization",
-      "Monthly Analytics",
-      "2x Calls Per Month",
-      "License free Assets",
-    ],
-  },
-  {
-    plan_bg_color: "bg-teal-400/20",
-    plan_name: "Pro",
-    plan_descp: "2x the speed. Great for an MVP, Web App or complex problem",
-    plan_price: 3800,
-    plan_feature: [
-      "Everything on Starter",
-      "Developer Updates",
-      "Digital Marketing",
-      "Weekly Analytics",
-      "8x Calls Per Month",
-      "Premium Assets",
-    ],
-  },
-];
-
-const Pricing = () => {
-  const cardVariants = {
-    hidden: {
-      opacity: 0,
-      y: 80,
-    },
-    visible: (index: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: index * 0.2,
-        duration: 0.6,
-      },
-    }),
-  };
-
-  return (
-    <section className="bg-background py-10 xl:py-0">
-      <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 lg:py-20 sm:py-16 py-8">
-        <div className="flex flex-col gap-8 md:gap-12 justify-center items-center w-full">
-          {/* Heading */}
-          <div className="flex flex-col gap-4 justify-center items-center animate-in fade-in slide-in-from-top-8 duration-700 ease-in-out">
-            {/* Badge */}
-            <Badge
-              variant={"outline"}
-              className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7"
-            >
-              Pricing
-            </Badge>
-            {/* Heading */}
-            <div className="max-w-3xs sm:max-w-md mx-auto text-center">
-              <h2 className="text-foreground text-3xl sm:text-5xl font-medium">
-                Pick the plan that fits your start-up
-              </h2>
-            </div>
-          </div>
-          {/* Pricing Plans */}
-          <div className="flex flex-col lg:flex-row items-center justify-center grow gap-6 w-full">
-            {pricingData?.map((items: PricingPlan, index: number) => (
-              <m.div
-                key={index}
-                variants={cardVariants}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                custom={index}
-                className="w-full sm:w-fit"
-              >
-                <Card
-                  className={cn(
-                    items.plan_bg_color,
-                    "p-8 sm:p-10 rounded-2xl ring-0 w-full sm:w-fit",
-                  )}
-                  key={index}
-                >
-                  <CardContent className="flex flex-col sm:flex-row gap-6 md:gap-10 items-start self-stretch px-0 h-full w-full">
-                    <div className="flex flex-col items-start justify-between self-stretch gap-6">
-                      <div className="flex flex-col gap-3">
-                        <Badge className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7">
-                          {items.plan_name}
-                        </Badge>
-                        <p className="text-sm font-normal text-muted-foreground max-w-56">
-                          {items.plan_descp || msg.billing_pricing_freeDesc()}
-                        </p>
-                      </div>
-                      <div className="flex flex-col gap-4">
-                        <p className="text-4xl sm:text-5xl font-semibold text-card-foreground flex items-end">
-                          ¥{items.plan_price}
-                          <span className="text-base font-normal text-muted-foreground">
-                            /month
-                          </span>
-                        </p>
-                        <Button className="relative bg-white hover:bg-white hover:text-black dark:hover:text-black text-black text-sm font-medium rounded-full h-12 p-1 ps-6 pe-14 group transition-all duration-500 hover:ps-14 hover:pe-6 w-fit overflow-hidden cursor-pointer">
-                          <span className="relative z-10 transition-all duration-500">
-                            { items.plan_name === "Free" ? msg.billing_pricing_startFree() : msg.billing_pricing_viewPro() }
-                          </span>
-                          <div className="absolute right-1 w-10 h-10 bg-black text-white rounded-full flex items-center justify-center transition-all duration-500 group-hover:right-[calc(100%-44px)] group-hover:rotate-45">
-                            <ArrowUpRight size={16} />
-                          </div>
-                        </Button>
-                      </div>
-                    </div>
-                    <Separator
-                      orientation="vertical"
-                      className="hidden sm:block"
-                    />
-                    <Separator
-                      orientation="horizontal"
-                      className="sm:hidden block"
-                    />
-                    <div className="flex flex-col items-start gap-3 grow">
-                      <p className="text-card-foreground text-base sm:text-xl font-normal sm:font-medium">
-                        Features
-                      </p>
-                      <ul className="flex flex-col items-start self-stretch gap-3">
-                        {items.plan_feature?.map(
-                          (feature: string, index: number) => {
-                            return (
-                              <li
-                                key={index}
-                                className="flex items-center gap-3 text-card-foreground text-base font-normal tracking-normal"
-                              >
-                                <Check size={16} aria-hidden="true" />
-                                {feature}
-                              </li>
-                            );
-                          },
-                        )}
-                      </ul>
-                    </div>
-                  </CardContent>
-                </Card>
-              </m.div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Pricing;

package/src/components/shadcn-space/blocks/pricing-02/pricing.tsx

@@ -1,213 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-import { Check, Flame } from "lucide-react";
-import { m, easeInOut } from "motion/react";
-
-type PricingPlan = {
-  plan_name: string;
-  plan_descp: string;
-  plan_price: number;
-  plan_feature: string[];
-  plan_recommended: boolean;
-};
-
-const pricingData: PricingPlan[] = [
-  {
-    plan_name: "Pro",
-    plan_descp:
-      "Launch your website faster with ready-to-use components, blocks and zero setup friction with us.",
-    plan_price: 2500,
-    plan_feature: [
-      "Access to all core Shadcn UI blocks",
-      "Copy-paste ready React code",
-      "Regular library updates",
-      "Commercial use license",
-      "Community support & documentation",
-    ],
-    plan_recommended: false,
-  },
-  {
-    plan_name: "Pro Plus",
-    plan_descp:
-      "Scale with confidence using premium blocks, templates, and included strategy guidance.",
-    plan_price: 3800,
-    plan_feature: [
-      "Everything in Pro",
-      "Premium templates & more sections",
-      "Early access to new components",
-      "Private Discord & priority support",
-      "Monthly strategy & growth sessions",
-    ],
-    plan_recommended: true,
-  },
-  {
-    plan_name: "Enterprise",
-    plan_descp:
-      "Build at scale with full access, priority support, and dedicated one-on-one strategy calls.",
-    plan_price: 5000,
-    plan_feature: [
-      "Everything in Pro Plus",
-      "Unlimited team seats",
-      "Dedicated UI & integration support",
-      "Custom component requests",
-      "One-on-one implementation",
-    ],
-    plan_recommended: false,
-  },
-];
-
-const Pricing = () => {
-  const pricingCardVariants = {
-    hidden: {
-      opacity: 0,
-      x: -60,
-    },
-    visible: (index: number) => ({
-      opacity: 1,
-      x: 0,
-      transition: {
-        delay: index * 0.25,
-        duration: 0.6,
-        ease: easeInOut,
-      },
-    }),
-  };
-
-  return (
-    <section className="bg-background py-10 lg:py-0">
-      <div className="max-w-7xl mx-auto px-4 xl:px-16 lg:py-20 sm:py-16 py-8">
-        <div className="flex flex-col gap-8 md:gap-12 items-center justify-center w-full">
-          {/* Heading */}
-          <div className="flex flex-col gap-4 justify-center items-center">
-            {/* Badge */}
-            <Badge
-              variant={"outline"}
-              className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7"
-            >
-              Pricing
-            </Badge>
-            {/* Heading */}
-            <div className="max-w-3xs sm:max-w-md mx-auto text-center">
-              <h2 className="text-foreground text-3xl sm:text-5xl font-medium">
-                Pick the plan that fits your start-up
-              </h2>
-            </div>
-          </div>
-          {/*  */}
-          <div className="flex flex-col lg:flex-row gap-6 items-stretch h-full w-full">
-            {pricingData.map((plan: PricingPlan, index: number) => {
-              const isFeatured = plan.plan_recommended;
-
-              return (
-                <m.div
-                  key={index}
-                  variants={pricingCardVariants}
-                  initial="hidden"
-                  whileInView="visible"
-                  viewport={{ once: true }}
-                  custom={index}
-                  className={cn(
-                    "relative flex-1 flex flex-col w-full",
-                    isFeatured && "z-10 scale-102"
-                  )}
-                >
-                  {/* GRADIENT BORDER */}
-                  {isFeatured && (
-                    <div className="absolute -inset-0.5 rounded-2xl overflow-hidden">
-                      {/* Animated conic-gradient border */}
-                      <div className="absolute -inset-full blur-xs animate-spin [animation-duration:2s] bg-conic from-blue-500 via-red-500 to-teal-400" />
-
-                      {/* Inner mask */}
-                      <div className="absolute inset-0.5 rounded-2xl bg-card" />
-                    </div>
-                  )}
-
-                  {/* CARD */}
-                  <Card
-                    className={cn(
-                      "relative flex-1 flex flex-col rounded-2xl p-8 gap-8",
-                      isFeatured ? "border-0 ring-0" : "border border-border"
-                    )}
-                  >
-                    <CardHeader className="p-0">
-                      <div className="flex flex-col gap-3 self-stretch">
-                        <div className="flex items-center justify-between">
-                          <CardTitle className="text-2xl font-medium text-primary">
-                            {plan.plan_name}
-                          </CardTitle>
-                          {isFeatured && (
-                            <Badge className="py-1 px-3 text-sm font-medium leading-5 w-fit h-7 flex items-center gap-1.5 [&>svg]:size-4!">
-                              <Flame size={16} /> Recommend
-                            </Badge>
-                          )}
-                        </div>
-                        <CardDescription className="text-base font-normal max-w-2x">
-                          {plan.plan_descp}
-                        </CardDescription>
-                      </div>
-                    </CardHeader>
-
-                    <CardContent className="flex flex-col flex-1 gap-8 p-0">
-                      <div className="flex items-baseline gap-1">
-                        <span className="text-foreground text-4xl sm:text-5xl font-medium">
-                          ${plan.plan_price}
-                        </span>
-                        <span className="text-muted-foreground text-base font-normal">
-                          /month
-                        </span>
-                      </div>
-
-                      <Separator orientation="horizontal" />
-
-                      <ul className="flex flex-col gap-4 flex-1">
-                        {plan.plan_feature.map((feature, idx) => (
-                          <li
-                            key={idx}
-                            className="flex items-center gap-3 text-base font-normal text-muted-foreground"
-                          >
-                            <Check className="size-4 text-primary shrink-0" />
-                            {feature}
-                          </li>
-                        ))}
-                      </ul>
-
-                      <Button
-                        className="w-full h-12 cursor-pointer"
-                        variant={isFeatured ? "default" : "outline"}
-                      >
-                        Get started
-                      </Button>
-                    </CardContent>
-                  </Card>
-                </m.div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Pricing;

package/src/components/shadcn-space/blocks/services-01/services.tsx

@@ -1,178 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { m } from "motion/react";
-import { cn } from "@/lib/utils";
-import {
-  LucideIcon,
-  AppWindowMac,
-  Image,
-  SwatchBook,
-  WandSparkles,
-  ArrowUpRight,
-  BarChart3,
-} from "lucide-react";
-
-type ServiceData = {
-  service_icon: LucideIcon;
-  service_title: string;
-  service_bg_color: string;
-  service_text_color: string;
-};
-
-const serviceData: ServiceData[] = [
-  {
-    service_icon: SwatchBook,
-    service_title: "Brand Strategy",
-    service_bg_color: "bg-blue-500/10",
-    service_text_color: "text-blue-500",
-  },
-  {
-    service_icon: WandSparkles,
-    service_title: "UX/UI Design",
-    service_bg_color: "bg-orange-400/10",
-    service_text_color: "text-orange-400",
-  },
-  {
-    service_icon: BarChart3,
-    service_title: "Analytics & Reporting",
-    service_bg_color: "bg-teal-400/10",
-    service_text_color: "text-teal-400",
-  },
-  {
-    service_icon: Image,
-    service_title: "Digital Marketing",
-    service_bg_color: "bg-sky-400/10",
-    service_text_color: "text-sky-400",
-  },
-  {
-    service_icon: AppWindowMac,
-    service_title: "Web Development",
-    service_bg_color: "bg-red-500/10",
-    service_text_color: "text-red-500",
-  },
-];
-
-const Services = () => {
-  const cardVariants = {
-    hidden: {
-      opacity: 0,
-      y: 80,
-    },
-    visible: (index: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: index * 0.3,
-        duration: 0.6,
-      },
-    }),
-  };
-
-  return (
-    <section className="bg-background py-10">
-      <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16">
-        <div className="flex flex-col gap-8 sm:gap-16 justify-center items-center w-full">
-          {/* Heading */}
-          <div className="flex flex-col gap-4 justify-center items-center animate-in fade-in slide-in-from-top-10 duration-1000 delay-200 ease-in-out fill-mode-both">
-            {/* Badge */}
-            <Badge
-              variant={"outline"}
-              className="text-sm font-normal py-1 px-3 h-7"
-            >
-              Services
-            </Badge>
-            {/* Heading */}
-            <div className="max-w-3xs sm:max-w-lg mx-auto text-center">
-              <h2 className="text-foreground text-3xl sm:text-5xl font-medium">
-                Where innovation meets{" "}
-                <span className="font-serif italic font-normal">aesthetics</span>
-              </h2>
-            </div>
-          </div>
-          <div className="flex flex-col gap-8 sm:gap-12 justify-center items-center">
-            {/* services */}
-            <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-6 w-full">
-              {serviceData.map((service, index) => (
-                <m.div
-                  key={index}
-                  variants={cardVariants}
-                  initial="hidden"
-                  whileInView="visible"
-                  viewport={{ once: true }}
-                  custom={index}
-                >
-                  <Card className={cn("ring-0 p-8", service.service_bg_color)}>
-                    <CardContent className="p-0 flex flex-col items-start justify-between gap-12 sm:gap-16">
-                      <service.service_icon
-                        size={32}
-                        className={cn(service.service_text_color)}
-                      />
-                      <p
-                        className={cn(
-                          "text-2xl font-medium max-w-36",
-                          service.service_text_color
-                        )}
-                      >
-                        {service.service_title}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </m.div>
-              ))}
-            </div>
-            {/* cta */}
-            <div className="bg-gray-950 border rounded-2xl p-8 flex flex-col lg:flex-row items-center justify-between gap-12 w-full animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-200 ease-in-out fill-mode-both">
-              <div className="text-center md:text-start">
-                <p className="text-2xl font-medium text-white">
-                  See Our Work in Action.{" "}
-                </p>
-                <p className="text-2xl font-medium text-white">
-                  Start Your Creative Journey with Us!
-                </p>
-              </div>
-              <div className="flex md:flex-row flex-col items-center gap-4">
-                <Button className="group text-sm font-medium text-black bg-white hover:text-black dark:hover:text-black hover:bg-white/90 rounded-full flex items-center gap-4 p-1 ps-5 w-fit h-12 cursor-pointer">
-                  <a href="#" className="flex items-center gap-4">
-                    <span>Let’s Collaborate</span>
-                    <div className="p-3 bg-black text-white rounded-full group-hover:rotate-45 transition-transform duration-300 ease-in-out">
-                      <ArrowUpRight size={16} />
-                    </div>
-                  </a>
-                </Button>
-                <Button className="group text-sm font-medium text-white bg-gray-950 hover:text-white dark:hover:text-white hover:bg-gray-950/90 rounded-full border border-white/50 flex items-center gap-4 p-1 ps-5 w-fit h-12 cursor-pointer">
-                  <a href="#" className="flex items-center gap-4">
-                    <span>View Portfolio</span>
-                    <div className="p-3 bg-white text-black rounded-full group-hover:rotate-45 transition-transform duration-300 ease-in-out">
-                      <ArrowUpRight size={16} />
-                    </div>
-                  </a>
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Services;