@allbluecn/web-app 0.17.0 → 0.17.1

package/src/components/shadcn-space/blocks/hero-01/header.tsx

@@ -1,272 +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 { useState, useEffect, useCallback } from "react";
-import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetClose } from "@/components/ui/sheet";
-import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList } from "@/components/ui/navigation-menu";
-import { cn } from "@/lib/utils";
-import { Menu, X } from 'lucide-react';
-import { Icon } from "@iconify/react";
-import { Button } from "@/components/ui/button";
-import { m } from "motion/react";
-import { InteractiveHoverButton } from "@/components/magicui/interactive-hover-button";
-import { useSession } from "@/lib/auth/auth-client";
-import { useRouter } from "@tanstack/react-router";
-import { ThemeToggle } from "@/components/shared-kit/theme/theme-toggle";
-import { AnimatedThemeToggler } from '@/components/magicui/animated-theme-toggler'
-
-export type NavigationSection = {
-  title: string;
-  href: string;
-  isActive?: boolean;
-};
-
-type HeaderProps = {
-  navigationData: NavigationSection[];
-  className?: string;
-};
-
-const CollaborateButton = ({ className, isMobile = false }: { className?: string; isMobile?: boolean }) => {
-  const { data: session } = useSession();
-  const router = useRouter();
-
-  const isLoggedIn = !!session?.user;
-
-  const handleClick = async () => {
-    if (isLoggedIn) {
-      await router.navigate({ to: "/dashboard" });
-    } else {
-      await router.navigate({ to: "/login" });
-    }
-  };
-
-  if (isMobile) {
-    return (
-      <Button
-        onClick={handleClick}
-        className={cn("w-full text-lg font-semibold py-6", className)}
-      >
-        {isLoggedIn ? "Go to Workspace" : "Get Started / Sign In"}
-      </Button>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <InteractiveHoverButton
-        onClick={handleClick}
-        className={cn(className)}
-      >
-        {isLoggedIn ? "Go to Workspace" : "Get Started / Sign In"}
-      </InteractiveHoverButton>
-      <div className="mr-1">
-        <ThemeToggle />
-      </div>
-    </div>
-  );
-
-};
-
-const Header = ({ navigationData, className }: HeaderProps) => {
-  const [sticky, setSticky] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleScroll = useCallback(() => {
-    setSticky(window.scrollY >= 50);
-  }, []);
-
-  const handleResize = useCallback(() => {
-    if (window.innerWidth >= 768) setIsOpen(false);
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleScroll, handleResize]);
-
-  return (
-    <m.header
-      initial={{ opacity: 0, y: -32 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.7 }}
-      className={cn(
-        "inset-x-0 z-50 px-4 flex items-center justify-center sticky top-0 h-20",
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          "w-full max-w-6xl flex items-center h-fit justify-between gap-3.5 lg:gap-6 transition-all duration-500",
-          sticky
-            ? "p-2.5 bg-background/60 backdrop-blur-lg border border-border/40 shadow-2xl shadow-primary/5 rounded-full"
-            : "bg-transparent border-transparent",
-        )}
-      >
-        {/* Logo */}
-        <div>
-          <a href="#">
-            <img
-              src="/logo/allblue-logo-text-dark.svg"
-              alt="AllBlue"
-              className="h-6 dark:hidden"
-            />
-            <img
-              src="/logo/allblue-logo-text-light.svg"
-              alt="AllBlue"
-              className="hidden h-6 dark:block"
-            />
-          </a>
-        </div>
-
-        {/* Desktop Navigation */}
-        <div>
-          <NavigationMenu className="max-lg:hidden bg-muted p-0.5 rounded-full">
-            <NavigationMenuList className="flex gap-0">
-              {navigationData.map((navItem) => (
-                <NavigationMenuItem key={navItem.title}>
-                  <NavigationMenuLink
-                    href={navItem.href}
-                    className={cn("px-2 lg:px-4 py-2 text-sm font-medium rounded-full text-muted-foreground hover:text-foreground hover:bg-background outline outline-transparent hover:outline-border hover:shadow-xs transition tracking-normal", navItem.isActive ? "bg-background text-foreground" : "")}
-                  >
-                    {navItem.title}
-                  </NavigationMenuLink>
-                </NavigationMenuItem>
-              ))}
-            </NavigationMenuList>
-          </NavigationMenu>
-        </div>
-
-        {/* Desktop CTA */}
-        <div className="flex gap-4">
-          <CollaborateButton className="hidden lg:flex" />
-
-          <div className="lg:hidden">
-            <Sheet open={isOpen} onOpenChange={setIsOpen}>
-              <SheetTrigger id="mobile-menu-trigger">
-                <span className="rounded-full border border-border p-2 block">
-                  <Menu
-                    width={20}
-                    height={20}
-                  />
-                  <span className="sr-only">Menu</span>
-                </span>
-              </SheetTrigger>
-
-              <SheetContent
-                showCloseButton={false}
-                side="right"
-                className="w-full sm:w-96 p-0 border-l-0"
-              >
-                <div className="flex items-center justify-between p-6">
-                  <a href="#">
-                    <img
-                      src="/logo/allblue-logo-text-dark.svg"
-                      alt="AllBlue"
-                      className="h-5 dark:hidden"
-                    />
-                    <img
-                      src="/logo/allblue-logo-text-light.svg"
-                      alt="AllBlue"
-                      className="hidden h-5 dark:block"
-                    />
-                  </a>
-                  <SheetClose id="mobile-menu-close">
-                    <span className="rounded-full border border-border p-2.5 block">
-                      <X width={16} height={16} />
-                    </span>
-                  </SheetClose>
-                </div>
-
-                <div className="flex flex-col gap-12 px-6 pb-6 overflow-y-auto">
-                  <div className="flex flex-col gap-8">
-                    <SheetTitle className="sr-only">Menu</SheetTitle>
-                    <NavigationMenu
-                      orientation="vertical"
-                      className="items-start flex-none"
-                    >
-                      <NavigationMenuList className="flex flex-col items-start gap-3">
-                        {navigationData.map((item) => (
-                          <NavigationMenuItem key={item.title}>
-                            <NavigationMenuLink
-                              href={item.href}
-                              className={cn(
-                                "group/nav flex items-center text-2xl font-semibold tracking-tight transition-all p-0 hover:bg-transparent focus:bg-transparent data-active:bg-transparent data-[state=open]:bg-transparent",
-                                item.isActive
-                                  ? "text-primary"
-                                  : "text-muted-foreground hover:text-foreground hover:translate-x-2",
-                              )}
-                            >
-                              <div
-                                className={cn(
-                                  "h-0.5 bg-primary transition-all duration-300 overflow-hidden",
-                                  item.isActive
-                                    ? "w-4 mr-2 opacity-100"
-                                    : "w-0 opacity-0 group-hover/nav:w-4 group-hover/nav:mr-2 group-hover/nav:opacity-100",
-                                )}
-                              />
-                              {item.title}
-                            </NavigationMenuLink>
-                          </NavigationMenuItem>
-                        ))}
-                      </NavigationMenuList>
-                    </NavigationMenu>
-
-                    <div className="w-fit">
-                      <CollaborateButton isMobile />
-                    </div>
-                  </div>
-
-                  <div className="mt-auto flex flex-col gap-4">
-                    <div className="flex gap-3">
-                      {[
-                        "lucide:dribbble",
-                        "lucide:instagram",
-                        "lucide:twitter",
-                        "lucide:linkedin",
-                      ].map((icon) => (
-                        <a
-                          key={icon}
-                          href="#"
-                          className="flex items-center justify-center rounded-full outline outline-border hover:bg-muted transition p-3 shadow-xs"
-                        >
-                          <Icon icon={icon} width={16} height={16} />
-                        </a>
-                      ))}
-                    </div>
-
-                    <p className="text-sm text-muted-foreground">
-                      © 2026 Shadcn Space
-                    </p>
-                  </div>
-                </div>
-              </SheetContent>
-            </Sheet>
-          </div>
-        </div>
-      </div>
-    </m.header>
-  );
-};
-
-export default Header;

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

@@ -1,111 +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 { m } from "motion/react";
-import { Button } from "@/components/ui/button";
-import { ArrowUpRight } from "lucide-react";
-export type AvatarList = {
-  image: string;
-};
-type HeroSectionProps = {
-  avatarList: AvatarList[];
-};
-function HeroSection({ avatarList }: HeroSectionProps) {
-  return (
-    <section>
-      <div className="w-full h-full relative">
-        <div className="relative w-full pt-0 md:pt-20 pb-6 md:pb-10 before:absolute before:w-full before:h-full before:bg-linear-to-r before:from-sky-100 before:via-white before:to-amber-100 before:rounded-full before:top-24 before:blur-3xl before:-z-10 dark:before:from-slate-800 dark:before:via-black dark:before:to-stone-700 dark:before:rounded-full dark:before:blur-3xl dark:before:-z-10">
-          <div className="container mx-auto relative z-10">
-            <div className="flex flex-col max-w-5xl mx-auto gap-8">
-              <div className="relative flex flex-col text-center items-center sm:gap-6 gap-4">
-                <m.h1
-                  initial={{ opacity: 0, y: 32 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.8, ease: [0.21, 0.47, 0.32, 0.98] }}
-                  className="lg:text-8xl md:text-7xl text-5xl font-medium leading-14 md:leading-20 lg:leading-24"
-                >
-                  Building bold brands with{" "}
-                  <span
-                    className="font-serif italic tracking-tight"
-                  >
-                    thoughtful design
-                  </span>
-                </m.h1>
-                <m.p
-                  initial={{ opacity: 0, y: 24 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.8, delay: 0.15, ease: [0.21, 0.47, 0.32, 0.98] }}
-                  className="text-base font-normal max-w-2xl text-muted-foreground"
-                >
-                  At shadcn space, we help small startups tackle the world's
-                  biggest challenges with tailored solutions, guiding you from
-                  strategy to success in a competitive market.
-                </m.p>
-              </div>
-              <m.div
-                initial={{ opacity: 0, y: 24 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, delay: 0.3, ease: [0.21, 0.47, 0.32, 0.98] }}
-                className="flex items-center flex-col md:flex-row justify-center gap-8"
-              >
-                <Button className="relative h-12 p-1 ps-6 pe-14 w-fit overflow-hidden rounded-full transition-all duration-500 hover:ps-14 hover:pe-6 group">
-                  <span className="relative z-10 transition-all duration-500">Get Started</span>
-                  <span className="absolute right-1 w-10 h-10 bg-background text-foreground rounded-full flex items-center justify-center transition-all duration-500 group-hover:right-[calc(100%-44px)] group-hover:rotate-45">
-                    <ArrowUpRight className="size-4" />
-                  </span>
-                </Button>
-                <div className="flex items-center sm:gap-7 gap-3">
-                  <ul className="avatar flex flex-row items-center">
-                    {avatarList.map((avatar, index) => (
-                      <li key={index} className="-mr-2 z-1 avatar-hover:ml-2">
-                        <img
-                          src={avatar.image}
-                          alt="Avatar"
-                          width={40}
-                          height={40}
-                          className="rounded-full border-2 border-white"
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                  <div className="gap-1 flex flex-col items-start">
-                    <div className="flex gap-1">
-                      {Array.from({ length: 5 }).map((_, index) => (
-                        <img
-                          key={index}
-                          src="https://images.shadcnspace.com/assets/svgs/icon-star.svg"
-                          alt="star"
-                          width={16}
-                          height={16}
-                          className="h-4 w-4"
-                        />
-                      ))}
-                    </div>
-                    <p className="sm:text-sm text-xs font-normal text-muted-foreground">
-                      Trusted by 1000+ clients
-                    </p>
-                  </div>
-                </div>
-              </m.div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-export default HeroSection;

package/src/components/shadcn-space/blocks/hero-01/index.tsx

@@ -1,127 +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 HeroSection from "@/components/shadcn-space/blocks/hero-01/hero";
-import type { NavigationSection } from "@/components/shadcn-space/blocks/hero-01/header";
-import Header from "@/components/shadcn-space/blocks/hero-01/header";
-import BrandSlider, { BrandList } from "@/components/shadcn-space/blocks/hero-01/brand-slider";
-import type { AvatarList } from "@/components/shadcn-space/blocks/hero-01/hero";
-
-import Pricing from "@/components/shadcn-space/blocks/pricing-01/pricing";
-import AboutAndStats01 from "@/components/shadcn-space/blocks/about-us-01"
-import Services from "@/components/shadcn-space/blocks/services-01/services";
-import CTA from "@/components/shadcn-space/blocks/cta-01/cta";
-import Faq from "@/components/shadcn-space/blocks/faq-01/faq"
-import Footer from "@/components/shadcn-space/blocks/footer-01/footer";
-import Team from "@/components/shadcn-space/blocks/team-01/team";
-import Portfolio from "@/components/shadcn-space/blocks/portfolio-01/portfolio";
-
-
-export default function AgencyHeroSection() {
-  const avatarList: AvatarList[] = [
-    {
-      image: "https://images.shadcnspace.com/assets/profiles/user-1.jpg",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/profiles/user-2.jpg",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/profiles/user-3.jpg",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/profiles/user-5.jpg",
-    },
-  ];
-
-  const navigationData: NavigationSection[] = [
-    {
-      title: "Home",
-      href: "#",
-      isActive: true,
-    },
-    {
-      title: "About us",
-      href: "#",
-    },
-    {
-      title: "Services",
-      href: "#",
-    },
-    {
-      title: "Team",
-      href: "#",
-    },
-    {
-      title: "Pricing",
-      href: "#pricing",
-    },
-    {
-      title: "Awards",
-      href: "#",
-    },
-  ];
-
-  const brandList: BrandList[] = [
-    {
-      image: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-1.svg",
-      lightimg: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-light-1.svg",
-      name: "Brand 1",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-2.svg",
-      lightimg: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-light-2.svg",
-      name: "Brand 2",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-3.svg",
-      lightimg: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-light-3.svg",
-      name: "Brand 3",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-4.svg",
-      lightimg: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-light-4.svg",
-      name: "Brand 4",
-    },
-    {
-      image: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-5.svg",
-      lightimg: "https://images.shadcnspace.com/assets/brand-logo/logoipsum-light-5.svg",
-      name: "Brand 5",
-    },
-  ];
-
-  return (
-    <div className="relative">
-      <Header navigationData={navigationData} />
-      <main>
-        <HeroSection avatarList={avatarList} />
-        <BrandSlider brandList={brandList} />
-        <AboutAndStats01 />
-        <Portfolio />
-        <Services />
-        <Team />
-        
-        <div id="pricing">
-          <Pricing />
-        </div>
-
-        <Faq />
-        <CTA />
-        <Footer />
-      </main>
-    </div>
-  );
-}

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

@@ -1,149 +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 { Card, CardContent } from "@/components/ui/card";
-import { m } from "motion/react";
-
-type PortfolioData = {
-  portfolio_image: string;
-  portfolio_title: string;
-  portfolio_tags: string[];
-};
-
-const portfolioData: PortfolioData[] = [
-  {
-    portfolio_image:
-      "https://images.shadcnspace.com/assets/portfolio/flowbank.webp",
-    portfolio_title: "Flowbank",
-    portfolio_tags: ["UX Research", "Interface Design"],
-  },
-  {
-    portfolio_image:
-      "https://images.shadcnspace.com/assets/portfolio/academy.webp",
-    portfolio_title: "Academy.co",
-    portfolio_tags: ["Product Design", "Interection Design"],
-  },
-  {
-    portfolio_image:
-      "https://images.shadcnspace.com/assets/portfolio/genome.webp",
-    portfolio_title: "Genome",
-    portfolio_tags: ["Brand identity design", "UX Research"],
-  },
-  {
-    portfolio_image:
-      "https://images.shadcnspace.com/assets/portfolio/hotto.webp",
-    portfolio_title: "Hotto",
-    portfolio_tags: ["Visual Storytelling", "Web & Mobile Design"],
-  },
-];
-
-const Portfolio = () => {
-  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-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 h-7"
-            >
-              Portfolio
-            </Badge>
-            {/* Heading */}
-            <div className="max-w-xs sm:max-w-2xl mx-auto text-center">
-              <h2 className="text-foreground text-3xl sm:text-5xl font-semibold">
-                How we transformed a small business’s{" "}
-                <span className="font-serif italic font-normal">online presence</span>
-              </h2>
-            </div>
-          </div>
-          {/* portfolio */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-x-7 md:gap-y-8 w-full">
-            {portfolioData.map((item, index) => (
-              <m.div
-                key={index}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                custom={index}
-                variants={cardVariants}
-                className="group"
-              >
-                <Card className="p-0 ring-0 overflow-hidden shadow-none border-0">
-                  <CardContent className="p-0 flex flex-col gap-6">
-                    <div className="relative aspect-auto overflow-hidden rounded-2xl">
-                      <a href="#">
-                        <img
-                          src={item.portfolio_image}
-                          alt={item.portfolio_title}
-                          width={800}
-                          height={370}
-                          className="rounded-2xl object-cover w-full h-full transition-transform duration-500 group-hover:scale-105"
-                        />
-                      </a>
-                    </div>
-                    <div className="flex flex-col gap-3">
-                      <a
-                        href="#"
-                        className="text-foreground text-2xl font-medium tracking-tighter w-fit"
-                      >
-                        {item.portfolio_title}
-                      </a>
-                      <div className="flex flex-wrap gap-3">
-                        {item.portfolio_tags.map((tag, tagIndex) => (
-                          <Badge
-                            key={tagIndex}
-                            variant="outline"
-                            className="text-sm font-normal px-3 py-1 h-7"
-                          >
-                            {tag}
-                          </Badge>
-                        ))}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </m.div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Portfolio;