diff --git a/package-lock.json b/package-lock.json index 9b87915..768c45f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "canvas-confetti": "^1.9.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "framer-motion": "^11.3.21", + "framer-motion": "^11.18.2", "geist": "^1.3.1", "lucide-react": "^0.417.0", "motion": "^12.0.11", @@ -45,7 +45,9 @@ "remark-parse": "^11.0.0", "remark-rehype": "^11.1.1", "shiki": "^1.22.0", + "simplex-noise": "^4.0.3", "sonner": "^1.7.4", + "swiper": "^11.2.2", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", "unified": "^11.0.5", @@ -10850,6 +10852,11 @@ "is-arrayish": "^0.3.1" } }, + "node_modules/simplex-noise": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/simplex-noise/-/simplex-noise-4.0.3.tgz", + "integrity": "sha512-qSE2I4AngLQG7BXqoZj51jokT4WUXe8mOBrvfOXpci8+6Yu44+/dD5zqDpOx3Ux792eamTd2lLcI8jqFntk/lg==" + }, "node_modules/sonic-boom": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-2.8.0.tgz", @@ -11354,6 +11361,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz", + "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tabbable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", diff --git a/package.json b/package.json index f67e02c..0f250c8 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "canvas-confetti": "^1.9.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "framer-motion": "^11.3.21", + "framer-motion": "^11.18.2", "geist": "^1.3.1", "lucide-react": "^0.417.0", "motion": "^12.0.11", @@ -46,7 +46,9 @@ "remark-parse": "^11.0.0", "remark-rehype": "^11.1.1", "shiki": "^1.22.0", + "simplex-noise": "^4.0.3", "sonner": "^1.7.4", + "swiper": "^11.2.2", "tailwind-merge": "^2.4.0", "tailwindcss-animate": "^1.0.7", "unified": "^11.0.5", diff --git a/public/background-6.png b/public/background-6.png new file mode 100644 index 0000000..9c12f70 Binary files /dev/null and b/public/background-6.png differ diff --git a/src/app/(main)/_components/cta.tsx b/src/app/(main)/_components/cta.tsx index 2a8a138..2ae9ada 100644 --- a/src/app/(main)/_components/cta.tsx +++ b/src/app/(main)/_components/cta.tsx @@ -12,7 +12,7 @@ import BlurFade from "@/components/blur-fade"; export function CTA() { return (
-
+
-
+
@@ -80,17 +80,23 @@ export function Features() {
-
-
+
+
{FEATURE_LIST.map((feature, index) => ( - +
{feature.icon}
-

{feature.heading}

-

{feature.desc}

+
+ +

/{feature.heading}

+
+

{feature.desc}

 diff --git a/src/app/(main)/_components/hero.tsx b/src/app/(main)/_components/hero.tsx index 53abdfc..99cef1f 100644 --- a/src/app/(main)/_components/hero.tsx +++ b/src/app/(main)/_components/hero.tsx @@ -209,22 +209,10 @@ export function Hero() { return (
-
-
-
- - - -
-
- +
+ + +
diff --git a/src/app/(main)/_components/roadmap.tsx b/src/app/(main)/_components/roadmap.tsx index d948ac3..9972890 100644 --- a/src/app/(main)/_components/roadmap.tsx +++ b/src/app/(main)/_components/roadmap.tsx @@ -23,7 +23,7 @@ export function Roadmap() { return (
-
+
@@ -67,23 +67,24 @@ export function Roadmap() {
-
    +
      {ROADMAPS.map((roadmap, idx) => ( - -
    • -
      + +

      Q{idx + 1} 2025

      -

      Phase 0{idx + 1}

      -

      {roadmap}

      -
      • -       +
      + +

      /Phase 0{idx + 1}

      +
      +

      {roadmap}

      + + ))}
    -
    +
    @@ -72,7 +72,7 @@ export function Tokenomics() {
    -
    +
    {STATS.map((stat, idx) => ( - - -
    -
    -

    - {stat.value} -

    + + +
    +
    +
    +
    + +

    + {stat.value} +

    +

    {stat.desc}

    -
    diff --git a/src/app/(main)/agents/[agentId]/_components/ask-agent-card.tsx b/src/app/(main)/agents/[agentId]/_components/ask-agent-card.tsx index 8e02508..d7b314d 100644 --- a/src/app/(main)/agents/[agentId]/_components/ask-agent-card.tsx +++ b/src/app/(main)/agents/[agentId]/_components/ask-agent-card.tsx @@ -179,7 +179,7 @@ const CardContent = ({ }; return ( - +
    diff --git a/src/app/(main)/agents/[agentId]/_components/heading.tsx b/src/app/(main)/agents/[agentId]/_components/heading.tsx index 1a57917..bf7742d 100644 --- a/src/app/(main)/agents/[agentId]/_components/heading.tsx +++ b/src/app/(main)/agents/[agentId]/_components/heading.tsx @@ -7,14 +7,15 @@ import { ANIMATION_EASE } from "@/lib/config"; import { AuroraText } from "@/components/aurora-text"; import { Section } from "@/components/section"; import { cn } from "@/lib/utils"; +import { Icons } from "@/components/icons"; export function Heading() { return (
    -
    +
    - Ask a Question + + Ask a Question +
    diff --git a/src/app/(main)/agents/[agentId]/_components/response-agent-card.tsx b/src/app/(main)/agents/[agentId]/_components/response-agent-card.tsx index 036daec..5a9a407 100644 --- a/src/app/(main)/agents/[agentId]/_components/response-agent-card.tsx +++ b/src/app/(main)/agents/[agentId]/_components/response-agent-card.tsx @@ -18,6 +18,7 @@ import { Separator } from "@/components/ui/separator"; import { Button, buttonVariants } from "@/components/ui/button"; import Spinner from "@/components/spinner"; +import { Card } from "@/components/ui/card"; type ResponseAgentCardProps = { agentResponseId: string; @@ -80,7 +81,7 @@ const CardContent = ({ const { id, agent_id, question, response, agents } = agentResponse; return ( - <> +
    - +     ); }; diff --git a/src/app/(main)/agents/[agentId]/page.tsx b/src/app/(main)/agents/[agentId]/page.tsx index 7d34fb5..60508d5 100644 --- a/src/app/(main)/agents/[agentId]/page.tsx +++ b/src/app/(main)/agents/[agentId]/page.tsx @@ -1,6 +1,8 @@ import { Footer } from "@/components/footer"; import { Heading } from "./_components/heading"; import { AskAgentCard } from "./_components/ask-agent-card"; +import { Particles } from "@/components/particles"; +import { Header } from "@/components/header"; export default async function ChatToAgent({ params, @@ -8,18 +10,24 @@ export default async function ChatToAgent({ params: Promise<{ agentId: string }>; }) { const { agentId } = await params; - + return ( - <> +
    +
    -
    -
    +
    -
    - + +
    ); } diff --git a/src/app/(main)/agents/[agentId]/responses/[responseId]/_components/heading.tsx b/src/app/(main)/agents/[agentId]/responses/[responseId]/_components/heading.tsx index 1a57917..bf7742d 100644 --- a/src/app/(main)/agents/[agentId]/responses/[responseId]/_components/heading.tsx +++ b/src/app/(main)/agents/[agentId]/responses/[responseId]/_components/heading.tsx @@ -7,14 +7,15 @@ import { ANIMATION_EASE } from "@/lib/config"; import { AuroraText } from "@/components/aurora-text"; import { Section } from "@/components/section"; import { cn } from "@/lib/utils"; +import { Icons } from "@/components/icons"; export function Heading() { return (
    -
    +
    - Ask a Question + + Ask a Question +
    diff --git a/src/app/(main)/agents/[agentId]/responses/[responseId]/page.tsx b/src/app/(main)/agents/[agentId]/responses/[responseId]/page.tsx index 4ebe3a6..e8f918c 100644 --- a/src/app/(main)/agents/[agentId]/responses/[responseId]/page.tsx +++ b/src/app/(main)/agents/[agentId]/responses/[responseId]/page.tsx @@ -2,6 +2,8 @@ import { Footer } from "@/components/footer"; import { Heading } from "./_components/heading"; import { AskAgentCard } from "../../_components/ask-agent-card"; import ResponseAgentCard from "../../_components/response-agent-card"; +import { Header } from "@/components/header"; +import { Particles } from "@/components/particles"; export default async function AgentResponse({ params, @@ -11,22 +13,27 @@ export default async function AgentResponse({ const { agentId, responseId } = await params; return ( - <> +
    +
    -
    -
    +
    -
    -
    +
    -
    - + +
    ); } diff --git a/src/app/(main)/agents/_components/agent-card.tsx b/src/app/(main)/agents/_components/agent-card.tsx index fef3e75..e6ef212 100644 --- a/src/app/(main)/agents/_components/agent-card.tsx +++ b/src/app/(main)/agents/_components/agent-card.tsx @@ -3,23 +3,21 @@ import Image from "next/image"; import { User } from "@privy-io/react-auth"; -import { motion } from "framer-motion"; - import { toast } from "sonner"; -import { Pencil, Play, Share2 } from "lucide-react"; +import { ChevronRight } from "lucide-react"; import { Tables } from "@/utils/supabase/database.types"; import { cn, formatDate } from "@/lib/utils"; -import { ANIMATION_EASE } from "@/lib/config"; import { Button, buttonVariants } from "@/components/ui/button"; +import { Icons } from "@/components/icons"; type AgentCardProps = { data: Tables<"agents">; - idx: number; user: User | null; + isActive: boolean; }; export default function AgentCard(props: AgentCardProps) { @@ -36,47 +34,94 @@ export default function AgentCard(props: AgentCardProps) { } = props.data; return ( - +
    {image_url && ( {name} )}
    -

    {name}

    -
    - {conversation} chats +
    + +

    /{name}

    +
    + +
    + {conversation} chat{conversation > 1 && "s"}

    {description}

    -

    -
    + {!props.user || user_id !== props.user.id ? ( + + ) : ( + + + + + + Edit + + + )} +
    - Try it + __ Try it
    - {!props.user || user_id !== props.user.id ? ( - - ) : ( - - - - - Edit - - )} - + ); } diff --git a/src/app/(main)/agents/_components/agent-list.tsx b/src/app/(main)/agents/_components/agent-list.tsx index e59fccd..2e65793 100644 --- a/src/app/(main)/agents/_components/agent-list.tsx +++ b/src/app/(main)/agents/_components/agent-list.tsx @@ -1,5 +1,7 @@ "use client"; +import React, { Fragment } from "react"; + import Link from "next/link"; import Image from "next/image"; @@ -7,30 +9,36 @@ import { parseAsInteger, useQueryState } from "nuqs"; import { PrivyInterface, usePrivy } from "@privy-io/react-auth"; -import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react"; +import { ChevronLeft, ChevronRight, Search } from "lucide-react"; import { motion } from "framer-motion"; -import { useQuery } from "@tanstack/react-query"; +import Spline from "@splinetool/react-spline"; + +import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; import PostgrestError, { ANIMATION_EASE } from "@/lib/config"; -import { cn } from "@/lib/utils"; +import { cn, getRange } from "@/lib/utils"; import { Input } from "@/components/ui/input"; -import { Section } from "@/components/section"; import { Button, buttonVariants } from "@/components/ui/button"; -import { - Pagination, - PaginationContent, - PaginationItem, -} from "@/components/ui/pagination"; +import { Skeleton } from "@/components/ui/skeleton"; +import { Particles } from "@/components/particles"; +import { Icons } from "@/components/icons"; import { createClient } from "@/utils/supabase/client"; import AgentCard from "./agent-card"; import AgentCardSkeleton from "./agent-card-skeleton"; -import { Skeleton } from "@/components/ui/skeleton"; + +import { Swiper, SwiperSlide } from "swiper/react"; +import { Autoplay, EffectCoverflow, Navigation } from "swiper/modules"; +import "swiper/css"; +import "swiper/css/effect-coverflow"; +import "swiper/css/pagination"; +import "swiper/css/navigation"; +import "swiper/css/navigation"; const DATA_DISPLAY = 9; @@ -67,8 +75,8 @@ function AgentListFilter({ privyAuth }: { privyAuth: PrivyInterface }) { aria-label="search" id="search" type="search" - placeholder="Search..." - className="min-w-64 pl-7" + placeholder=">>>_Awaiting input..." + className="min-w-64 pl-7 border-primary rounded-none" value={searchFilter} onChange={(e) => { setPaginationFilter(0); @@ -77,7 +85,7 @@ function AgentListFilter({ privyAuth }: { privyAuth: PrivyInterface }) { : setSearchFilter(e.target.value); }} /> - +
    {!ready ? ( @@ -97,6 +105,7 @@ function AgentListFilter({ privyAuth }: { privyAuth: PrivyInterface }) { viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + className="mr-2" > - Create new Agent + + Create new Agent + ) : ( )} @@ -145,24 +159,18 @@ function AgentListCards({ privyAuth }: { privyAuth: PrivyInterface }) { history: "push", }); - const [paginationFilter, setPaginationFilter] = useQueryState( - "page", - parseAsInteger - .withOptions({ - shallow: false, - history: "push", - scroll: false, - }) - .withDefault(0) - ); - const { data: agentsData, isLoading, error, - } = useQuery({ - queryKey: ["agents", searchFilter, paginationFilter], - queryFn: async ({ signal }) => { + isFetchingNextPage, + hasNextPage, + fetchNextPage, + } = useInfiniteQuery({ + queryKey: ["agents", searchFilter], + queryFn: async ({ signal, pageParam }) => { + const range = getRange(pageParam, DATA_DISPLAY); + const supabase = createClient(); const response = await supabase @@ -170,21 +178,30 @@ function AgentListCards({ privyAuth }: { privyAuth: PrivyInterface }) { .select("*", { count: "exact" }) .ilike("name", `%${searchFilter}%`) .order("id", { ascending: false }) - .range( - paginationFilter * DATA_DISPLAY, - paginationFilter * DATA_DISPLAY + DATA_DISPLAY - 1 - ); + .range(range[0], range[1]); - console.log(response); if (response.error) throw new PostgrestError(response.error); return response; }, + initialPageParam: 0, + getNextPageParam: (lastPage, allPages) => { + // console.log({ lastPage, allPages }); + + if (!lastPage.count) return undefined; + + const nextPage: number | undefined = + allPages.length * DATA_DISPLAY < lastPage.count + ? allPages?.length + : undefined; + + return nextPage; + }, }); return ( <> - {agentsData && agentsData.data.length === 0 && ( + {agentsData && agentsData.pages.length === 0 && (
    - {[...Array(9)].map((_, idx) => ( + {[...Array(3)].map((_, idx) => (
    • ))} ) : ( -
      - {agentsData && - agentsData.data?.map((agent, idx) => ( - - ))} -
    + <> + {agentsData && ( +
    + { + if (hasNextPage) fetchNextPage(); + }} + modules={[EffectCoverflow, Autoplay, Navigation]} + > + {agentsData.pages.map((page, idx) => ( + + {page.data.map((agent, idx2) => ( + + {({ isActive }) => ( + + )} + + ))} + + ))} + {isFetchingNextPage && ( + + + + )} + +
      + + +
    +
    + )} + )} - {agentsData ? ( - - - - - -

    - Page {paginationFilter + 1} of{" "} - {agentsData.count - ? Math.ceil(agentsData.count / DATA_DISPLAY) - : 1} -

    - - - -     -     - ) : null} ); } export function AgentList() { + const [showCirlce, setShowCircle] = React.useState(true); + const privyAuth = usePrivy(); + const swiperCss = ` + .swiper{ + width: 90%; + } + .swiper-3d .swiper-slide-shadow-left { + background-image: none; + } + .swiper-3d .swiper-slide-shadow-right{ + background: none; + } + `; + return ( -
    -
    -
    - + <> + +
    +
    + {showCirlce ? ( + +
    + +
    + +     + ) : ( + <> +
    + +
    + + + )}
    - -
    -
    +
+ {!showCirlce && ( + + + + )} + + ); +} + +function SwiperButton({ variant }: { variant: "prev" } | { variant: "next" }) { + return ( + ); } diff --git a/src/app/(main)/agents/_components/heading.tsx b/src/app/(main)/agents/_components/heading.tsx index 6c6bc00..c8ff06e 100644 --- a/src/app/(main)/agents/_components/heading.tsx +++ b/src/app/(main)/agents/_components/heading.tsx @@ -7,14 +7,15 @@ import { ANIMATION_EASE } from "@/lib/config"; import { AuroraText } from "@/components/aurora-text"; import { Section } from "@/components/section"; import { cn } from "@/lib/utils"; +import { Icons } from "@/components/icons"; export function Heading() { return (
-
+
- Explore Agents + + Explore Agents +
diff --git a/src/app/(main)/agents/create/_components/form-stepper.tsx b/src/app/(main)/agents/create/_components/form-stepper.tsx index 1bfbdca..ec9ffeb 100644 --- a/src/app/(main)/agents/create/_components/form-stepper.tsx +++ b/src/app/(main)/agents/create/_components/form-stepper.tsx @@ -41,6 +41,8 @@ import { Separator } from "@/components/ui/separator"; import AgentForm from "./agent-form"; import Spinner from "@/components/spinner"; +import { WavyBackground } from "@/components/ui/wavy-background"; +import { Particles } from "@/components/particles"; const data = [ { @@ -172,96 +174,120 @@ export function FormStepper() { }; return ( -
-
- - {/* form title */} -
-
-

- Agent Form -

-

- {stepper.current.description} -

+ <> +
+
+ + {currentIndex !== 3 && ( + <> + {/* form title */} +
+
+

+ Agent Form +

+

+ {stepper.current.description} +

+
+
+ {/* form nav */} + + + )} + {/* form content */} +
+ {stepper.switch({ + agentType: () => , + agentForm: () => ( + stepper.next()} + /> + ), + confirmation: () => ( + + ), + complete: () => ( + + ), + })}
-
- {/* form nav */} - - {/* form content */} -
- {stepper.switch({ - agentType: () => , - agentForm: () => ( - stepper.next()} - /> - ), - confirmation: () => ( - - ), - complete: () => ( - - ), - })} -
- -
-
+ +
+
+ {currentIndex !== 3 && ( + + )} + ); } @@ -280,14 +306,14 @@ const AgentTypeComponent = ({ { icon: ( @@ -335,7 +361,7 @@ const AgentTypeComponent = ({ return ( <> -
+
{agentTypes.map((agentType, idx) => (
- + ); }; @@ -464,106 +492,119 @@ const CompleteComponent = ({ }) => { return ( <> -
-
- - - - - - - - - - - -
-

Agent succesfully created!

-

- You can try to have a conversation with your agent. -

- + - - - - Chat with {agentName} - -
- {/* form footer */} -
-
- - Back to home - -
+
+
+ + + + + + + + + + + +
+

+ Agent succesfully created! +

+

+ You can try to have a conversation with your agent. +

+
+ + + + + Chat with {agentName} + + + Back to home + +
+
+
); diff --git a/src/app/(main)/agents/create/_components/heading.tsx b/src/app/(main)/agents/create/_components/heading.tsx index 9356e8f..99ccf4c 100644 --- a/src/app/(main)/agents/create/_components/heading.tsx +++ b/src/app/(main)/agents/create/_components/heading.tsx @@ -7,14 +7,15 @@ import { ANIMATION_EASE } from "@/lib/config"; import { AuroraText } from "@/components/aurora-text"; import { Section } from "@/components/section"; import { cn } from "@/lib/utils"; +import { Icons } from "@/components/icons"; export function Heading() { return (
-
+
- Create you Own Agent + + Create your Own Agent +
diff --git a/src/app/(main)/agents/create/page.tsx b/src/app/(main)/agents/create/page.tsx index a0eb2d4..5fdae6e 100644 --- a/src/app/(main)/agents/create/page.tsx +++ b/src/app/(main)/agents/create/page.tsx @@ -3,15 +3,17 @@ import { CheckSessionProvider } from "@/providers/check-session-provider"; import { Footer } from "@/components/footer"; import { FormStepper } from "./_components/form-stepper"; import { Heading } from "./_components/heading"; +import { Header } from "@/components/header"; export default function CreateAgent() { return ( - -
- -
-