Skip to content

Commit f30be8f

Browse files
nagarajpandithnagarajpandith
committed
feat: landing page
1 parent 2eb5177 commit f30be8f

File tree

11 files changed

+578
-97
lines changed

11 files changed

+578
-97
lines changed

‎public/assets/hero-image.svg

+353
Loading

‎public/favicon.ico

0 Bytes
Binary file not shown.

‎public/logo.png

64.1 KB
Loading

‎src/components/animation/typing.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function Typing() {
1313
3000,
1414
]}
1515
wrapper="h2"
16-
className="text-3xl font-semibold sm:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl"
16+
className="animated-text text-3xl font-semibold sm:text-3xl lg:text-3xl xl:text-5xl 2xl:text-6xl"
1717
repeat={Infinity}
1818
/>
1919
);

‎src/components/join/index.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useRouter } from "next/router";
2+
import { useState } from "react";
3+
import { BsKeyboard } from "react-icons/bs";
4+
5+
const JoinRoom = () => {
6+
const [roomName, setRoomName] = useState<string>("");
7+
const router = useRouter();
8+
return (
9+
<div className="flex items-center space-x-4 p-2 text-white">
10+
<label className="relative">
11+
<input
12+
value={roomName}
13+
onChange={(e) => setRoomName(e.target.value)}
14+
type="text"
15+
placeholder="Enter Room Name"
16+
className="rounded-md bg-white bg-opacity-30 p-2 text-white"
17+
/>
18+
<BsKeyboard
19+
size={20}
20+
className="absolute top-1/2 right-2 -translate-y-1/2 transform text-white"
21+
/>
22+
</label>
23+
24+
<button
25+
disabled={!roomName}
26+
className={`lk-button ${
27+
!roomName && "pointer-events-none cursor-not-allowed"
28+
}`}
29+
onClick={() => router.push(`/rooms/${roomName}`)}
30+
>
31+
Join
32+
</button>
33+
</div>
34+
);
35+
};
36+
37+
export default JoinRoom;

‎src/components/navbar/index.tsx

+33-24
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { AiOutlineClose as XIcon } from "react-icons/ai";
66
import { useState } from "react";
77
import { signIn, signOut } from "next-auth/react";
88
import { Session } from "next-auth";
9+
import { FcGoogle } from "react-icons/fc";
910

