diff --git a/apps/core/app/(landing)/_assets/be.svg b/apps/core/app/(landing)/_assets/be.svg new file mode 100644 index 00000000..71365fa8 --- /dev/null +++ b/apps/core/app/(landing)/_assets/be.svg @@ -0,0 +1,341 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/core/app/(landing)/_assets/logo-brand.svg b/apps/core/app/(landing)/_assets/logo-brand.svg new file mode 100644 index 00000000..5371f514 --- /dev/null +++ b/apps/core/app/(landing)/_assets/logo-brand.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/core/app/(landing)/become-auther/_components/3d-card.tsx b/apps/core/app/(landing)/become-auther/_components/3d-card.tsx new file mode 100644 index 00000000..c31e6f29 --- /dev/null +++ b/apps/core/app/(landing)/become-auther/_components/3d-card.tsx @@ -0,0 +1,155 @@ +"use client"; + +import { cn } from "@repo/ui/lib/utils"; + +import React, { + createContext, + useState, + useContext, + useRef, + useEffect, +} from "react"; + +const MouseEnterContext = createContext< + [boolean, React.Dispatch>] | undefined +>(undefined); + +export const CardContainer = ({ + children, + className, + containerClassName, +}: { + children?: React.ReactNode; + className?: string; + containerClassName?: string; +}) => { + const containerRef = useRef(null); + const [isMouseEntered, setIsMouseEntered] = useState(false); + + const handleMouseMove = (e: React.MouseEvent) => { + if (!containerRef.current) return; + const { left, top, width, height } = + containerRef.current.getBoundingClientRect(); + const x = (e.clientX - left - width / 2) / 25; + const y = (e.clientY - top - height / 2) / 25; + containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`; + }; + + const handleMouseEnter = (e: React.MouseEvent) => { + setIsMouseEntered(true); + if (!containerRef.current) return; + }; + + const handleMouseLeave = (e: React.MouseEvent) => { + if (!containerRef.current) return; + setIsMouseEntered(false); + containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`; + }; + return ( + +
+
+ {children} +
+
+ + ); +}; + +export const CardBody = ({ + children, + className, +}: { + children: React.ReactNode; + className?: string; +}) => { + return ( +
*]:[transform-style:preserve-3d]", + className + )} + > + {children} +
+ ); +}; + +export const CardItem = ({ + as: Tag = "div", + children, + className, + translateX = 0, + translateY = 0, + translateZ = 0, + rotateX = 0, + rotateY = 0, + rotateZ = 0, + ...rest +}: { + as?: React.ElementType; + children: React.ReactNode; + className?: string; + translateX?: number | string; + translateY?: number | string; + translateZ?: number | string; + rotateX?: number | string; + rotateY?: number | string; + rotateZ?: number | string; + [key: string]: any; +}) => { + const ref = useRef(null); + const [isMouseEntered] = useMouseEnter(); + + useEffect(() => { + handleAnimations(); + }, [isMouseEntered]); + + const handleAnimations = () => { + if (!ref.current) return; + if (isMouseEntered) { + ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; + } else { + ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`; + } + }; + + return ( + + {children} + + ); +}; + +// Create a hook to use the context +export const useMouseEnter = () => { + const context = useContext(MouseEnterContext); + if (context === undefined) { + throw new Error("useMouseEnter must be used within a MouseEnterProvider"); + } + return context; +}; diff --git a/apps/core/app/(landing)/become-auther/_components/auther-form.tsx b/apps/core/app/(landing)/become-auther/_components/auther-form.tsx index dbaad5c6..558a4b5c 100644 --- a/apps/core/app/(landing)/become-auther/_components/auther-form.tsx +++ b/apps/core/app/(landing)/become-auther/_components/auther-form.tsx @@ -1,8 +1,8 @@ "use client"; import { zodResolver } from "@hookform/resolvers/zod"; -import { postBecomeAutherSchema } from "@repo/apis/core/accounts/request-author/post/post-become-auther.schema"; -import { PostBecomeAutherRequest } from "@repo/apis/core/accounts/request-author/post/post-become-auther.types"; -import { usePostBecomeAuther } from "@repo/apis/core/accounts/request-author/post/use-post-become-auther"; +import { postRequestAuthorSchema } from "@repo/apis/core/api/request-author/post/post-request-author.schema"; +import { PostRequestAuthorRequest } from "@repo/apis/core/api/request-author/post/post-request-author.types"; +import { UsePostRequestAuthor } from "@repo/apis/core/api/request-author/post/use-post-request-author"; import { Button, Typography } from "@repo/ui/components"; import { Input } from "@repo/ui/components"; import { Label } from "@repo/ui/components"; @@ -12,13 +12,13 @@ import { useForm } from "react-hook-form"; import { AutherLayout } from "./auther-layout"; import AutherResult from "./auther-result"; import Image from "next/image"; -import BecomeAnAuthorimage from "../../_assets/become-auther.svg"; + const AutherForm = () => { const [isSubmitted, setIsSubmitted] = useState(false); - const form = useForm({ - resolver: zodResolver(postBecomeAutherSchema.request), + const form = useForm({ + resolver: zodResolver(postRequestAuthorSchema.request), }); const { @@ -27,27 +27,35 @@ const AutherForm = () => { formState: { errors }, } = form; console.log("errors", errors); - const mutation = usePostBecomeAuther({ + const mutation = UsePostRequestAuthor({ onSuccess: () => { setIsSubmitted(true); }, }); - const onSubmit = (data: PostBecomeAutherRequest) => { - console.log("data", data); - mutation.mutate(data); + const onSubmit = (data: PostRequestAuthorRequest) => { + const formData = { + ...data, + file: data.file?.[0] ? 1 : 0, // Check if file exists in the FileList + link: data.portfolioLink + }; + mutation.mutate(formData); }; return (
{isSubmitted ? ( - // Show result form after submission +
+
+ +
+
) : ( -
-
-
- +
+
+
+ Become an Author { >
+
+
+