[];
11 | }
12 |
13 | export const ButtonGroup = ({
14 | className,
15 |
16 | children,
17 | }: ButtonGroupProps) => {
18 | const totalButtons = Children.count(children);
19 |
20 | return (
21 |
22 | {Children.map(children, (child, index) => {
23 | const isFirst = index === 0;
24 | const isLast = index === totalButtons - 1;
25 |
26 | return cloneElement(child, {
27 | className: cn(
28 | {
29 | "rounded-l-none": !isFirst,
30 | "rounded-r-none": !isLast,
31 | "border-l-0": !isFirst,
32 | },
33 | child.props.className
34 | ),
35 | });
36 | })}
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/components/ui/animated-gradient-text.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export default function AnimatedGradientText({
6 | children,
7 | className,
8 | }: {
9 | children: ReactNode;
10 | className?: string;
11 | }) {
12 | return (
13 |
19 |
22 |
23 | {children}
24 |
2 |
4 |
--------------------------------------------------------------------------------
/app/components/landingPage/LampDiv.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { LampContainer } from "@/components/ui/lamp";
4 | import React from "react";
5 | import { SparklesCore } from "@/components/ui/sparkles";
6 | import { motion } from "framer-motion";
7 |
8 | export function LampDemo() {
9 | return (
10 |
11 |
21 |
31 |
32 | );
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/app/components/dashboard/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Ban, PlusCircle } from "lucide-react";
3 | import Link from "next/link";
4 |
5 | interface iAppProps {
6 | title: string;
7 | description: string;
8 | buttonText: string;
9 | href: string;
10 | }
11 |
12 | export function EmptyState({
13 | buttonText,
14 | description,
15 | href,
16 | title,
17 | }: iAppProps) {
18 | return (
19 |
20 |
21 |
23 |
{title}
24 |
25 | {description}
26 |
27 |
28 |
29 |
33 |
= ({
12 | children,
13 | className,
14 | shimmerWidth = 100,
15 | }) => {
16 | return (
17 |
35 | {children}
36 |
37 | );
38 | };
39 |
40 | export default AnimatedShinyText;
41 |
--------------------------------------------------------------------------------
/app/dashboard/event/[eventTypeId]/page.tsx:
--------------------------------------------------------------------------------
1 | import { EditEventTypeForm } from "@/app/components/dashboard/EditEventTypeForm";
2 | import prisma from "@/app/lib/db";
3 | import { notFound } from "next/navigation";
4 | import React from "react";
5 |
6 | async function getData(eventTypeId: string) {
7 | const data = await prisma.eventType.findUnique({
8 | where: {
9 | id: eventTypeId,
10 | },
11 | select: {
12 | title: true,
13 | description: true,
14 | duration: true,
15 | url: true,
16 | id: true,
17 | videoCallSoftware: true,
18 | },
19 | });
20 |
21 | if (!data) {
22 | return notFound();
23 | }
24 |
25 | return data;
26 | }
27 | const EditEventTypePage = async ({
28 | params,
29 | }: {
30 | params: { eventTypeId: string };
31 | }) => {
32 | const data = await getData(params.eventTypeId);
33 |
34 | return (
35 | {
32 | startTransition(() => {
33 | action({
34 | isChecked: isChecked,
35 | eventTypeId,
36 | });
37 | });
38 | }}
39 | />
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/app/components/landingPage/Cards/cardsfeatures.tsx:
--------------------------------------------------------------------------------
1 | import { FeatureCard } from './feature-card';
2 | import { featuresList } from './features-list';
3 |
4 | export function FeaturesGrid() {
5 | return (
6 |
7 |
8 |
9 | everything you need to know
10 |
11 |
12 |
13 | Enjoy customizable lists, team work tools, and smart tracking all in
14 | one place. Set tasks, get reminders, and see your progress simply
15 | and quickly.
16 |
17 |
18 |
19 | {featuresList.map((feature) => (
20 |
23 |
24 |
2 |
4 |
--------------------------------------------------------------------------------
/components/ui/gradual-spacing.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AnimatePresence, motion, Variants } from "framer-motion";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | interface GradualSpacingProps {
8 | text: string;
9 | duration?: number;
10 | delayMultiple?: number;
11 | framerProps?: Variants;
12 | className?: string;
13 | }
14 |
15 | export default function GradualSpacing({
16 | text,
17 | duration = 0.5,
18 | delayMultiple = 0.04,
19 | framerProps = {
20 | hidden: { opacity: 0, x: -20 },
21 | visible: { opacity: 1, x: 0 },
22 | },
23 | className,
24 | }: GradualSpacingProps) {
25 | return (
26 |
27 |
28 | {text.split("").map((char, i) => (
29 |
38 | {char === " " ? : char}
39 |
40 | ))}
41 |
42 |
& {
9 | isDateUnavailable?: (date: DateValue) => boolean;
10 | }
11 | ) {
12 | const { locale } = useLocale();
13 | const state = useCalendarState({
14 | ...props,
15 | visibleDuration: { months: 1 },
16 | locale,
17 | createCalendar,
18 | });
19 |
20 | const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
21 | props,
22 | state
23 | );
24 | return (
25 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider;
9 |
10 | const Tooltip = TooltipPrimitive.Root;
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 | ,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 |
26 | ))
27 | Switch.displayName = SwitchPrimitives.Root.displayName
28 |
29 | export { Switch }
30 |
--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 | secondary:
14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 | destructive:
16 | "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 | outline: "text-foreground",
18 | },
19 | },
20 | defaultVariants: {
21 | variant: "default",
22 | },
23 | }
24 | )
25 |
26 | export interface BadgeProps
27 | extends React.HTMLAttributes,
28 | VariantProps {}
29 |
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 | return (
32 |
33 | )
34 | }
35 |
36 | export { Badge, badgeVariants }
37 |
--------------------------------------------------------------------------------
/app/dashboard/event/[eventTypeId]/delete/page.tsx:
--------------------------------------------------------------------------------
1 | import { DeleteEventTypeAction } from "@/app/actions";
2 | import { Button } from "@/components/ui/button";
3 | import {
4 | Card,
5 | CardDescription,
6 | CardFooter,
7 | CardHeader,
8 | CardTitle,
9 | } from "@/components/ui/card";
10 | import Link from "next/link";
11 | import React from "react";
12 |
13 | const DeleteEventType = ({ params }: { params: { eventTypeId: string } }) => {
14 | return (
15 |
16 |
17 |
18 | Delete Event Type
19 |
20 | Are you sure you want to delete this event type?⚠️
23 |
24 |
25 |
26 |
28 |
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default DeleteEventType;
39 |
--------------------------------------------------------------------------------
/app/api/oauth/exchange/route.ts:
--------------------------------------------------------------------------------
1 | import prisma from "@/app/lib/db";
2 | import { requireUser } from "@/app/lib/hooks";
3 | import { nylas, nylasConfig } from "@/app/lib/nylas";
4 |
5 | import { redirect } from "next/navigation";
6 | import { NextRequest } from "next/server";
7 |
8 | export async function GET(req: NextRequest) {
9 | console.log("Received callback from Nylas");
10 | const session = await requireUser();
11 | const url = new URL(req.url as string);
12 | const code = url.searchParams.get("code");
13 |
14 | if (!code) {
15 | return Response.json("No authorization code returned from Nylas", {
16 | status: 400,
17 | });
18 | }
19 | const codeExchangePayload = {
20 | clientSecret: nylasConfig.apiKey,
21 | clientId: nylasConfig.clientId as string,
22 | redirectUri: nylasConfig.callbackUri,
23 | code,
24 | };
25 |
26 | try {
27 | const response = await nylas.auth.exchangeCodeForToken(codeExchangePayload);
28 | const { grantId, email } = response;
29 |
30 | await prisma.user.update({
31 | where: {
32 | id: session.user?.id as string,
33 | },
34 | data: {
35 | grantId: grantId,
36 | grantEmail: email,
37 | },
38 | });
39 |
40 | console.log({ grantId });
41 | } catch (error) {
42 | console.error("Error exchanging code for token:", error);
43 | }
44 |
45 | redirect("/dashboard");
46 | }
47 |
--------------------------------------------------------------------------------
/app/components/dashboard/ThemeToggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { Moon, Sun } from "lucide-react";
5 | import { useTheme } from "next-themes";
6 |
7 | import { Button } from "@/components/ui/button";
8 | import {
9 | DropdownMenu,
10 | DropdownMenuContent,
11 | DropdownMenuItem,
12 | DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu";
14 |
15 | export function ThemeToggle() {
16 | const { setTheme } = useTheme();
17 |
18 | return (
19 |
20 |
21 |
22 | Toggle theme
25 |
26 |
27 |
28 | setTheme("light")}>
29 | Light
30 |
31 | setTheme("dark")}>
32 | Dark
33 |
34 | setTheme("system")}>
35 | System
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/app/assets/social-youtube.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import localFont from "next/font/local";
3 | import "./globals.css";
4 | import { ThemeProvider } from "./components/dashboard/ThemeProvider";
5 | import { ourFileRouter } from "@/app/api/uploadthing/core";
6 | import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
7 | import { extractRouterConfig } from "uploadthing/server";
8 |
9 | const geistSans = localFont({
10 | src: "./fonts/GeistVF.woff",
11 | variable: "--font-geist-sans",
12 | weight: "100 900",
13 | });
14 | const geistMono = localFont({
15 | src: "./fonts/GeistMonoVF.woff",
16 | variable: "--font-geist-mono",
17 | weight: "100 900",
18 | });
19 |
20 | export const metadata: Metadata = {
21 | title: "Dayflow.io",
22 | description: "Dayflow.io is your next gen AI backed Sheduling software ",
23 | };
24 |
25 | export default function RootLayout({
26 | children,
27 | }: Readonly<{
28 | children: React.ReactNode;
29 | }>) {
30 | return (
31 |
32 |
35 |
41 |
44 |
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/ai.tsx:
--------------------------------------------------------------------------------
1 | // NotFound.js
2 | import React from 'react';
3 | import { useHistory } from 'react-router-dom';
4 | import './NotFound.css'; // Assuming you have a CSS file for styles
5 |
6 | const NotFound = () => {
7 | const history = useHistory();
8 |
9 | const handleGoHome = () => {
10 | history.push('/');
11 | };
12 |
13 | return (
14 |
15 |
404 - Page Not Found
16 |
17 | Oops! The page you're looking for doesn't exist.
18 |
19 |
24 |
25 | Go to Homepage
26 |
27 |
28 |
Here are some links that may help:
29 |
35 |
36 |
,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 | ,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => (
27 | ,
37 | React.ComponentPropsWithoutRef
38 | >(({ className, ...props }, ref) => (
39 |
6 |
7 |
8 | Start using CalMarshal Now!
9 |
10 |
11 | CalMarshal makes it easy for your clients to scheduale a meeting with
12 | you clients.
13 |
14 | < div className="mt-8 flex items-center justify-center gap-x-6">
15 | Get Started Today
16 |
17 | {/* gradient svg */}
18 |
23 |
31 |
32 |
35 |
36 |
37 |
34 | {Array(repeat)
35 | .fill(0)
36 | .map((_, i) => (
37 |
46 | {children}
47 |
48 | ))}
49 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/components/ui/number-ticker.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useRef } from "react";
4 | import { useInView, useMotionValue, useSpring } from "framer-motion";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | export default function NumberTicker({
9 | value,
10 | direction = "up",
11 | delay = 0,
12 | className,
13 | decimalPlaces = 0,
14 | }: {
15 | value: number;
16 | direction?: "up" | "down";
17 | className?: string;
18 | delay?: number; // delay in s
19 | decimalPlaces?: number;
20 | }) {
21 | const ref = useRef(null);
22 | const motionValue = useMotionValue(direction === "down" ? value : 0);
23 | const springValue = useSpring(motionValue, {
24 | damping: 60,
25 | stiffness: 100,
26 | });
27 | const isInView = useInView(ref, { once: true, margin: "0px" });
28 |
29 | useEffect(() => {
30 | isInView &&
31 | setTimeout(() => {
32 | motionValue.set(direction === "down" ? 0 : value);
33 | }, delay * 1000);
34 | }, [motionValue, isInView, delay, value, direction]);
35 |
36 | useEffect(
37 | () =>
38 | springValue.on("change", (latest) => {
39 | if (ref.current) {
40 | ref.current.textContent = Intl.NumberFormat("en-US", {
41 | minimumFractionDigits: decimalPlaces,
42 | maximumFractionDigits: decimalPlaces,
43 | }).format(Number(latest.toFixed(decimalPlaces)));
44 | }
45 | }),
46 | [springValue, decimalPlaces],
47 | );
48 |
49 | return (
50 |
18 |
19 | Get started
20 |
21 |
22 |
23 |
25 | Dayflow.io
26 |
27 |
28 |
29 |
38 |
39 |
48 |
49 |
50 |
51 | );
52 | }
--------------------------------------------------------------------------------
/app/components/landingPage/Newsletter.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/button'
2 | import { Input } from '@/components/ui/input'
3 |
4 | const Newsletter = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | Get exclusive{" "}
12 |
13 | discount{" "}
14 |
15 | on your first purchase
16 |
17 |
18 | Subscribe to newsletter to receive exclusive updates and offers.
19 |
20 |
21 |
22 |
28 | Subscribe
29 |
30 |
31 |
32 |
33 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/app/components/demo/RenderCalendar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter, useSearchParams } from "next/navigation";
4 | import { Calendar } from "./Calendar";
5 | import { useState, useEffect } from "react";
6 | import {
7 | CalendarDate,
8 | DateValue,
9 | getLocalTimeZone,
10 | today,
11 | parseDate,
12 | } from "@internationalized/date";
13 |
14 | interface iAppProps {
15 | daysofWeek: { day: string; isActive: boolean }[];
16 | }
17 |
18 | export function RenderCalendar({ daysofWeek }: iAppProps) {
19 | const router = useRouter();
20 | const searchParams = useSearchParams();
21 |
22 | const [date, setDate] = useState(() => {
23 | const dateParam = searchParams.get("date");
24 | return dateParam ? parseDate(dateParam) : today(getLocalTimeZone());
25 | });
26 |
27 | useEffect(() => {
28 | const dateParam = searchParams.get("date");
29 | if (dateParam) {
30 | setDate(parseDate(dateParam));
31 | }
32 | }, [searchParams]);
33 |
34 | const handleChangeDate = (date: DateValue) => {
35 | console.log(date);
36 | setDate(date as CalendarDate);
37 | const url = new URL(window.location.href);
38 |
39 | url.searchParams.set("date", date.toString());
40 |
41 | router.push(url.toString());
42 | };
43 |
44 | const isDateUnavailable = (date: DateValue) => {
45 | const dayOfWeek = date.toDate(getLocalTimeZone()).getDay();
46 | // Adjust the index to match the daysofWeek array
47 | const adjustedIndex = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
48 | return !daysofWeek[adjustedIndex].isActive;
49 | };
50 |
51 | return (
52 |
53 | {words.split(" ").map((word, i) => (
54 |
59 | {word === "" ? : word}
60 |
61 | ))}
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/components/ui/letter-pullup.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from 'react';
4 | import { motion } from "framer-motion";
5 | import { cn } from "@/lib/utils";
6 |
7 | interface LetterPullupProps {
8 | className?: string;
9 | words: string;
10 | duration?: number;
11 | }
12 |
13 | export default function InfiniteLetterPullup({
14 | className,
15 | words,
16 | duration = 2,
17 | }: LetterPullupProps) {
18 | const letters = words.split("");
19 |
20 | const containerVariants = {
21 | animate: {
22 | transition: {
23 | staggerChildren: 0.1,
24 | repeat: Infinity,
25 | repeatType: "loop" as const,
26 | },
27 | },
28 | };
29 |
30 | const letterVariants = {
31 | initial: { y: 100, opacity: 0 },
32 | animate: {
33 | y: [100, 0, 0, -100],
34 | opacity: [0, 1, 1, 0],
35 | transition: {
36 | duration: duration,
37 | times: [0, 0.1, 0.9, 1],
38 | ease: "easeInOut",
39 | repeat: Infinity,
40 | repeatType: "loop" as const,
41 | },
42 | },
43 | };
44 |
45 | return (
46 |
51 | {letters.map((letter, i) => (
52 |
63 | {letter === " " ? : letter}
64 |
65 | ))}
66 |
67 | );
68 | }
--------------------------------------------------------------------------------
/app/onboarding/grant-id/page.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardContent,
4 | CardDescription,
5 | CardHeader,
6 | CardTitle,
7 | } from "@/components/ui/card";
8 | import React from "react";
9 | import AlmostFinished from "@/public/work-is-almost-over-happy.gif";
10 | import Image from "next/image";
11 | import { Button } from "@/components/ui/button";
12 | import { CalendarCheck2 } from "lucide-react";
13 | import Link from "next/link";
14 |
15 | const GrantIdRoute = () => {
16 | return (
17 |
18 |
19 |
20 | You Are Almost Done!!✅
21 |
22 | We have to now connect your calendar to your account
25 |
31 |
32 |
33 |
38 |
39 | something went wrong?
43 |
49 |
50 |
51 |
52 |
53 |
;
18 | prevButtonProps: AriaButtonProps<"button">;
19 | nextButtonProps: AriaButtonProps<"button">;
20 | }) {
21 | const monthDateFormatter = useDateFormatter({
22 | month: "short",
23 | year: "numeric",
24 | timeZone: state.timeZone,
25 | });
26 |
27 | const [monthName, _, year] = monthDateFormatter
28 | .formatToParts(state.visibleRange.start.toDate(state.timeZone))
29 | .map((part) => part.value);
30 |
31 | return (
32 |
33 |
34 | {calendarProps["aria-label"]}
35 |
36 |
37 |
38 | {monthName}{" "}
39 |
40 | {year}
41 |
42 |
43 |
44 |
45 |
47 |
48 |
50 |
51 |
7 |
9 | );
10 | }
11 | export const projects = [
12 | {
13 | title: "Ultra-Scheduler",
14 | description:
15 | "A $10 trillion enterprise software for global-scale scheduling, optimizing time across industries.",
16 | icon:
9 |
--------------------------------------------------------------------------------
/app/components/demo/CalendarGrid.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DateDuration,
3 | endOfMonth,
4 | getWeeksInMonth,
5 | } from "@internationalized/date";
6 | import { DateValue, useCalendarGrid, useLocale } from "react-aria";
7 | import { CalendarState } from "react-stately";
8 | import { CalendarCell } from "./CalendarCell";
9 |
10 | export function CalendarGrid({
11 | state,
12 | offset = {},
13 | isDateUnavailable,
14 | }: {
15 | state: CalendarState;
16 | offset?: DateDuration;
17 | isDateUnavailable?: (date: DateValue) => boolean;
18 | }) {
19 | const startDate = state.visibleRange.start.add(offset);
20 | const endDate = endOfMonth(startDate);
21 | const { locale } = useLocale();
22 | const { gridProps, headerProps, weekDays } = useCalendarGrid(
23 | {
24 | startDate,
25 | endDate,
26 | weekdayStyle: "short",
27 | },
28 | state
29 | );
30 |
31 | // Get the number of weeks in the month so we can render the proper number of rows.
32 | const weeksInMonth = getWeeksInMonth(startDate, locale);
33 | return (
34 |
35 |
36 |
37 | {weekDays.map((day, index) => (
38 | {day}
39 | ))}
40 |
41 |
42 |
43 | {Array.from({ length: weeksInMonth }, (_, weekIndex) => (
44 |
45 | {state
46 | .getDatesInWeek(weekIndex, startDate)
47 | .map((date, i) =>
48 | date ? (
49 |
61 | ))}
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white shadow hover:bg-primary",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2",
25 | sm: "h-8 rounded-md px-3 text-xs",
26 | lg: "h-10 rounded-md px-8",
27 | icon: "h-9 w-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributes,
39 | VariantProps {
40 | asChild?: boolean
41 | }
42 |
43 | const Button = React.forwardRef(
44 | ({ className, variant, size, asChild = false, ...props }, ref) => {
45 | const Comp = asChild ? Slot : "button"
46 | return (
47 |
21 |
22 |
32 |
33 | {/* Define the gradient */}
34 |
35 |
38 |
47 |
59 |
60 |
61 | );
62 | };
--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes
8 | >(({ className, ...props }, ref) => (
9 |
17 | ))
18 | Card.displayName = "Card"
19 |
20 | const CardHeader = React.forwardRef<
21 | HTMLDivElement,
22 | React.HTMLAttributes
23 | >(({ className, ...props }, ref) => (
24 |
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 |
32 | const CardTitle = React.forwardRef<
33 | HTMLParagraphElement,
34 | React.HTMLAttributes
35 | >(({ className, ...props }, ref) => (
36 |
47 | >(({ className, ...props }, ref) => (
48 |
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 |
56 | const CardContent = React.forwardRef<
57 | HTMLDivElement,
58 | React.HTMLAttributes
59 | >(({ className, ...props }, ref) => (
60 |
61 | ))
62 | CardContent.displayName = "CardContent"
63 |
64 | const CardFooter = React.forwardRef<
65 | HTMLDivElement,
66 | React.HTMLAttributes
67 | >(({ className, ...props }, ref) => (
68 |
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 |
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import {Navbar} from "./components/landingPage/Navbar";
3 | import {Hero} from "./components/landingPage/Hero";
4 | import {LogoTicker} from "./components/landingPage/Logos";
5 | import CardHoverEffect from "./components/landingPage/Cards";
6 | import {Features} from "./components/landingPage/Features";
7 | import FeaturesGrid from "./components/landingPage/Cards/cardsfeatures";
8 | import GridTabs from "./components/landingPage/girdtabs";
9 | import {Testimonial} from "./components/landingPage/Testimonial";
10 | import Services from "./components/landingPage/Services";
11 | import Offerings from "./components/landingPage/offerings";
12 | import Pricing from "./components/landingPage/pricings";
13 | import FAQS from "./components/landingPage/Faqs";
14 | import {Testimonials} from "./components/landingPage/Reviews";
15 | import Tools from "./components/landingPage/Tools";
16 | import Banner from "./components/landingPage/Banner";
17 | import Footer from "./components/landingPage/Footer";
18 | import { auth } from "./lib/auth";
19 | import { redirect } from "next/navigation";
20 | import Testimonialsss from "./components/landingPage/Testimonys";
21 | import Stats from "./components/landingPage/Stats"
22 | import AnimatedBeams from "./components/landingPage/Animated";
23 | import { AuthButton} from "./components/landingPage/AuthButton";
24 |
25 | export default async function Home() {
26 | const session = await auth();
27 |
28 | if (session?.user) {
29 | return redirect("/dashboard");
30 | }
31 |
32 | return (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
Loading...
13 |
14 |
15 |
16 |
18 |
19 | This event is scheduled🥰
20 |
21 |
22 | We emailed you and the other attendees a calendar invitation with
23 | all the details.
24 |
25 |
26 |
29 |
30 |
What
31 |
32 |
33 |
Design Workshop
34 |
35 |
36 |
37 |
When
38 |
39 |
42 |
43 |
Where
44 |
45 |
48 |
50 |
51 |
52 |
54 |
55 |
56 |
(null);
24 | const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } =
25 | useCalendarCell({ date }, state, ref);
26 |
27 | // Override isDisabled if the date is unavailable
28 | const finalIsDisabled = isDisabled || isUnavailable;
29 |
30 | const { focusProps, isFocusVisible } = useFocusRing();
31 |
32 | const isOutsideMonth = !isSameMonth(currentMonth, date);
33 |
34 | const isDateToday = isToday(date, getLocalTimeZone());
35 |
36 | return (
37 |
41 |
47 |
58 | {formattedDate}
59 | {isDateToday && (
60 |
66 | )}
67 |
68 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/app/components/landingPage/Logos.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import WordPullUp from "@/components/ui/word-pull-up";
4 | import acmelogo from "@/app/assets/logo-acme.png";
5 | import apexLogo from "@/app/assets/logo-apex.png";
6 | import celestialLogo from "@/app/assets/logo-celestial.png";
7 | import echoLogo from "@/app/assets/logo-echo.png";
8 | import { motion } from "framer-motion";
9 | import pulseLogo from "@/app/assets/logo-pulse.png";
10 | import quantumLogo from "@/app/assets/logo-quantum.png";
11 |
12 | export const LogoTicker = () => {
13 | return (
14 |
15 | {/* Text is centered and pushed down slightly */}
16 |
33 |
34 |
46 | {[
47 | acmelogo,
48 | apexLogo,
49 | celestialLogo,
50 | quantumLogo,
51 | pulseLogo,
52 | echoLogo,
53 | acmelogo,
54 | apexLogo,
55 | celestialLogo,
56 | quantumLogo,
57 | pulseLogo,
58 | echoLogo,
59 | ].map((logo) => (
60 | // eslint-disable-next-line @next/next/no-img-element
61 |
69 |
70 |
72 | );
73 | };
--------------------------------------------------------------------------------
/app/components/SubmitButton.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import { cn } from "@/lib/utils";
5 | import { Loader2 } from "lucide-react";
6 | import Image from "next/image";
7 | import { useFormStatus } from "react-dom";
8 | import GithubLogo from "@/public/github.svg";
9 | import GoogleLogo from "@/public/google.svg";
10 | import React from "react";
11 | interface iAppProps {
12 | text: string;
13 | variant?:
14 | | "default"
15 | | "destructive"
16 | | "outline"
17 | | "secondary"
18 | | "ghost"
19 | | "link"
20 | | null
21 | | undefined;
22 |
23 | className?:string;
24 | }
25 |
26 | export function SubmitButton({ text, variant, className }: iAppProps) {
27 | const { pending } = useFormStatus();
28 |
29 | return (
30 | <>
31 | {pending ? (
32 |
33 |
35 | ) : (
36 |
41 | {text}
42 |
43 | )}
44 |
45 | );
46 | }
47 |
48 | export function GitHubAuthButton() {
49 | const { pending } = useFormStatus();
50 | return (
51 | <>
52 | {pending ? (
53 |
54 |
56 | ) : (
57 |
58 |
65 | )}
66 |
67 | );
68 | }
69 |
70 | export function GoogleAuthButton() {
71 | const { pending } = useFormStatus();
72 | return (
73 | <>
74 | {pending ? (
75 |
76 |
78 | ) : (
79 |
80 |
83 | )}
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/app/components/landingPage/Cards/icons.tsx:
--------------------------------------------------------------------------------
1 | import type { IconProps as PhosphorProps } from '@phosphor-icons/react'
2 | import * as Phosphor from '@phosphor-icons/react'
3 |
4 | export type Icon = (props: PhosphorProps) => JSX.Element
5 |
6 | export const ArrowRight = Phosphor.ArrowRight
7 | export const Ecosystem = Phosphor.Leaf
8 | export const Plus = Phosphor.Plus
9 | export const Minus = Phosphor.Minus
10 | export const YoutubeLogo = Phosphor.YoutubeLogo
11 | export const XLogo = Phosphor.XLogo
12 | export const InstagramLogo = Phosphor.InstagramLogo
13 | export const TiktokLogo = Phosphor.TiktokLogo
14 | export const LinkedinLogo = Phosphor.LinkedinLogo
15 | export const PinterestLogo = Phosphor.PinterestLogo
16 |
17 | export const Menu: Icon = (props) => (
18 |
26 |
27 |
32 |
33 |
34 |
41 |
42 |
43 | )
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "calcom-nylas",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "prisma generate && next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@auth/prisma-adapter": "^2.5.0",
13 | "@chakra-ui/react": "^2.8.2",
14 | "@conform-to/react": "^1.1.5",
15 | "@conform-to/zod": "^1.1.5",
16 | "@internationalized/date": "^3.5.5",
17 | "@netlify/plugin-nextjs": "^5.7.3",
18 | "@nylas/react": "^1.1.3",
19 | "@phosphor-icons/react": "^2.1.7",
20 | "@prisma/client": "^5.20.0",
21 | "@radix-ui/react-avatar": "^1.1.1",
22 | "@radix-ui/react-dialog": "^1.1.1",
23 | "@radix-ui/react-dropdown-menu": "^2.1.1",
24 | "@radix-ui/react-icons": "^1.3.0",
25 | "@radix-ui/react-label": "^2.1.0",
26 | "@radix-ui/react-select": "^2.1.1",
27 | "@radix-ui/react-separator": "^1.1.0",
28 | "@radix-ui/react-slot": "^1.1.0",
29 | "@radix-ui/react-switch": "^1.1.0",
30 | "@radix-ui/react-tooltip": "^1.1.2",
31 | "@tsparticles/engine": "^3.5.0",
32 | "@tsparticles/react": "^3.0.0",
33 | "@tsparticles/slim": "^3.5.0",
34 | "@uploadthing/react": "^7.0.1",
35 | "class-variance-authority": "^0.7.0",
36 | "clsx": "^2.1.1",
37 | "cobe": "^0.6.3",
38 | "date-fns": "^3.6.0",
39 | "framer-motion": "^11.9.0",
40 | "gsap": "^3.12.5",
41 | "install": "^0.13.0",
42 | "iron-session": "^8.0.3",
43 | "lucide-react": "^0.440.0",
44 | "next": "^14.2.14",
45 | "next-auth": "^5.0.0-beta.21",
46 | "next-themes": "^0.3.0",
47 | "npm": "^10.8.3",
48 | "nylas": "^7.5.2",
49 | "react": "18.2.0",
50 | "react-aria": "^3.34.3",
51 | "react-aria-components": "^1.3.3",
52 | "react-countup": "^6.5.3",
53 | "react-day-picker": "^8.10.1",
54 | "react-dom": "18.2.0",
55 | "react-icons": "^5.3.0",
56 | "react-spring": "^9.7.4",
57 | "react-stately": "^3.32.2",
58 | "recharts": "^2.12.7",
59 | "sharp": "^0.33.5",
60 | "sonner": "^1.5.0",
61 | "tailwind-merge": "^2.5.2",
62 | "tailwindcss-animate": "^1.0.7",
63 | "uploadthing": "^7.0.1",
64 | "zod": "^3.23.8"
65 | },
66 | "devDependencies": {
67 | "@types/node": "^20",
68 | "@types/react": "^18",
69 | "@types/react-dom": "^18",
70 | "eslint": "^8",
71 | "eslint-config-next": "14.2.10",
72 | "postcss": "^8",
73 | "prisma": "^5.20.0",
74 | "tailwindcss": "^3.4.1",
75 | "typescript": "^5"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/app/components/landingPage/Reviews.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "framer-motion";
4 | import { testimonials } from "./constants";
5 |
6 | export const Testimonials = () => {
7 | return (
8 |
9 |
10 |
11 | Beyond Expectations.
12 |
13 |
14 | Our revolutionary Sheduling Enterprice Software have transformed our clients'
15 | strategies✨.
16 |
17 |
18 |
32 | {[...testimonials, ...testimonials].map((testimonial, index) => (
33 |
37 |
38 | {testimonial.review}
39 |
40 |
41 |
42 |
43 |
44 |
45 | {testimonial.name}
46 |
47 | {testimonial.username}
48 |
49 |
50 |
51 |
53 |
54 |
56 | );
57 | };
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 | --card: 0 0% 100%;
10 | --card-foreground: 222.2 84% 4.9%;
11 | --popover: 0 0% 100%;
12 | --popover-foreground: 222.2 84% 4.9%;
13 | --primary: 221.2 83.2% 53.3%;
14 | --primary-foreground: 210 40% 98%;
15 | --secondary: 210 40% 96.1%;
16 | --secondary-foreground: 222.2 47.4% 11.2%;
17 | --muted: 210 40% 96.1%;
18 | --muted-foreground: 215.4 16.3% 46.9%;
19 | --accent: 210 40% 96.1%;
20 | --accent-foreground: 222.2 47.4% 11.2%;
21 | --destructive: 0 84.2% 60.2%;
22 | --destructive-foreground: 210 40% 98%;
23 | --border: 214.3 31.8% 91.4%;
24 | --input: 214.3 31.8% 91.4%;
25 | --ring: 221.2 83.2% 53.3%;
26 | --radius: 0.5rem;
27 | --chart-1: 12 76% 61%;
28 | --chart-2: 173 58% 39%;
29 | --chart-3: 197 37% 24%;
30 | --chart-4: 43 74% 66%;
31 | --chart-5: 27 87% 67%;
32 | }
33 |
34 | .dark {
35 | --background: 222.2 84% 4.9%;
36 | --foreground: 210 40% 98%;
37 | --card: 222.2 84% 4.9%;
38 | --card-foreground: 210 40% 98%;
39 | --popover: 222.2 84% 4.9%;
40 | --popover-foreground: 210 40% 98%;
41 | --primary: 217.2 91.2% 59.8%;
42 | --primary-foreground: 222.2 47.4% 11.2%;
43 | --secondary: 217.2 32.6% 17.5%;
44 | --secondary-foreground: 210 40% 98%;
45 | --muted: 217.2 32.6% 17.5%;
46 | --muted-foreground: 215 20.2% 65.1%;
47 | --accent: 217.2 32.6% 17.5%;
48 | --accent-foreground: 210 40% 98%;
49 | --destructive: 0 62.8% 30.6%;
50 | --destructive-foreground: 210 40% 98%;
51 | --border: 217.2 32.6% 17.5%;
52 | --input: 217.2 32.6% 17.5%;
53 | --ring: 224.3 76.3% 48%;
54 | --chart-1: 220 70% 50%;
55 | --chart-2: 160 60% 45%;
56 | --chart-3: 30 80% 55%;
57 | --chart-4: 280 65% 60%;
58 | --chart-5: 340 75% 55%;
59 | }
60 | }
61 |
62 | @layer base {
63 | * {
64 | @apply border-border;
65 | }
66 |
67 | body:not(.dark) {
68 | @apply text-foreground;
69 | background: linear-gradient(
70 | 90deg,
71 | hsl(0, 0%, 100%) 0%, /* Deep violet */
72 | hsl(248, 82%, 85%) 30%, /* Rich blue-purple */
73 | hsl(275, 100%, 86%) 60%, /* Darker violet-blue */
74 | hsl(0, 0%, 100%)
75 | );
76 | }
77 |
78 | .dark body {
79 | background: linear-gradient(
80 | 90deg,
81 | hsl(223, 90%, 28%) 0%, /* Deep violet */
82 | hsl(241, 89%, 21%) 30%, /* Rich blue-purple */
83 | hsl(269, 85%, 26%) 60%, /* Darker violet-blue */
84 | hsl(281, 87%, 15%) 100%
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/.github/workflows/generator-generic-ossf-slsa3-publish.yml:
--------------------------------------------------------------------------------
1 | # This workflow uses actions that are not certified by GitHub.
2 | # They are provided by a third-party and are governed by
3 | # separate terms of service, privacy policy, and support
4 | # documentation.
5 |
6 | # This workflow lets you generate SLSA provenance file for your project.
7 | # The generation satisfies level 3 for the provenance requirements - see https://slsa.dev/spec/v0.1/requirements
8 | # The project is an initiative of the OpenSSF (openssf.org) and is developed at
9 | # https://github.com/slsa-framework/slsa-github-generator.
10 | # The provenance file can be verified using https://github.com/slsa-framework/slsa-verifier.
11 | # For more information about SLSA and how it improves the supply-chain, visit slsa.dev.
12 |
13 | name: SLSA generic generator
14 | on:
15 | workflow_dispatch:
16 | release:
17 | types: [created]
18 |
19 | jobs:
20 | build:
21 | runs-on: ubuntu-latest
22 | outputs:
23 | digests: ${{ steps.hash.outputs.digests }}
24 |
25 | steps:
26 | - uses: actions/checkout@v4
27 |
28 | # ========================================================
29 | #
30 | # Step 1: Build your artifacts.
31 | #
32 | # ========================================================
33 | - name: Build artifacts
34 | run: |
35 | # These are some amazing artifacts.
36 | echo "artifact1" > artifact1
37 | echo "artifact2" > artifact2
38 |
39 | # ========================================================
40 | #
41 | # Step 2: Add a step to generate the provenance subjects
42 | # as shown below. Update the sha256 sum arguments
43 | # to include all binaries that you generate
44 | # provenance for.
45 | #
46 | # ========================================================
47 | - name: Generate subject for provenance
48 | id: hash
49 | run: |
50 | set -euo pipefail
51 |
52 | # List the artifacts the provenance will refer to.
53 | files=$(ls artifact*)
54 | # Generate the subjects (base64 encoded).
55 | echo "hashes=$(sha256sum $files | base64 -w0)" >> "${GITHUB_OUTPUT}"
56 |
57 | provenance:
58 | needs: [build]
59 | permissions:
60 | actions: read # To read the workflow path.
61 | id-token: write # To sign the provenance.
62 | contents: write # To add assets to a release.
63 | uses: slsa-framework/slsa-github-generator/.github/workflows/generator_generic_slsa3.yml@v1.4.0
64 | with:
65 | base64-subjects: "${{ needs.build.outputs.digests }}"
66 | upload-assets: true # Optional: Upload to a new release
67 |
--------------------------------------------------------------------------------
/app/components/landingPage/Cards/feature-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as Icons from './icons'; // Ensure Icons.Ecosystem is defined in this file
4 | import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
5 | import { useEffect, useRef } from 'react';
6 | import Link from 'next/link';
7 |
8 | import { BorderBeam } from '@/components/ui/border-beam';
9 | import { Feature } from './features-list';
10 |
11 | interface FeatureCardProps {
12 | feature: Feature;
13 | href: string;
14 | }
15 |
16 | export function FeatureCard({ feature: { description, id, title }, href }: FeatureCardProps) {
17 | const offsetX = useMotionValue(-100);
18 | const offsetY = useMotionValue(-100);
19 |
20 | const maskImage = useMotionTemplate`radial-gradient(100px 100px at ${offsetX}px ${offsetY}px, black, transparent)`;
21 |
22 | const borderRef = useRef(null);
23 |
24 | useEffect(() => {
25 | const updateMousePosition = (e: MouseEvent) => {
26 | if (!borderRef.current) return;
27 |
28 | const borderRect = borderRef.current.getBoundingClientRect();
29 | offsetX.set(e.clientX - borderRect.left);
30 | offsetY.set(e.clientY - borderRect.top);
31 | };
32 |
33 | window.addEventListener('mousemove', updateMousePosition);
34 |
35 | return () => {
36 | window.removeEventListener('mousemove', updateMousePosition);
37 | };
38 | }, [offsetX, offsetY]);
39 |
40 | return (
41 |
45 |
53 |
54 |
55 |
57 |
{title}
58 |
{description}
59 |
60 | {/* Ensure that the Link works properly */}
61 |
62 |
63 | Learn More
64 |
65 |
66 |
(false);
17 |
18 | // thanks for the fix Julian - https://github.com/Julian-AT
19 | const startAnimation = useCallback(() => {
20 | const word = words[words.indexOf(currentWord) + 1] || words[0];
21 | setCurrentWord(word);
22 | setIsAnimating(true);
23 | }, [currentWord, words]);
24 |
25 | useEffect(() => {
26 | if (!isAnimating)
27 | setTimeout(() => {
28 | startAnimation();
29 | }, duration);
30 | }, [isAnimating, duration, startAnimation]);
31 |
32 | return (
33 | {
35 | setIsAnimating(false);
36 | }}
37 | >
38 |
66 | {/* edit suggested by Sajal: https://x.com/DewanganSajal */}
67 | {currentWord.split(" ").map((word, wordIndex) => (
68 |
78 | {word.split("").map((letter, letterIndex) => (
79 |
89 | {letter}
90 |
91 | ))}
92 |
93 |
94 | ))}
95 |
96 |
97 | );
98 | };
99 |
--------------------------------------------------------------------------------
/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
5 | import { DayPicker } from "react-day-picker"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { buttonVariants } from "@/components/ui/button"
9 |
10 | export type CalendarProps = React.ComponentProps
11 |
12 | function Calendar({
13 | className,
14 | classNames,
15 | showOutsideDays = true,
16 | ...props
17 | }: CalendarProps) {
18 | return (
19 | .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
43 | : "[&:has([aria-selected])]:rounded-md"
44 | ),
45 | day: cn(
46 | buttonVariants({ variant: "ghost" }),
47 | "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
48 | ),
49 | day_range_start: "day-range-start",
50 | day_range_end: "day-range-end",
51 | day_selected:
52 | "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
53 | day_today: "bg-accent text-accent-foreground",
54 | day_outside:
55 | "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
56 | day_disabled: "text-muted-foreground opacity-50",
57 | day_range_middle:
58 | "aria-selected:bg-accent aria-selected:text-accent-foreground",
59 | day_hidden: "invisible",
60 | ...classNames,
61 | }}
62 | components={{
63 | IconLeft: ({ ...props }) =>
20 |
21 |
22 |
23 |
24 |
25 |
26 | JOIN OUR SHEDULING SOFTWARE!!
27 |
28 |
29 |
30 | Connect your tools
31 |
32 |
33 | Through integrations with tools like instagram, facebook and twitter, you can connect your social media accounts and post directly from your dashboard.
34 |
35 |
37 |
38 |
39 | {tools.map((tool, idx) => (
40 |
41 |
43 | ))}
44 |
45 |
46 |
53 |
54 |
55 |
57 |
58 | {tool.name}
59 |
60 |
61 | {tool.info}
62 |
63 |
39 |
40 |
41 | Welcome to DayFlow.io
42 |
43 | We need the following information to set up your profile Quickly⚡️
44 |
45 |
46 |
47 |
82 |
83 |
(null);
21 |
22 | return (
23 |
29 | {items.map((item, idx) => (
30 |
setHoveredIndex(idx)}
35 | onMouseLeave={() => setHoveredIndex(null)}
36 | >
37 |
38 | {hoveredIndex === idx && (
39 |
54 |
55 | {item.title}
56 | {item.description}
57 |
58 |
59 | ))}
60 |
93 | {children}
94 |
95 | );
96 | };
97 | export const CardDescription = ({
98 | className,
99 | children,
100 | }: {
101 | className?: string;
102 | children: React.ReactNode;
103 | }) => {
104 | return (
105 |
111 | {children}
112 |
113 | );
114 | };
--------------------------------------------------------------------------------
/public/nextjs-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/app/dashboard/availability/page.tsx:
--------------------------------------------------------------------------------
1 | import { SubmitButton } from "@/app/components/SubmitButton";
2 | import prisma from "@/app/lib/db";
3 | import { times } from "@/app/lib/times";
4 | import {
5 | Card,
6 | CardContent,
7 | CardDescription,
8 | CardFooter,
9 | CardHeader,
10 | CardTitle,
11 | } from "@/components/ui/card";
12 | import {
13 | Select,
14 | SelectContent,
15 | SelectGroup,
16 | SelectItem,
17 | SelectTrigger,
18 | SelectValue,
19 | } from "@/components/ui/select";
20 | import { Switch } from "@/components/ui/switch";
21 | import { notFound } from "next/navigation";
22 | import React from "react";
23 | import { requireUser } from "@/app/lib/hooks";
24 | import { updateAvailabilityAction } from "@/app/actions";
25 |
26 | async function getData(userId: string) {
27 | const data = await prisma.availability.findMany({
28 | where: {
29 | userId: userId,
30 | },
31 | });
32 |
33 | if (!data) {
34 | return notFound();
35 | }
36 |
37 | return data;
38 | }
39 |
40 | const AvailabilityPage = async () => {
41 | const session = await requireUser();
42 | const data = await getData(session.user?.id as string);
43 |
44 | return (
45 |
46 |
47 | Availability
48 |
49 | In this section you can manage your availability.
50 |
51 |
52 |
102 |
103 | );
104 | };
105 |
106 | export default AvailabilityPage;
107 |
--------------------------------------------------------------------------------
/app/components/landingPage/offerings.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { offerings } from './constants';
4 | import { LifeBuoy, LucideIcon } from 'lucide-react';
5 | import { Badge } from '@/components/ui/badge';
6 | import AnimationContainer from "./animation-container";
7 |
8 | import { motion } from 'framer-motion';
9 |
10 | interface Props {
11 | title: string;
12 | description: string;
13 | icon: LucideIcon;
14 | }
15 |
16 | const Offerings = () => {
17 | return (
18 |
19 | {/* Background Shapes */}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 | Everything on track
29 |
30 |
31 |
32 | Thousand ways to
35 |
36 | Keep your business on track with our innovative offerings to help you get the most out of your experience.
37 |
38 |
42 |
44 |
45 |
46 | {offerings.map((offering, index) => (
47 |
48 |
50 | ))}
51 |
52 |
62 |
63 |
65 |
66 | {title}
67 |
68 |
69 | {description}
70 |
71 |
72 | );
73 | };
74 |
75 | export default Offerings;
76 |
--------------------------------------------------------------------------------
/app/lib/zodSchemas.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { conformZodMessage } from "@conform-to/zod";
3 |
4 | export function onboardingSchema(options?: {
5 | isUsernameUnique: () => Promise;
6 | }) {
7 | return z.object({
8 | username: z
9 | .string()
10 | .min(3)
11 | .max(150)
12 | .regex(/^[a-zA-Z0-9-]+$/, {
13 | message: "Username must contain only letters, numbers, and hyphens",
14 | })
15 | // Pipe the schema so it runs only if the email is valid
16 | .pipe(
17 | // Note: The callback cannot be async here
18 | // As we run zod validation synchronously on the client
19 | z.string().superRefine((_, ctx) => {
20 | // This makes Conform to fallback to server validation
21 | // by indicating that the validation is not defined
22 | if (typeof options?.isUsernameUnique !== "function") {
23 | ctx.addIssue({
24 | code: "custom",
25 | message: conformZodMessage.VALIDATION_UNDEFINED,
26 | fatal: true,
27 | });
28 | return;
29 | }
30 |
31 | // If it reaches here, then it must be validating on the server
32 | // Return the result as a promise so Zod knows it's async instead
33 | return options.isUsernameUnique().then((isUnique) => {
34 | if (!isUnique) {
35 | ctx.addIssue({
36 | code: "custom",
37 | message: "Username is already used",
38 | });
39 | }
40 | });
41 | })
42 | ),
43 | fullName: z.string().min(3).max(150),
44 | });
45 | }
46 |
47 | export const onboardingSchemaLocale = z.object({
48 | username: z
49 | .string()
50 | .min(3)
51 | .max(150)
52 | .regex(/^[a-zA-Z0-9-]+$/, {
53 | message: "Username must contain only letters, numbers, and hyphens",
54 | }),
55 | fullName: z.string().min(3).max(150),
56 | });
57 |
58 | export const aboutSettingsSchema = z.object({
59 | fullName: z.string().min(3).max(150),
60 |
61 | profileImage: z.string(),
62 | });
63 |
64 | export const eventTypeSchema = z.object({
65 | title: z.string().min(3).max(150),
66 | duration: z.number().min(1).max(100),
67 | url: z.string().min(3).max(150),
68 | description: z.string().min(3).max(300),
69 | videoCallSoftware: z.string(),
70 | });
71 |
72 | export function EventTypeServerSchema(options?: {
73 | isUrlUnique: () => Promise;
74 | }) {
75 | return z.object({
76 | url: z
77 | .string()
78 | .min(3)
79 | .max(150)
80 | .pipe(
81 | // Note: The callback cannot be async here
82 | // As we run zod validation synchronously on the client
83 | z.string().superRefine((_, ctx) => {
84 | // This makes Conform to fallback to server validation
85 | // by indicating that the validation is not defined
86 | if (typeof options?.isUrlUnique !== "function") {
87 | ctx.addIssue({
88 | code: "custom",
89 | message: conformZodMessage.VALIDATION_UNDEFINED,
90 | fatal: true,
91 | });
92 | return;
93 | }
94 |
95 | // If it reaches here, then it must be validating on the server
96 | // Return the result as a promise so Zod knows it's async instead
97 | return options.isUrlUnique().then((isUnique) => {
98 | if (!isUnique) {
99 | ctx.addIssue({
100 | code: "custom",
101 | message: "Url is already used",
102 | });
103 | }
104 | });
105 | })
106 | ),
107 | title: z.string().min(3).max(150),
108 | duration: z.number().min(1).max(100),
109 | description: z.string().min(3).max(300),
110 | videoCallSoftware: z.string(),
111 | });
112 | }
113 |
--------------------------------------------------------------------------------
/app/components/landingPage/Stats.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { motion } from "framer-motion";
4 | import NumberTicker from '@/components/ui/number-ticker';
5 | import React from 'react';
6 |
7 | // Animation for NumberTicker to provide ultra-smooth transitions
8 | const numberAnimation = {
9 | initial: { opacity: 0, y: 50 },
10 | animate: {
11 | opacity: 1,
12 | y: 0,
13 | transition: {
14 | type: "spring",
15 | stiffness: 150,
16 | damping: 15,
17 | mass: 0.75,
18 | duration: 2, // Smooth duration to slow down number appearance
19 | delay: 1, // Delay to ensure number generation finishes before the rest
20 | },
21 | },
22 | };
23 |
24 | // Animation for container with fade-in and fade-out applied after number generation
25 | const containerAnimation = {
26 | hidden: { opacity: 0 },
27 | visible: {
28 | opacity: 1,
29 | transition: {
30 | delayChildren: 2.5, // Applies after numbers generate
31 | staggerChildren: 0.5, // Smooth stagger between elements
32 | ease: "easeInOut",
33 | },
34 | },
35 | };
36 |
37 | // Fade-out animation to trigger after a delay
38 | const fadeOutAnimation = {
39 | initial: { opacity: 1 },
40 | animate: {
41 | opacity: 0,
42 | transition: {
43 | delay: 4, // Wait before applying fade-out
44 | duration: 1.5, // Smooth fade-out duration
45 | ease: "easeInOut",
46 | },
47 | },
48 | };
49 |
50 | const Stats: React.FC = () => {
51 | return (
52 | < div className="min-h-52 bg-transparent mt-40">
53 |
59 | {/* Active Users */}
60 |
61 |
65 | Over 10k
67 |
68 |
73 |
74 |
75 | {/* Paying Customers */}
76 |
77 |
81 | 2k+ Happy
83 |
84 |
89 |
90 |
91 | {/* Agencies Joined */}
92 |
93 |
97 | Over 500 agencies
99 |
100 |
105 |
106 |
107 |
108 | );
109 | };
110 |
111 | export default Stats;
112 |
--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { Cross2Icon } from "@radix-ui/react-icons"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 | ,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
46 | {children}
47 |
48 | Close
50 |
51 |
52 |
53 | ))
54 | DialogContent.displayName = DialogPrimitive.Content.displayName
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | )
68 | DialogHeader.displayName = "DialogHeader"
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | )
82 | DialogFooter.displayName = "DialogFooter"
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 | ,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
74 |
75 | Bookings
76 |
77 | See upcoming and past events booked through your event type links.
78 |
79 |
80 |
81 | {data.data.map((item) => (
82 |
118 | ))}
119 |
120 |
121 | )}
122 |
123 | );
124 | };
125 |
126 | export default MeetingsPage;
--------------------------------------------------------------------------------
/components/ui/lamp.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { cn } from "@/lib/utils";
5 | import { motion } from "framer-motion";
6 |
7 | export function LampDemo() {
8 | return (
9 |
10 |
20 | Build lamps
22 |
23 | );
24 | }
25 |
26 | export const LampContainer = ({
27 | children,
28 | className,
29 | }: {
30 | children: React.ReactNode;
31 | className?: string;
32 | }) => {
33 | return (
34 |
40 |
41 |
54 |
55 |
56 |
57 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
86 |
96 |
97 |
98 |
99 |
100 |
101 | {children}
102 |
103 |
57 |
58 | Settings
59 | Manage your account settings.
60 |
61 |
127 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
5 | import { Cross2Icon } from "@radix-ui/react-icons"
6 | import { cva, type VariantProps } from "class-variance-authority"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Sheet = SheetPrimitive.Root
11 |
12 | const SheetTrigger = SheetPrimitive.Trigger
13 |
14 | const SheetClose = SheetPrimitive.Close
15 |
16 | const SheetPortal = SheetPrimitive.Portal
17 |
18 | const SheetOverlay = React.forwardRef<
19 | React.ElementRef,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, ...props }, ref) => (
22 | ,
54 | VariantProps {}
55 |
56 | const SheetContent = React.forwardRef<
57 | React.ElementRef,
58 | SheetContentProps
59 | >(({ side = "right", className, children, ...props }, ref) => (
60 |
61 |
67 |
68 | Close
70 |
71 | {children}
72 |
73 |
74 | ))
75 | SheetContent.displayName = SheetPrimitive.Content.displayName
76 |
77 | const SheetHeader = ({
78 | className,
79 | ...props
80 | }: React.HTMLAttributes) => (
81 |
88 | )
89 | SheetHeader.displayName = "SheetHeader"
90 |
91 | const SheetFooter = ({
92 | className,
93 | ...props
94 | }: React.HTMLAttributes) => (
95 |
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 |
105 | const SheetTitle = React.forwardRef<
106 | React.ElementRef,
107 | React.ComponentPropsWithoutRef
108 | >(({ className, ...props }, ref) => (
109 | ,
119 | React.ComponentPropsWithoutRef
120 | >(({ className, ...props }, ref) => (
121 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | Dayflow.io
69 |
70 |
71 |
72 |
73 |
74 |
76 |
77 |
78 |
79 |
80 |
139 |
140 | {children}
141 |
142 |
143 |
2 |
14 |
15 |
18 |
19 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
24 |
27 | 
67 | ))}
68 |