1011
const Navbar = ({
1112
status,
@@ -36,19 +37,12 @@ const Navbar = ({
3637
};
3738

3839
return (
39-
<nav className="top-0 z-10 w-full border-b border-gray-200 bg-white bg-opacity-10 backdrop-blur-lg backdrop-filter">
40+
<nav className="fixed top-0 z-10 w-full border-b border-gray-400/20 bg-white bg-opacity-5 backdrop-blur-lg backdrop-filter">
4041
<div className="mx-auto max-w-5xl px-4">
4142
<div className="flex h-16 items-center justify-between">
4243
<Link href="/" className="flex items-center space-x-2">
43-
<Image
44-
className="rounded-full bg-white bg-opacity-30 p-1 backdrop-blur-lg backdrop-filter"
45-
src="/favicon.ico"
46-
alt="Logo"
47-
width={40}
48-
height={40}
49-
priority
50-
/>
51-
<span className={`font-bold text-white`}>Jab We Meet</span>
44+
<Image src="/logo.png" alt="Logo" width={40} height={40} priority />
45+
<span className={`text-xl font-bold text-white`}>Jab We Meet</span>
5246
</Link>
5347

5448
<div className="hidden space-x-6 text-white lg:flex lg:items-center">
@@ -65,7 +59,7 @@ const Navbar = ({
6559
</Link>
6660
))}
6761
<button
68-
className="rounded-md bg-white bg-opacity-30 p-2 text-white"
62+
className="lk-button"
6963
onClick={() => {
7064
if (status === "authenticated") {
7165
signOut();
@@ -74,8 +68,18 @@ const Navbar = ({
7468
}
7569
}}
7670
>
77-
{status === "authenticated" ? "Sign Out" : "Sign In"}
71+
{status === "authenticated" ? (
72+
"Sign Out"
73+
) : (
74+
<div className="flex items-center space-x-2">
75+
<FcGoogle />
76+
<div>Sign In</div>
77+
</div>
78+
)}
7879
</button>
80+
<select className="lk-button">
81+
<option value="en">English</option>
82+
</select>
7983
</div>
8084

8185
<div className="flex items-center space-x-4 lg:hidden">
@@ -98,18 +102,23 @@ const Navbar = ({
98102
{link.label}
99103
</Link>
100104
))}
101-
<button
102-
className="w-fit rounded-md bg-white bg-opacity-30 p-2 text-white"
103-
onClick={() => {
104-
if (status === "authenticated") {
105-
signIn("google");
106-
} else {
107-
signOut();
108-
}
109-
}}
110-
>
111-
{status === "authenticated" ? "Sign Out" : "Sign In"}
112-
</button>
105+
<div className="flex items-center space-x-4">
106+
<button
107+
className="lk-button"
108+
onClick={() => {
109+
if (status === "authenticated") {
110+
signIn("google");
111+
} else {
112+
signOut();
113+
}
114+
}}
115+
>
116+
{status === "authenticated" ? "Sign Out" : "Sign In"}
117+
</button>
118+
<select className="lk-button">
119+
<option value="en">English</option>
120+
</select>
121+
</div>
113122
</div>
114123
)}
115124
</div>

‎src/pages/_app.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@ import { SessionProvider } from "next-auth/react";
55
import { api } from "~/utils/api";
66

77
import "~/styles/globals.css";
8-
import '@livekit/components-styles';
9-
import '@livekit/components-styles/prefabs';
10-
8+
import "@livekit/components-styles";
9+
import "@livekit/components-styles/prefabs";
10+
import Head from "next/head";
1111

1212
const MyApp: AppType<{ session: Session | null }> = ({
1313
Component,
1414
pageProps: { session, ...pageProps },
1515
}) => {
1616
return (
1717
<SessionProvider session={session}>
18+
<Head>
19+
<title>Jab We Meet</title>
20+
<link rel="icon" href="/favicon.ico" />
21+
</Head>
1822
<Component {...pageProps} />
1923
</SessionProvider>
2024
);

‎src/pages/index.tsx

+83-8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import React from "react";
55
import Typing from "~/components/animation/typing";
66
import Navbar from "~/components/navbar";
77
import { api } from "~/utils/api";
8+
import { AiOutlineVideoCameraAdd } from "react-icons/ai";
9+
import JoinRoom from "~/components/join";
10+
import Image from "next/image";
811

912
function ConnectionTab() {
1013
const { data: session, status } = useSession();
@@ -21,16 +24,88 @@ function ConnectionTab() {
2124
return (
2225
<>
2326
<Navbar status={status} session={session} />
24-
<div className="flex h-full w-full flex-col items-center justify-center space-y-4 p-4">
25-
<Typing />
27+
<div className="isolate flex h-screen w-screen flex-col items-center justify-center space-y-4 p-5 text-center md:flex-row">
28+
<div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem] opacity-60">
29+
<svg
30+
className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
31+
viewBox="0 0 1155 678"
32+
fill="none"
33+
xmlns="http://www.w3.org/2000/svg"
34+
>
35+
<path
36+
fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
37+
fillOpacity=".3"
38+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
39+
/>
40+
<defs>
41+
<linearGradient
42+
id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
43+
x1="1155.49"
44+
x2="-78.208"
45+
y1=".177"
46+
y2="474.645"
47+
gradientUnits="userSpaceOnUse"
48+
>
49+
<stop stopColor="#9089FC" />
50+
<stop offset={1} stopColor="#FF80B5" />
51+
</linearGradient>
52+
</defs>
53+
</svg>
54+
</div>
55+
56+
<div className="w-full max-w-md space-y-4">
57+
<Typing />
2658

27-
<p className="text-sm text-gray-400">
28-
Multilingual Video Conferencing App
29-
</p>
59+
<p className="text-sm text-gray-400">
60+
Multilingual Video Conferencing App
61+
</p>
3062

31-
<button onClick={createRoomHandler} className="lk-button">
32-
Create Room
33-
</button>
63+
<div className="flex flex-col items-center space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
64+
<button onClick={createRoomHandler} className="lk-button h-fit">
65+
<AiOutlineVideoCameraAdd />
66+
Create Room
67+
</button>
68+
69+
<JoinRoom />
70+
</div>
71+
</div>
72+
73+
<div className="flex w-full max-w-md items-center justify-center">
74+
<Image
75+
src={"assets/hero-image.svg"}
76+
alt="Hero Image"
77+
width={500}
78+
height={500}
79+
priority
80+
/>
81+
</div>
82+
<div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] opacity-60">
83+
<svg
84+
className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
85+
viewBox="0 0 1155 678"
86+
fill="none"
87+
xmlns="http://www.w3.org/2000/svg"
88+
>
89+
<path
90+
fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
91+
fillOpacity=".3"
92+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
93+
/>
94+
<defs>
95+
<linearGradient
96+
id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
97+
x1="1155.49"
98+
x2="-78.208"
99+
y1=".177"
100+
y2="474.645"
101+
gradientUnits="userSpaceOnUse"
102+
>
103+
<stop stopColor="#9089FC" />
104+
<stop offset={1} stopColor="#FF80B5" />
105+
</linearGradient>
106+
</defs>
107+
</svg>
108+
</div>
34109
</div>
35110
</>
36111
);

‎src/pages/rooms/[name].tsx

+41-48
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Home: NextPage = () => {
2929
>(undefined);
3030
const [selectedCode, setSelectedCode] = useState("en");
3131
if (status === "loading") return <div>Loading...</div>;
32-
if (!session) router.push(`api/auth/signin?callbackUrl=/rooms/${roomName}`);
32+
if (!session) router.push(`/api/auth/signin`);
3333

3434
const languageCodes = [
3535
{
@@ -55,54 +55,47 @@ const Home: NextPage = () => {
5555
];
5656

5757
return (
58-
<>
59-
<Head>
60-
<title>Jab We Meet</title>
61-
<link rel="icon" href="/favicon.ico" />
62-
</Head>
63-
64-
<main data-lk-theme="default">
65-
{roomName && !Array.isArray(roomName) && preJoinChoices ? (
66-
<ActiveRoom
67-
roomName={roomName}
68-
userChoices={preJoinChoices}
69-
onLeave={() => setPreJoinChoices(undefined)}
70-
userId={session?.user.id as string}
71-
selectedLanguage={selectedCode}
72-
></ActiveRoom>
73-
) : (
74-
<div className="flex h-fit flex-row items-center justify-center">
75-
<PreJoin
76-
onError={(err) =>
77-
console.log("error while setting up prejoin", err)
78-
}
79-
defaults={{
80-
username: session?.user.name as string,
81-
videoEnabled: true,
82-
audioEnabled: true,
83-
}}
84-
onSubmit={(values) => {
85-
console.log("Joining with: ", values);
86-
setPreJoinChoices(values);
87-
}}
88-
></PreJoin>
89-
<div className="flex flex-col items-start justify-center gap-3 rounded-lg border border-gray-300 p-5">
90-
<label>
91-
<span>Your Language</span>
92-
</label>
93-
<select
94-
className="rounded-lg border border-gray-300 p-2"
95-
onChange={(e) => setSelectedCode(e.target.value)}
96-
>
97-
{languageCodes.map((language) => (
98-
<option value={language.code}>{language.language}</option>
99-
))}
100-
</select>
101-
</div>
58+
<main data-lk-theme="default">
59+
{roomName && !Array.isArray(roomName) && preJoinChoices ? (
60+
<ActiveRoom
61+
roomName={roomName}
62+
userChoices={preJoinChoices}
63+
onLeave={() => setPreJoinChoices(undefined)}
64+
userId={session?.user.id as string}
65+
selectedLanguage={selectedCode}
66+
></ActiveRoom>
67+
) : (
68+
<div className="flex h-fit flex-row items-center justify-center">
69+
<PreJoin
70+
onError={(err) =>
71+
console.log("error while setting up prejoin", err)
72+
}
73+
defaults={{
74+
username: session?.user.name as string,
75+
videoEnabled: true,
76+
audioEnabled: true,
77+
}}
78+
onSubmit={(values) => {
79+
console.log("Joining with: ", values);
80+
setPreJoinChoices(values);
81+
}}
82+
></PreJoin>
83+
<div className="flex flex-col items-start justify-center gap-3 rounded-lg border border-gray-300 p-5">
84+
<label>
85+
<span>Your Language</span>
86+
</label>
87+
<select
88+
className="rounded-lg border border-gray-300 p-2"
89+
onChange={(e) => setSelectedCode(e.target.value)}
90+
>
91+
{languageCodes.map((language) => (
92+
<option value={language.code}>{language.language}</option>
93+
))}
94+
</select>
10295
</div>
103-
)}
104-
</main>
105-
</>
96+
</div>
97+
)}
98+
</main>
10699
);
107100
};
108101

0 commit comments

Comments
 (0)