fix nav link href
This commit is contained in:
parent
1f7f5b7921
commit
50b9ab7f1c
@ -3,6 +3,8 @@ import React from "react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
import { Play } from "lucide-react";
|
import { Play } from "lucide-react";
|
||||||
|
|
||||||
import { formatDate } from "@/lib/utils";
|
import { formatDate } from "@/lib/utils";
|
||||||
@ -12,7 +14,9 @@ import { Tables } from "@/utils/supabase/database.types";
|
|||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { buttonVariants } from "@/components/ui/button";
|
import { buttonVariants } from "@/components/ui/button";
|
||||||
|
|
||||||
type AgentCardProps = { data: Tables<"agents"> };
|
const ease = [0.16, 1, 0.3, 1];
|
||||||
|
|
||||||
|
type AgentCardProps = { data: Tables<"agents">; idx: number };
|
||||||
|
|
||||||
export default function AgentCard(props: AgentCardProps) {
|
export default function AgentCard(props: AgentCardProps) {
|
||||||
const {
|
const {
|
||||||
@ -27,7 +31,16 @@ export default function AgentCard(props: AgentCardProps) {
|
|||||||
} = props.data;
|
} = props.data;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200">
|
<motion.li
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.8,
|
||||||
|
delay: props.idx * 0.2,
|
||||||
|
ease,
|
||||||
|
}}
|
||||||
|
className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200"
|
||||||
|
>
|
||||||
<figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
|
<figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
|
||||||
<Image
|
<Image
|
||||||
className="w-full object-cover"
|
className="w-full object-cover"
|
||||||
@ -62,6 +75,6 @@ export default function AgentCard(props: AgentCardProps) {
|
|||||||
<span>Try it</span>
|
<span>Try it</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</motion.li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,8 @@ import Link from "next/link";
|
|||||||
|
|
||||||
import { parseAsInteger, useQueryState } from "nuqs";
|
import { parseAsInteger, useQueryState } from "nuqs";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react";
|
import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react";
|
||||||
@ -26,6 +28,7 @@ import AgentCard from "./agent-card";
|
|||||||
import AgentCardSkeleton from "./agent-card-skeleton";
|
import AgentCardSkeleton from "./agent-card-skeleton";
|
||||||
|
|
||||||
const DATA_DISPLAY = 6;
|
const DATA_DISPLAY = 6;
|
||||||
|
const ease = [0.16, 1, 0.3, 1];
|
||||||
|
|
||||||
export function AgentList() {
|
export function AgentList() {
|
||||||
const [searchFilter, setSearchFilter] = useQueryState("search", {
|
const [searchFilter, setSearchFilter] = useQueryState("search", {
|
||||||
@ -74,7 +77,20 @@ export function AgentList() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="mb-8 flex flex-col sm:flex-row justify-between">
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease }}
|
||||||
|
className="mb-4 text-3xl font-bold text-foreground sm:text-4xl"
|
||||||
|
>
|
||||||
|
Agents
|
||||||
|
</motion.h1>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease }}
|
||||||
|
className="mb-8 flex flex-col sm:flex-row gap-3 justify-between"
|
||||||
|
>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Input
|
<Input
|
||||||
aria-label="search"
|
aria-label="search"
|
||||||
@ -102,7 +118,7 @@ export function AgentList() {
|
|||||||
<BadgePlus className="h-6 w-6" />
|
<BadgePlus className="h-6 w-6" />
|
||||||
Create new Agent
|
Create new Agent
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</motion.div>
|
||||||
{agentsData && agentsData.data.length === 0 && (
|
{agentsData && agentsData.data.length === 0 && (
|
||||||
<div className="flex flex-col justify-center items-center ">
|
<div className="flex flex-col justify-center items-center ">
|
||||||
<figure className="relative w-full sm:w-1/2 h-72 sm:h-96 mb-6">
|
<figure className="relative w-full sm:w-1/2 h-72 sm:h-96 mb-6">
|
||||||
@ -116,18 +132,27 @@ export function AgentList() {
|
|||||||
<h1 className="text-xl font-bold">No data found</h1>
|
<h1 className="text-xl font-bold">No data found</h1>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
|
{isLoading ? (
|
||||||
{isLoading &&
|
<motion.ul
|
||||||
[...Array(6)].map((_, idx) => (
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8, ease }}
|
||||||
|
className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3"
|
||||||
|
>
|
||||||
|
{[...Array(6)].map((_, idx) => (
|
||||||
<li key={idx}>
|
<li key={idx}>
|
||||||
<AgentCardSkeleton />
|
<AgentCardSkeleton />
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
</motion.ul>
|
||||||
|
) : (
|
||||||
|
<ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
{agentsData &&
|
{agentsData &&
|
||||||
agentsData.data?.map((agent) => (
|
agentsData.data?.map((agent, idx) => (
|
||||||
<AgentCard key={agent.name} data={agent} />
|
<AgentCard key={agent.name} data={agent} idx={idx} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
)}
|
||||||
{agentsData ? (
|
{agentsData ? (
|
||||||
<Pagination>
|
<Pagination>
|
||||||
<PaginationContent>
|
<PaginationContent>
|
||||||
|
@ -5,9 +5,6 @@ export default function Explore() {
|
|||||||
return (
|
return (
|
||||||
<section className="group pt-8 pb-10 min-h-[50vh] ">
|
<section className="group pt-8 pb-10 min-h-[50vh] ">
|
||||||
<div className="layout">
|
<div className="layout">
|
||||||
<h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
|
|
||||||
Agents
|
|
||||||
</h1>
|
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<AgentList />
|
<AgentList />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
@ -10,16 +10,104 @@ import {
|
|||||||
import { siteConfig } from "@/lib/config";
|
import { siteConfig } from "@/lib/config";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { LoginModalOptions } from "@privy-io/react-auth";
|
import { LoginModalOptions } from "@privy-io/react-auth";
|
||||||
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import React from "react";
|
||||||
import { IoMenuSharp } from "react-icons/io5";
|
import { IoMenuSharp } from "react-icons/io5";
|
||||||
|
|
||||||
export default function drawerDemo({
|
const headerLinks = [
|
||||||
|
// {
|
||||||
|
// trigger: "Features",
|
||||||
|
// content: {
|
||||||
|
// main: {
|
||||||
|
// icon: <Icons.logo className="h-6 w-6" />,
|
||||||
|
// title: "AI-Powered Automation",
|
||||||
|
// description: "Streamline your workflow with intelligent automation.",
|
||||||
|
// href: "#",
|
||||||
|
// },
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Task Automation",
|
||||||
|
// description: "Automate repetitive tasks and save time.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Workflow Optimization",
|
||||||
|
// description: "Optimize your processes with AI-driven insights.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Intelligent Scheduling",
|
||||||
|
// description: "AI-powered scheduling for maximum efficiency.",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// trigger: "Solutions",
|
||||||
|
// content: {
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// title: "For Small Businesses",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Tailored automation solutions for growing companies.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Enterprise",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Scalable AI automation for large organizations.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Developers",
|
||||||
|
// href: "#",
|
||||||
|
// description: "API access and integration tools for developers.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Healthcare",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Specialized automation for healthcare workflows.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Finance",
|
||||||
|
// href: "#",
|
||||||
|
// description: "AI-driven process automation for financial services.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Education",
|
||||||
|
// href: "#",
|
||||||
|
// description:
|
||||||
|
// "Streamline administrative tasks in educational institutions.",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
href: "/explore",
|
||||||
|
label: "Agents",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/faq",
|
||||||
|
label: "FAQ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/docs",
|
||||||
|
label: "Docs",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function DrawerDemo({
|
||||||
login,
|
login,
|
||||||
}: {
|
}: {
|
||||||
login: (options?: LoginModalOptions | React.MouseEvent<any, any>) => void;
|
login: (options?: LoginModalOptions | React.MouseEvent<any, any>) => void;
|
||||||
}) {
|
}) {
|
||||||
|
const pathName = usePathname();
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer>
|
<Drawer open={open} onOpenChange={(val) => setOpen(val)}>
|
||||||
<DrawerTrigger>
|
<DrawerTrigger>
|
||||||
<IoMenuSharp className="text-2xl" />
|
<IoMenuSharp className="text-2xl" />
|
||||||
</DrawerTrigger>
|
</DrawerTrigger>
|
||||||
@ -29,23 +117,32 @@ export default function drawerDemo({
|
|||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
title="brand-logo"
|
title="brand-logo"
|
||||||
className="relative mr-6 flex items-center space-x-2"
|
className="grow relative flex items-center space-x-2"
|
||||||
>
|
>
|
||||||
<Icons.logo className="w-auto h-[40px]" />
|
<Image
|
||||||
|
src="/logo.png"
|
||||||
|
height={44}
|
||||||
|
width={44}
|
||||||
|
alt="logo"
|
||||||
|
className="rounded-md shadow"
|
||||||
|
/>
|
||||||
<span className="font-bold text-xl">{siteConfig.name}</span>
|
<span className="font-bold text-xl">{siteConfig.name}</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="mt-7 text-left">
|
<ul className="mt-7 text-left">
|
||||||
{siteConfig.header.map((item, index) => (
|
{headerLinks.map((item, index) => (
|
||||||
<li key={index} className="my-3">
|
<li key={index} className="my-3">
|
||||||
{item.trigger ? (
|
<Link
|
||||||
<span className="font-semibold">{item.trigger}</span>
|
href={index === 0 ? item.href : "/#"}
|
||||||
) : (
|
className={cn(
|
||||||
<Link href={item.href || ""} className="font-semibold">
|
"font-semibold",
|
||||||
|
item.href === pathName && "underline"
|
||||||
|
)}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -14,67 +14,116 @@ import {
|
|||||||
} from "@/components/ui/navigation-menu";
|
} from "@/components/ui/navigation-menu";
|
||||||
import { siteConfig } from "@/lib/config";
|
import { siteConfig } from "@/lib/config";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Icons } from "@/components/icons";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
const headerLinks = [
|
||||||
|
// {
|
||||||
|
// trigger: "Features",
|
||||||
|
// content: {
|
||||||
|
// main: {
|
||||||
|
// icon: <Icons.logo className="h-6 w-6" />,
|
||||||
|
// title: "AI-Powered Automation",
|
||||||
|
// description: "Streamline your workflow with intelligent automation.",
|
||||||
|
// href: "#",
|
||||||
|
// },
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Task Automation",
|
||||||
|
// description: "Automate repetitive tasks and save time.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Workflow Optimization",
|
||||||
|
// description: "Optimize your processes with AI-driven insights.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// href: "#",
|
||||||
|
// title: "Intelligent Scheduling",
|
||||||
|
// description: "AI-powered scheduling for maximum efficiency.",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// trigger: "Solutions",
|
||||||
|
// content: {
|
||||||
|
// items: [
|
||||||
|
// {
|
||||||
|
// title: "For Small Businesses",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Tailored automation solutions for growing companies.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Enterprise",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Scalable AI automation for large organizations.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Developers",
|
||||||
|
// href: "#",
|
||||||
|
// description: "API access and integration tools for developers.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Healthcare",
|
||||||
|
// href: "#",
|
||||||
|
// description: "Specialized automation for healthcare workflows.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Finance",
|
||||||
|
// href: "#",
|
||||||
|
// description: "AI-driven process automation for financial services.",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "Education",
|
||||||
|
// href: "#",
|
||||||
|
// description:
|
||||||
|
// "Streamline administrative tasks in educational institutions.",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
href: "/explore",
|
||||||
|
label: "Agents",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/faq",
|
||||||
|
label: "FAQ",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/docs",
|
||||||
|
label: "Docs",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function NavigationMenuDemo() {
|
export default function NavigationMenuDemo() {
|
||||||
|
const pathName = usePathname();
|
||||||
|
|
||||||
|
console.log(pathName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NavigationMenu>
|
<NavigationMenu>
|
||||||
<NavigationMenuList>
|
<NavigationMenuList>
|
||||||
{siteConfig.header.map((item, index) => (
|
{headerLinks.map((item, index) => (
|
||||||
<NavigationMenuItem key={index}>
|
<NavigationMenuItem key={index}>
|
||||||
{item.trigger ? (
|
|
||||||
<>
|
|
||||||
<NavigationMenuTrigger>{item.trigger}</NavigationMenuTrigger>
|
|
||||||
<NavigationMenuContent>
|
|
||||||
<ul
|
|
||||||
className={`grid gap-3 p-6 ${
|
|
||||||
item.content.main
|
|
||||||
? "md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"
|
|
||||||
: "w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{item.content.main && (
|
|
||||||
<li className="row-span-3">
|
|
||||||
<NavigationMenuLink asChild>
|
|
||||||
<Link
|
<Link
|
||||||
className="flex h-full w-full select-none flex-col justify-end rounded-md bg-primary/10 from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
|
// href={item.href || ""}
|
||||||
href={item.content.main.href}
|
href={index === 0 ? item.href : "/#"}
|
||||||
>
|
|
||||||
{item.content.main.icon}
|
|
||||||
<div className="mb-2 mt-4 text-lg font-medium">
|
|
||||||
{item.content.main.title}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm leading-tight text-muted-foreground">
|
|
||||||
{item.content.main.description}
|
|
||||||
</p>
|
|
||||||
</Link>
|
|
||||||
</NavigationMenuLink>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{item.content.items.map((subItem, subIndex) => (
|
|
||||||
<ListItem
|
|
||||||
key={subIndex}
|
|
||||||
href={subItem.href}
|
|
||||||
title={subItem.title}
|
|
||||||
className="hover:bg-primary/10"
|
|
||||||
>
|
|
||||||
{subItem.description}
|
|
||||||
</ListItem>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</NavigationMenuContent>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Link
|
|
||||||
href={item.href || ""}
|
|
||||||
target="_arya"
|
target="_arya"
|
||||||
legacyBehavior
|
legacyBehavior
|
||||||
passHref
|
passHref
|
||||||
>
|
>
|
||||||
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
|
<NavigationMenuLink
|
||||||
|
className={cn(
|
||||||
|
navigationMenuTriggerStyle(),
|
||||||
|
item.href === pathName && "underline"
|
||||||
|
)}
|
||||||
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
))}
|
))}
|
||||||
</NavigationMenuList>
|
</NavigationMenuList>
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
import { Rocket } from "lucide-react";
|
import { Rocket } from "lucide-react";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@ -7,6 +11,8 @@ import { cn } from "@/lib/utils";
|
|||||||
import { buttonVariants } from "@/components/ui/button";
|
import { buttonVariants } from "@/components/ui/button";
|
||||||
import Section from "@/components/section";
|
import Section from "@/components/section";
|
||||||
|
|
||||||
|
const ease = [0.16, 1, 0.3, 1];
|
||||||
|
|
||||||
export default function CtaSection() {
|
export default function CtaSection() {
|
||||||
return (
|
return (
|
||||||
<Section
|
<Section
|
||||||
@ -15,7 +21,12 @@ export default function CtaSection() {
|
|||||||
subtitle="Join us and try our agentic AI into your operations."
|
subtitle="Join us and try our agentic AI into your operations."
|
||||||
className="bg-primary/10 dark:bg-primary/70 rounded-xl py-16"
|
className="bg-primary/10 dark:bg-primary/70 rounded-xl py-16"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col w-full sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 pt-4">
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.8, duration: 0.8, ease }}
|
||||||
|
className="flex flex-col w-full sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 pt-4"
|
||||||
|
>
|
||||||
<Link
|
<Link
|
||||||
href={`${process.env.NEXT_PUBLIC_DASHBOARD_URL}/explore`}
|
href={`${process.env.NEXT_PUBLIC_DASHBOARD_URL}/explore`}
|
||||||
className={cn(
|
className={cn(
|
||||||
@ -26,7 +37,7 @@ export default function CtaSection() {
|
|||||||
<Rocket className="h-6 w-6" />
|
<Rocket className="h-6 w-6" />
|
||||||
Get started
|
Get started
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</motion.div>
|
||||||
</Section>
|
</Section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -4,15 +4,32 @@ import Image from "next/image";
|
|||||||
import { ChevronRight } from "lucide-react";
|
import { ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
import { siteConfig } from "@/lib/config";
|
import { siteConfig } from "@/lib/config";
|
||||||
|
import { buttonVariants } from "../ui/button";
|
||||||
|
import { FaBook, FaDiscord } from "react-icons/fa";
|
||||||
|
import { FaXTwitter } from "react-icons/fa6";
|
||||||
|
|
||||||
|
const headerLinks = [
|
||||||
|
{
|
||||||
|
title: "Resources",
|
||||||
|
links: [
|
||||||
|
{ href: "#", text: "FAQ", icon: null },
|
||||||
|
{ href: "#", text: "Documentation", icon: null },
|
||||||
|
// { href: "#", text: "Pricing", icon: null },
|
||||||
|
// { href: "#", text: "API", icon: null },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer>
|
<footer>
|
||||||
<div className="layout py-16 sm:px-10 px-5 pb-0">
|
<div className="layout py-16 sm:px-10 px-5">
|
||||||
<a
|
<div className="grid sm:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
title={siteConfig.name}
|
title={siteConfig.name}
|
||||||
className="relative mr-6 flex items-center space-x-2"
|
className="mb-5 relative mr-6 flex items-center space-x-2"
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/logo.png"
|
src="/logo.png"
|
||||||
@ -21,12 +38,46 @@ export default function Footer() {
|
|||||||
alt="logo"
|
alt="logo"
|
||||||
className="rounded-md shadow"
|
className="rounded-md shadow"
|
||||||
/>
|
/>
|
||||||
{/* <Icons.logo className="w-auto h-[40px]" /> */}
|
|
||||||
<span className="font-bold text-xl">{siteConfig.name}</span>
|
<span className="font-bold text-xl">{siteConfig.name}</span>
|
||||||
</a>
|
</Link>
|
||||||
|
<p className="mb-5">Build advanced custom ai agents with no code</p>
|
||||||
<div className="grid md:grid-cols-3 lg:grid-cols-4 sm:grid-cols-2 mt-8">
|
<ul className="flex gap-3">
|
||||||
{siteConfig.footer.map((section, index) => (
|
<li>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className={buttonVariants({
|
||||||
|
variant: "outline",
|
||||||
|
size: "icon",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<FaBook className="text-primary" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className={buttonVariants({
|
||||||
|
variant: "outline",
|
||||||
|
size: "icon",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<FaXTwitter className="text-primary" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className={buttonVariants({
|
||||||
|
variant: "outline",
|
||||||
|
size: "icon",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<FaDiscord className="text-primary" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{headerLinks.map((section, index) => (
|
||||||
<div key={index} className="mb-5">
|
<div key={index} className="mb-5">
|
||||||
<h2 className="font-semibold">{section.title}</h2>
|
<h2 className="font-semibold">{section.title}</h2>
|
||||||
<ul>
|
<ul>
|
||||||
@ -46,27 +97,6 @@ export default function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-6xl mx-auto border-t py-2 grid md:grid-cols-2 h-full justify-between w-full grid-cols-1 gap-1">
|
|
||||||
<span className="text-sm tracking-tight text-foreground">
|
|
||||||
Copyright © {new Date().getFullYear()}{" "}
|
|
||||||
<Link href="/" className="cursor-pointer">
|
|
||||||
{siteConfig.name}
|
|
||||||
</Link>{" "}
|
|
||||||
- {siteConfig.description}
|
|
||||||
</span>
|
|
||||||
<ul className="flex justify-start md:justify-end text-sm tracking-tight text-foreground">
|
|
||||||
<li className="mr-3 md:mx-4">
|
|
||||||
<Link href="#" target="_blank" rel="noopener noreferrer">
|
|
||||||
Privacy Policy
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li className="mr-3 md:mx-4">
|
|
||||||
<Link href="#" target="_blank" rel="noopener noreferrer">
|
|
||||||
Terms of Service
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
@ -26,7 +26,9 @@ import {
|
|||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
import { Button, buttonVariants } from "@/components/ui/button";
|
import { Button, buttonVariants } from "@/components/ui/button";
|
||||||
|
import Menu from "@/components/menu";
|
||||||
import Spinner from "../spinner";
|
import Spinner from "../spinner";
|
||||||
|
import { Skeleton } from "../ui/skeleton";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const [addBorder, setAddBorder] = React.useState(false);
|
const [addBorder, setAddBorder] = React.useState(false);
|
||||||
@ -66,11 +68,11 @@ export default function Header() {
|
|||||||
<header
|
<header
|
||||||
className={"h-16 sticky top-0 z-50 py-2 bg-background/60 backdrop-blur"}
|
className={"h-16 sticky top-0 z-50 py-2 bg-background/60 backdrop-blur"}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-center container">
|
<div className="flex items-center layout">
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
title="brand-logo"
|
title="brand-logo"
|
||||||
className="relative mr-6 flex items-center space-x-2"
|
className="grow relative flex items-center space-x-2"
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/logo.png"
|
src="/logo.png"
|
||||||
@ -84,9 +86,12 @@ export default function Header() {
|
|||||||
|
|
||||||
<div className="hidden lg:block">
|
<div className="hidden lg:block">
|
||||||
<div className="flex items-center ">
|
<div className="flex items-center ">
|
||||||
|
<nav className="mr-10">
|
||||||
|
<Menu />
|
||||||
|
</nav>
|
||||||
<div className="gap-2 flex">
|
<div className="gap-2 flex">
|
||||||
{!ready ? (
|
{!ready ? (
|
||||||
<Spinner />
|
<Skeleton className="h-10 w-32" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{authenticated && user ? (
|
{authenticated && user ? (
|
||||||
@ -162,7 +167,7 @@ export default function Header() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-2 mt-2 cursor-pointer block lg:hidden">
|
<div className="ml-1 mt-2 cursor-pointer block lg:hidden">
|
||||||
{authenticated && user ? (
|
{authenticated && user ? (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger className="max-w-48 flex items-center gap-2 border p-2 rounded-md">
|
<DropdownMenuTrigger className="max-w-48 flex items-center gap-2 border p-2 rounded-md">
|
||||||
@ -225,6 +230,9 @@ export default function Header() {
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="ml-1 mt-2 cursor-pointer block lg:hidden">
|
||||||
|
<Drawer login={login} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr
|
<hr
|
||||||
className={cn(
|
className={cn(
|
||||||
|
@ -20,30 +20,14 @@ function HeroPill() {
|
|||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8, ease }}
|
transition={{ duration: 0.8, ease }}
|
||||||
>
|
>
|
||||||
<Link
|
<div className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre">
|
||||||
href={process.env.NEXT_PUBLIC_DASHBOARD_URL!}
|
|
||||||
className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre"
|
|
||||||
>
|
|
||||||
<div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
|
<div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
|
||||||
📣 Announcement
|
📣 Announcement
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs font-medium text-primary sm:text-sm">
|
<p className="text-xs font-medium text-primary sm:text-sm">
|
||||||
Introducing beactio.ai
|
Introducing beactio.ai
|
||||||
</p>
|
</p>
|
||||||
<svg
|
</div>
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
className="ml-1"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8.78141 5.33312L5.20541 1.75712L6.14808 0.814453L11.3334 5.99979L6.14808 11.1851L5.20541 10.2425L8.78141 6.66645H0.666748V5.33312H8.78141Z"
|
|
||||||
fill="hsl(var(--primary))"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Link>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -158,7 +142,7 @@ function HeroImage() {
|
|||||||
export default function Hero2() {
|
export default function Hero2() {
|
||||||
return (
|
return (
|
||||||
<section id="hero">
|
<section id="hero">
|
||||||
<div className="relative flex w-full flex-col items-center justify-start px-4 pt-32 sm:px-6 sm:pt-24 md:pt-32 lg:px-8">
|
<div className="relative flex w-full flex-col items-center justify-start px-4 py-32 sm:px-6 sm:py-24 md:py-32 lg:px-8">
|
||||||
<HeroPill />
|
<HeroPill />
|
||||||
<HeroTitles />
|
<HeroTitles />
|
||||||
<HeroCTA />
|
<HeroCTA />
|
||||||
|
@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
|
|||||||
const NavigationMenuItem = NavigationMenuPrimitive.Item;
|
const NavigationMenuItem = NavigationMenuPrimitive.Item;
|
||||||
|
|
||||||
const navigationMenuTriggerStyle = cva(
|
const navigationMenuTriggerStyle = cva(
|
||||||
"group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-primary/10 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-primary/10 data-[state=open]:bg-primary/10"
|
"group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-primary focus:bg-accent focus:text-primary focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent data-[state=open]:bg-accent"
|
||||||
);
|
);
|
||||||
|
|
||||||
const NavigationMenuTrigger = React.forwardRef<
|
const NavigationMenuTrigger = React.forwardRef<
|
||||||
|
@ -216,15 +216,15 @@ export const siteConfig = {
|
|||||||
// { href: "#", text: "Partners", icon: null },
|
// { href: "#", text: "Partners", icon: null },
|
||||||
// ],
|
// ],
|
||||||
// },
|
// },
|
||||||
{
|
// {
|
||||||
title: "Resources",
|
// title: "Resources",
|
||||||
links: [
|
// links: [
|
||||||
// { href: "#", text: "Community", icon: null },
|
// // { href: "#", text: "Community", icon: null },
|
||||||
// { href: "#", text: "Contact", icon: null },
|
// // { href: "#", text: "Contact", icon: null },
|
||||||
{ href: "#", text: "Support", icon: null },
|
// { href: "#", text: "Support", icon: null },
|
||||||
{ href: "#", text: "Status", icon: null },
|
// { href: "#", text: "Status", icon: null },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
title: "Social",
|
title: "Social",
|
||||||
links: [
|
links: [
|
||||||
|
Loading…
x
Reference in New Issue
Block a user