Skip to content

Add Cal.com integration with Calbutton component and update link #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kaihere14 merged 1 commit into from
May 2, 2026
Merged

Add Cal.com integration with Calbutton component and update link #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Comments/Comments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const Comments = ({ showAll = false, hideHeader = false }: CommentsProps) => {
</p>
<button
onClick={handleLogin}
className="flex items-center gap-2 rounded-md border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-black shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:bg-neutral-200 hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:shadow-[0_4px_0_0_#0a0a0a] dark:hover:bg-neutral-800 dark:hover:shadow-[0_2px_0_0_#0a0a0a] dark:active:shadow-none"
className="flex cursor-pointer items-center gap-2 rounded-md border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-black shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:bg-neutral-200 hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:shadow-[0_4px_0_0_#0a0a0a] dark:hover:bg-neutral-800 dark:hover:shadow-[0_2px_0_0_#0a0a0a] dark:active:shadow-none"
>
<svg className="h-4 w-4" viewBox="0 0 24 24">
<path
Expand Down
46 changes: 46 additions & 0 deletions components/Footer/Calbutton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* First make sure that you have installed the package */

/* If you are using yarn */
// yarn add @calcom/embed-react

/* If you are using npm */
// npm install @calcom/embed-react
"use client";

import { useEffect } from "react";

import Image from "next/image";

import { getCalApi } from "@calcom/embed-react";

export default function Calbutton() {
useEffect(() => {
(async function () {
const cal = await getCalApi({ namespace: "connect" });
cal("ui", { hideEventTypeDetails: false, layout: "month_view" });
})();
}, []);
return (
<button
data-cal-namespace="connect"
data-cal-link="arman-dmt7pl/connect"
className="group flex cursor-pointer items-center rounded-lg border bg-neutral-100 px-5 py-1 text-sm font-semibold shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-200 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
>
<Image
src={"/Logo.webp"}
alt="Logo"
width={100}
height={100}
className="mr-1 size-6 object-cover pb-[3px]"
/>
<div className="flex max-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 ease-in-out group-hover:mr-2 group-hover:max-w-[120px] group-hover:opacity-100">
<span className="text-xs">+</span>
<span className="rounded-full bg-neutral-700 p-1 text-xs text-white dark:bg-neutral-600">
You
</span>
</div>
Book a call
</button>
);
}
85 changes: 45 additions & 40 deletions components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,56 @@ import React from "react";

import { Github, Linkedin, Mail } from "lucide-react";

import Calbutton from "./Calbutton";
import { VisitorCounter } from "./VisitorCounter";

const Footer = () => {
return (
<footer className="mt-15 space-y-8 pb-24">
<div className="flex flex-col items-center justify-between gap-6 pb-8 md:flex-row">
<div className="text-center md:text-left">
<p
className={`mb-2 bg-linear-to-r bg-clip-text text-2xl font-bold text-transparent`}
>
Let&apos;s build something amazing.
</p>
<p className={`mb-3 text-sm`}>
Open to freelance projects and collaborations
</p>
<a
href="mailto:armanthakur200814@gmail.com"
className={`group inline-flex items-center gap-2 text-sm transition-colors`}
>
<Mail
size={16}
className="transition-transform group-hover:scale-110"
/>
armanthakur200814@gmail.com
</a>
</div>
<div className="flex gap-3">
<a
href="https://github.com/kaihere14"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Github size={22} />
</a>
<a
href="https://www.linkedin.com/in/arman-thakur14/"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Linkedin size={22} />
</a>
<a
href="mailto:armanthakur200814@gmail.com"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Mail size={22} />
</a>
<div className="flex flex-col items-center">
{/* cal.com connect button */}
<Calbutton />
<div className="flex w-full flex-row items-center justify-between">
<div className="text-center md:text-left">
<p
className={`mb-2 bg-linear-to-r bg-clip-text text-2xl font-bold text-transparent`}
>
Let&apos;s build something amazing.
</p>
<p className={`mb-3 text-sm`}>
Open to freelance projects and collaborations
</p>
<a
href="mailto:armanthakur200814@gmail.com"
className={`group inline-flex items-center gap-2 text-sm transition-colors`}
>
<Mail
size={16}
className="transition-transform group-hover:scale-110"
/>
armanthakur200814@gmail.com
</a>
</div>
<div className="flex gap-3">
<a
href="https://github.com/kaihere14"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Github size={22} />
</a>
<a
href="https://www.linkedin.com/in/arman-thakur14/"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Linkedin size={22} />
</a>
<a
href="mailto:armanthakur200814@gmail.com"
className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
>
<Mail size={22} />
</a>
</div>
</div>
</div>
<div className={`border-t pt-8 text-center`}>
Expand Down
2 changes: 1 addition & 1 deletion components/Projects/Projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const projects: ProjectType[] = [
"Drizzle ORM",
],
status: "All Systems Operational",
link: "https://www.clura.armandev.space/",
link: "https://clura.armandev.space/",
githubLink: "https://github.com/kaihere14/clura",
},
{
Expand Down
30 changes: 30 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"check-types": "tsc --noEmit"
},
"dependencies": {
"@calcom/embed-react": "^1.5.3",
"@radix-ui/react-avatar": "^1.1.11",
"@trivago/prettier-plugin-sort-imports": "^6.0.2",
"@vercel/analytics": "^1.6.1",
Expand Down
Loading