Skip to content

Commit

Permalink
feat: add features section to the home landing page for non-signing u…
Browse files Browse the repository at this point in the history 
…ser (#224)

* feat: add feature list section

* feat: add seamless quality feature section
  • Loading branch information
@faiq-naufal
faiq-naufal authored May 28, 2024
1 parent 11c0880 commit fa0725f
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 46 deletions.
2 changes: 1 addition & 1 deletion app/_features/home/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function View({ events }: { events: EventType.Event[] }) {
<div className="bg-zinc-950">
<div className="min-viewport-height mx-auto flex h-full w-full max-w-7xl flex-1 flex-col px-4">
<Header logoText="inLive Room" logoHref="/" />
<main className="flex flex-1 flex-col justify-center">
<main className="grid flex-1 grid-cols-1">
{user ? <SignedIn user={user} events={events} /> : <NotSignedIn />}
</main>
<Footer />
Expand Down
19 changes: 2 additions & 17 deletions app/_features/home/join-room-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { Button } from '@nextui-org/react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { useNavigate } from '@/_shared/hooks/use-navigate';
import type { SVGElementPropsType } from '@/_shared/types/types';
import TablerArrowRightIcon from '@/_shared/components/icons/tabler-arrow-right-icon';

type JoinRoomInput = { roomID: string };

Expand Down Expand Up @@ -36,24 +36,9 @@ export default function JoinRoomField() {
type="submit"
className="h-auto min-h-0 min-w-0 rounded-lg bg-zinc-800/50 px-4 py-2.5 antialiased hover:bg-zinc-800 active:bg-zinc-700"
>
<ArrowRightIcon className="h-5 w-5 text-zinc-100/50" />
<TablerArrowRightIcon className="h-5 w-5 text-zinc-100/50" />
</Button>
</div>
</form>
);
}

const ArrowRightIcon = (props: SVGElementPropsType) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h14m-6 6l6-6m-6-6l6 6"
/>
</svg>
);
};
197 changes: 172 additions & 25 deletions app/_features/home/not-signed-in.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,188 @@
'use client';

import Link from 'next/link';
import Image from 'next/image';
import { Button } from '@nextui-org/react';
import JoinRoomField from '@/_features/home/join-room-field';
import TablerArrowRightIcon from '@/_shared/components/icons/tabler-arrow-right-icon';

