erki_kadhafi/beactio-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix nav link href

Browse Source
This commit is contained in:
ErkiKadhafi 2025-01-18 13:08:50 +07:00
parent 1f7f5b7921
commit 50b9ab7f1c
11 changed files with 371 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/(main)/explore/_components/agent-card.tsx
View File

@ -3,6 +3,8 @@ import React from "react";
import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import { Play } from "lucide-react";
import { formatDate } from "@/lib/utils";
@ -12,7 +14,9 @@ import { Tables } from "@/utils/supabase/database.types";
import { Badge } from "@/components/ui/badge";
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) {
const {
@ -27,7 +31,16 @@ export default function AgentCard(props: AgentCardProps) {
} = props.data;
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]">
<Image
className="w-full object-cover"
@ -62,6 +75,6 @@ export default function AgentCard(props: AgentCardProps) {
<span>Try it</span>
</Link>
</div>
</li>
</motion.li>
);
}

39
src/app/(main)/explore/_components/agent-list.tsx
View File

@ -5,6 +5,8 @@ import Link from "next/link";
import { parseAsInteger, useQueryState } from "nuqs";
import { motion } from "framer-motion";
import { useQuery } from "@tanstack/react-query";
import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react";
@ -26,6 +28,7 @@ import AgentCard from "./agent-card";
import AgentCardSkeleton from "./agent-card-skeleton";
const DATA_DISPLAY = 6;
const ease = [0.16, 1, 0.3, 1];
export function AgentList() {
const [searchFilter, setSearchFilter] = useQueryState("search", {
@ -74,7 +77,20 @@ export function AgentList() {
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">
<Input
aria-label="search"
@ -102,7 +118,7 @@ export function AgentList() {
<BadgePlus className="h-6 w-6" />
Create new Agent
</Link>
</div>
</motion.div>
{agentsData && agentsData.data.length === 0 && (
<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">
@ -116,18 +132,27 @@ export function AgentList() {
<h1 className="text-xl font-bold">No data found</h1>
</div>
)}
<ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
{isLoading &&
[...Array(6)].map((_, idx) => (
{isLoading ? (
<motion.ul
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}>
<AgentCardSkeleton />
</li>
))}
</motion.ul>
) : (
<ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
{agentsData &&
agentsData.data?.map((agent) => (
<AgentCard key={agent.name} data={agent} />
agentsData.data?.map((agent, idx) => (
<AgentCard key={agent.name} data={agent} idx={idx} />
))}
</ul>
)}
{agentsData ? (
<Pagination>
<PaginationContent>

3
src/app/(main)/explore/page.tsx
View File

@ -5,9 +5,6 @@ export default function Explore() {
return (
<section className="group pt-8 pb-10 min-h-[50vh] ">
<div className="layout">
<h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
Agents
</h1>
<Suspense>
<AgentList />
</Suspense>

117
src/components/drawer.tsx
View File

@ -10,16 +10,104 @@ import {
import { siteConfig } from "@/lib/config";
import { cn } from "@/lib/utils";
import { LoginModalOptions } from "@privy-io/react-auth";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";
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: (options?: LoginModalOptions | React.MouseEvent<any, any>) => void;
}) {
const pathName = usePathname();
const [open, setOpen] = React.useState(false);
return (
<Drawer>
<Drawer open={open} onOpenChange={(val) => setOpen(val)}>
<DrawerTrigger>
<IoMenuSharp className="text-2xl" />
</DrawerTrigger>
@ -29,23 +117,32 @@ export default function drawerDemo({
<Link
href="/"
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>
</Link>
</div>
<nav>
<ul className="mt-7 text-left">
{siteConfig.header.map((item, index) => (
{headerLinks.map((item, index) => (
<li key={index} className="my-3">
{item.trigger ? (
<span className="font-semibold">{item.trigger}</span>
) : (
<Link href={item.href || ""} className="font-semibold">
<Link
href={index === 0 ? item.href : "/#"}
className={cn(
"font-semibold",
item.href === pathName && "underline"
)}
onClick={() => setOpen(false)}
>
{item.label}
</Link>
)}
</li>
))}
</ul>

143
src/components/menu.tsx
View File

@ -14,67 +14,116 @@ import {
} from "@/components/ui/navigation-menu";
import { siteConfig } from "@/lib/config";
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() {
const pathName = usePathname();
console.log(pathName);
return (
<NavigationMenu>
<NavigationMenuList>
{siteConfig.header.map((item, index) => (
{headerLinks.map((item, 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
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.content.main.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 || ""}
// href={item.href || ""}
href={index === 0 ? item.href : "/#"}
target="_arya"
legacyBehavior
passHref
>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
<NavigationMenuLink
className={cn(
navigationMenuTriggerStyle(),
item.href === pathName && "underline"
)}
>
{item.label}
</NavigationMenuLink>
</Link>
)}
</NavigationMenuItem>
))}
</NavigationMenuList>

15
src/components/sections/cta.tsx
View File

@ -1,5 +1,9 @@
"use client";
import Link from "next/link";
import { motion } from "framer-motion";
import { Rocket } from "lucide-react";
import { cn } from "@/lib/utils";
@ -7,6 +11,8 @@ import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import Section from "@/components/section";
const ease = [0.16, 1, 0.3, 1];
export default function CtaSection() {
return (
<Section
@ -15,7 +21,12 @@ export default function CtaSection() {
subtitle="Join us and try our agentic AI into your operations."
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
href={`${process.env.NEXT_PUBLIC_DASHBOARD_URL}/explore`}
className={cn(
@ -26,7 +37,7 @@ export default function CtaSection() {
<Rocket className="h-6 w-6" />
Get started
</Link>
</div>
</motion.div>
</Section>
);
}

88
src/components/sections/footer.tsx
View File

@ -4,15 +4,32 @@ import Image from "next/image";
import { ChevronRight } from "lucide-react";
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() {
return (
<footer>
<div className="layout py-16 sm:px-10 px-5 pb-0">
<a
<div className="layout py-16 sm:px-10 px-5">
<div className="grid sm:grid-cols-3">
<div>
<Link
href="/"
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
src="/logo.png"
@ -21,12 +38,46 @@ export default function Footer() {
alt="logo"
className="rounded-md shadow"
/>
{/* <Icons.logo className="w-auto h-[40px]" /> */}
<span className="font-bold text-xl">{siteConfig.name}</span>
</a>
<div className="grid md:grid-cols-3 lg:grid-cols-4 sm:grid-cols-2 mt-8">
{siteConfig.footer.map((section, index) => (
</Link>
<p className="mb-5">Build advanced custom ai agents with no code</p>
<ul className="flex gap-3">
<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">
<h2 className="font-semibold">{section.title}</h2>
<ul>
@ -46,27 +97,6 @@ export default function Footer() {
</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>
</footer>
);

16
src/components/sections/header.tsx
View File

@ -26,7 +26,9 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button, buttonVariants } from "@/components/ui/button";
import Menu from "@/components/menu";
import Spinner from "../spinner";
import { Skeleton } from "../ui/skeleton";
export default function Header() {
const [addBorder, setAddBorder] = React.useState(false);
@ -66,11 +68,11 @@ export default function Header() {
<header
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
href="/"
title="brand-logo"
className="relative mr-6 flex items-center space-x-2"
className="grow relative flex items-center space-x-2"
>
<Image
src="/logo.png"
@ -84,9 +86,12 @@ export default function Header() {
<div className="hidden lg:block">
<div className="flex items-center ">
<nav className="mr-10">
<Menu />
</nav>
<div className="gap-2 flex">
{!ready ? (
<Spinner />
<Skeleton className="h-10 w-32" />
) : (
<>
{authenticated && user ? (
@ -162,7 +167,7 @@ export default function Header() {
</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 ? (
<DropdownMenu>
<DropdownMenuTrigger className="max-w-48 flex items-center gap-2 border p-2 rounded-md">
@ -225,6 +230,9 @@ export default function Header() {
</Button>
)}
</div>
<div className="ml-1 mt-2 cursor-pointer block lg:hidden">
<Drawer login={login} />
</div>
</div>
<hr
className={cn(

22
src/components/sections/hero.tsx
View File

@ -20,30 +20,14 @@ function HeroPill() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease }}
>
<Link
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="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">
📣 Announcement
</div>
<p className="text-xs font-medium text-primary sm:text-sm">
Introducing beactio.ai
</p>
<svg
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>
</div>
</motion.div>
);
}
@ -158,7 +142,7 @@ function HeroImage() {
export default function Hero2() {
return (
<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 />
<HeroTitles />
<HeroCTA />

2
src/components/ui/navigation-menu.tsx
View File

@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item;
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<

18
src/lib/config.tsx
View File

@ -216,15 +216,15 @@ export const siteConfig = {
// { href: "#", text: "Partners", icon: null },
// ],
// },
{
title: "Resources",
links: [
// { href: "#", text: "Community", icon: null },
// { href: "#", text: "Contact", icon: null },
{ href: "#", text: "Support", icon: null },
{ href: "#", text: "Status", icon: null },
],
},
// {
// title: "Resources",
// links: [
// // { href: "#", text: "Community", icon: null },
// // { href: "#", text: "Contact", icon: null },
// { href: "#", text: "Support", icon: null },
// { href: "#", text: "Status", icon: null },
// ],
// },
{
title: "Social",
links: [