export default function NotSignedIn() {
const openSignInModal = () => {
document.dispatchEvent(new CustomEvent('open:sign-in-modal'));
};

return (
<div className="flex w-full flex-col gap-10 py-10 md:flex-row md:py-20 lg:gap-20">
<div className="flex-auto">
<section className="md:max-w-xl">
<h2 className="text-3xl font-semibold tracking-wide text-zinc-200 lg:text-4xl">
Virtual room for your real-time collaboration
</h2>
<p className="mt-4 text-pretty text-base text-zinc-400 lg:text-lg">
Connect with anyone, anywhere. Host or join in seconds. It&apos;s
that simple! Experience real-time messaging, video, and audio for
seamless collaboration, all within open-source virtual rooms.
</p>
<div className="mt-8">
<Button
className="h-auto min-h-0 min-w-0 rounded-lg bg-red-700 px-6 py-2.5 text-sm font-medium text-zinc-100 antialiased hover:bg-red-600 active:bg-red-500"
onPress={openSignInModal}
>
Sign in to try inLive Room
</Button>
<div>
<div className="flex flex-col gap-10 py-10 md:flex-row md:py-20 lg:gap-20">
<div className="md:flex-auto">
<section className="md:max-w-xl">
<h2 className="text-3xl font-semibold tracking-wide text-zinc-200 lg:text-4xl">
Virtual room for your real-time collaboration
</h2>
<p className="mt-4 text-pretty text-base text-zinc-400 lg:text-lg">
Connect with anyone, anywhere. Host or join in seconds. It&apos;s
that simple! Experience real-time messaging, video, and audio for
seamless collaboration, all within open-source virtual rooms.
</p>
<div className="mt-8">
<Button
className="h-auto min-h-0 min-w-0 rounded-lg bg-red-700 px-6 py-2.5 text-sm font-medium text-zinc-100 antialiased hover:bg-red-600 active:bg-red-500"
onPress={openSignInModal}
>
Sign in to try inLive Room
</Button>
</div>
</section>
</div>
<div className="flex justify-center md:flex-1 md:justify-end">
<div className="w-[400px] md:w-[360px] lg:w-[400px]">
<div className="rounded-2xl border border-zinc-950 bg-zinc-950/25 p-6 lg:p-8">
<p className="mb-4 text-base font-medium text-zinc-400">
Got a room code to join?
</p>
<JoinRoomField />
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-6 py-10">
<div className="rounded-xl bg-zinc-900 px-8 py-6">
<div className="flex flex-col gap-5 sm:flex-row">
<div className="flex flex-1 flex-col gap-3 sm:flex-row sm:gap-5">
<div>
<div className="text-zinc-200 sm:p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M14 6a2 2 0 1 0-4 0a2 2 0 0 0 4 0zM7 18a2 2 0 1 0-4 0a2 2 0 0 0 4 0zm14 0a2 2 0 1 0-4 0a2 2 0 0 0 4 0zM7 18h10m1-2l-5-8m-2 0l-5 8"
/>
</svg>
</div>
</div>
<div>
<h3 className="text-xl font-semibold text-zinc-200">
All-in-one for webinar event
</h3>
<p className="mt-1 text-base text-zinc-400">
Not only create, you also can manage registration, invitation,
and get analytics of your webinar event.
</p>
</div>
</div>
<div className="flex items-center">
<Button
as={Link}
href="/events"
className="inline-flex h-auto min-h-0 min-w-0 items-center gap-2 rounded-md bg-zinc-700 py-2.5 pl-4 pr-3 text-zinc-100 antialiased hover:bg-zinc-600 active:bg-zinc-500"
>
<span className="text-sm font-medium">See feature tour</span>
<span>
<TablerArrowRightIcon className="h-5 w-5" />
</span>
</Button>
</div>
</div>
</section>
</div>
<div className="flex flex-col gap-6 md:flex-row">
<div className="rounded-xl bg-zinc-900 px-8 py-6">
<div className="flex flex-col gap-3 sm:flex-row sm:gap-5">
<div>
<div className="text-zinc-200 sm:p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12.5 21H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5m-4-9v4M8 3v4m-4 4h16m-4 8h6m-3-3v6"
/>
</svg>
</div>
</div>
<div>
<h3 className="text-xl font-semibold text-zinc-200">
Scheduled meeting
</h3>
<p className="mt-1 text-base text-zinc-400">
Set your schedule for important meeting and sent invitation by
email. As easy as that.
</p>
</div>
</div>
</div>
<div className="rounded-xl bg-zinc-900 px-8 py-6">
<div className="flex flex-col gap-3 sm:flex-row sm:gap-5">
<div>
<div className="text-zinc-200 sm:p-1">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 w-8"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 11h18M5 11V7a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4M4 17a3 3 0 1 0 6 0a3 3 0 1 0-6 0m10 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-4 0h4"
/>
</svg>
</div>
</div>
<div>
<h3 className="text-xl font-semibold text-zinc-200">
Anonymous meeting participant
</h3>
<p className="mt-1 text-base text-zinc-400">
Participant can join your meeting from shared link or room
code as a guest without signing in.
</p>
</div>
</div>
</div>
</div>
</div>
<div className="flex flex-1 justify-center md:justify-end">
<div className="w-[400px] md:w-[360px] lg:w-[400px]">
<div className="rounded-2xl border border-zinc-950 bg-zinc-950/25 p-6 lg:p-8">
<p className="mb-4 text-base font-medium text-zinc-400">
Got a room code to join?
<div className="flex flex-col gap-8 py-20 sm:flex-row xl:gap-16">
<div className="w-full sm:max-w-[280px] md:max-w-[360px] lg:max-w-[480px]">
<Image
width={0}
height={0}
src="/images/webinar/host-in-the-webinar-room-desktop-quality.png"
alt="A desktop view of webinar session with audiences"
className="h-auto w-full object-cover"
loading="lazy"
unoptimized
/>
</div>
<div className="flex-1">
<h3 className="text-xl font-semibold text-zinc-200">
Seamless quality for uninterrupted communication
</h3>
<div className="mt-3 flex flex-col gap-6 text-base text-zinc-400">
<p>
With latency less than 10 milliseconds, you can experience
seamless streaming, even in challenging network conditions.
</p>
<p>
Our adaptive bitrate and streaming protection technology ensures
smooth playback, while the audio/video packet loss protection
technology guarantees uninterrupted communication, even in highly
congested network environments.
</p>
<JoinRoomField />
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/_features/home/signed-in.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function SignedIn({
return (
<>
<ScheduleModal />
<div className="grid w-full grid-cols-1 gap-y-12 pb-4 md:grid-cols-2 md:pb-0">
<div className="grid w-full grid-cols-1 gap-y-12 py-10 md:grid-cols-2 md:py-0">
<div className="flex items-center md:px-5 lg:px-10">
<div>
<h2 className="text-3xl font-semibold tracking-wide text-zinc-200 lg:text-4xl">
Expand Down Expand Up @@ -177,8 +177,8 @@ export default function SignedIn({
</div>
</div>
</div>
<div className="md:px-5 lg:px-10">
<div className="max-w-lg">
<div className="flex items-center md:px-5 lg:px-10">
<div className="max-w-lg flex-1">
<MeetingList events={events} />
</div>
</div>
Expand Down
16 changes: 16 additions & 0 deletions app/_shared/components/icons/tabler-arrow-right-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { SVGElementPropsType } from '@/_shared/types/types';

export default function TablerArrowRightIcon(props: SVGElementPropsType) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h14m-6 6l6-6m-6-6l6 6"
/>
</svg>
);
}
Binary file added public/images/webinar/host-in-the-webinar-room-desktop-quality.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fa0725f

Please sign in to comment.