Skip to content

Commit 0fa5f9d

Browse files
HMarzbanHMarzban
committed
feat: enhance homepage with rotating text and redesign skeleton loaders
Homepage: - Add animated text-rotate component showcasing use cases (teams, communities, classrooms, projects, meetups, organizations) - Use colorful pills with Lucide icons for visual variety Skeleton loaders: - Redesign all skeleton components to follow design system - Remove custom CSS, leverage daisyUI's built-in .skeleton class - Extend skeleton sections to fill viewport on large screens Pro tip: - Add one-time toast showing new.docs.plus shortcut on first doc creation
1 parent 7cce110 commit 0fa5f9d

12 files changed

Lines changed: 448 additions & 159 deletions

‎packages/webapp/src/components/pages/home/HomePage.tsx‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@ import Loading from '@components/ui/Loading'
1111
import Modal from '@components/ui/Modal'
1212
import TabLayout from '../TabLayout'
1313
import { useAuthStore, useStore } from '@stores'
14-
import { LuGithub, LuMessageCircle } from 'react-icons/lu'
14+
import {
15+
LuGithub,
16+
LuMessageCircle,
17+
LuUsers,
18+
LuGlobe,
19+
LuGraduationCap,
20+
LuRocket,
21+
LuCalendar,
22+
LuBuilding2
23+
} from 'react-icons/lu'
1524
import { FaDiscord } from 'react-icons/fa'
1625
import useVirtualKeyboard from '@hooks/useVirtualKeyboard'
1726

@@ -117,9 +126,37 @@ const HomePage = ({ hostname }: HomePageProps) => {
117126
<h1 className="mb-2 text-2xl font-bold text-slate-800 sm:mb-3 sm:text-4xl md:text-5xl">
118127
Get everyone on the same page
119128
</h1>
120-
<p className="text-sm text-slate-500 sm:text-lg">
121-
Free, open-source collaborative documents for teams & communities
122-
</p>
129+
<div className="mt-2 flex flex-wrap items-center justify-center gap-2 text-sm text-slate-500 sm:mt-3 sm:text-lg">
130+
<span>Free, open-source collaborative documents for</span>
131+
<span className="text-rotate inline-block h-8 overflow-hidden align-middle text-sm font-semibold sm:h-9 sm:text-base">
132+
<span className="flex flex-col items-center">
133+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-blue-50 px-3 text-blue-600 sm:h-9">
134+
<LuUsers size={15} />
135+
teams
136+
</span>
137+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-violet-50 px-3 text-violet-600 sm:h-9">
138+
<LuGlobe size={15} />
139+
communities
140+
</span>
141+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-emerald-50 px-3 text-emerald-600 sm:h-9">
142+
<LuGraduationCap size={15} />
143+
classrooms
144+
</span>
145+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-amber-50 px-3 text-amber-600 sm:h-9">
146+
<LuRocket size={15} />
147+
projects
148+
</span>
149+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-rose-50 px-3 text-rose-600 sm:h-9">
150+
<LuCalendar size={15} />
151+
meetups
152+
</span>
153+
<span className="flex h-8 items-center gap-1.5 rounded-full bg-teal-50 px-3 text-teal-600 sm:h-9">
154+
<LuBuilding2 size={15} />
155+
organizations
156+
</span>
157+
</span>
158+
</span>
159+
</div>
123160
</div>
124161

125162
{/* Action Card */}

‎packages/webapp/src/components/skeleton/AvatarStackLoader.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ type TProps = {
44
repeat?: number
55
}
66

7-
const AvatarStackLoader = ({ className, size = 8, repeat = 2 }: TProps) => {
7+
const AvatarStackLoader = ({ className = '', size = 9, repeat = 2 }: TProps) => {
8+
const sizeClass = `size-${size}`
9+
810
return (
9-
<div className={`avatar-group -space-x-5 ${className}`}>
11+
<div className={`avatar-group -space-x-4 ${className}`}>
1012
{Array.from({ length: repeat }).map((_, index) => (
1113
<div className="avatar" key={index}>
12-
<div className={`skeleton h-${size} w-${size} rounded-full`}></div>
14+
<div className={`skeleton ${sizeClass} rounded-full`} />
1315
</div>
1416
))}
1517
</div>

‎packages/webapp/src/components/skeleton/DocumentSimpleLoader.tsx‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import React from 'react'
22

33
type TProps = {
4-
level: string
5-
className: string
4+
level?: string
5+
className?: string
66
}
77

88
const DocumentSimpleLoader: React.FC<React.HTMLProps<HTMLDivElement> & TProps> = (props) => {
9+
const { level, className, ...rest } = props
10+
911
return (
10-
<div {...props}>
11-
<div className="skeleton mt-3 h-7 w-[54%] rounded"></div>
12-
<div className="flex space-x-10">
13-
<div className="skeleton mt-3 h-5 w-[12%] rounded"></div>
14-
<div className="skeleton mt-3 h-5 w-[32%] rounded"></div>
12+
<div className={className} {...rest}>
13+
{/* Heading */}
14+
<div className="skeleton mb-3 h-7 w-3/5 rounded" />
15+
16+
{/* Meta info */}
17+
<div className="mb-4 flex gap-6">
18+
<div className="skeleton h-4 w-16 rounded" />
19+
<div className="skeleton h-4 w-28 rounded" />
1520
</div>
16-
<div className="ml-6 mt-6">
17-
<div className="skeleton mt-3 h-5 w-[94%] rounded"></div>
18-
<div className="skeleton mt-3 h-5 w-[30%] rounded"></div>
19-
<div className="flex space-x-8">
20-
<div className="skeleton mt-3 h-5 w-1/5 rounded bg-docsy opacity-60"></div>
21-
<div className="skeleton mt-3 h-5 w-[16%] rounded bg-docsy opacity-60"></div>
22-
<div className="skeleton mt-3 h-5 w-[54%] rounded bg-docsy opacity-60"></div>
21+
22+
{/* Content lines */}
23+
<div className="space-y-3 pl-4">
24+
<div className="skeleton h-4 w-[94%] rounded" />
25+
<div className="skeleton h-4 w-[40%] rounded" />
26+
27+
{/* Highlighted section */}
28+
<div className="flex gap-3">
29+
<div className="skeleton bg-primary/20 h-4 w-1/5 rounded" />
30+
<div className="skeleton bg-primary/20 h-4 w-[18%] rounded" />
31+
<div className="skeleton bg-primary/20 h-4 w-2/5 rounded" />
2332
</div>
24-
<div className="skeleton mt-3 h-5 w-[78%] rounded"></div>
25-
<div className="skeleton mt-3 h-5 w-[94%] rounded"></div>
26-
<div className="skeleton mt-3 h-5 w-[78%] rounded"></div>
27-
<div className="skeleton mt-3 h-5 w-[94%] rounded"></div>
28-
<div className="skeleton mt-3 h-5 w-[52%] rounded"></div>
33+
34+
<div className="skeleton h-4 w-[78%] rounded" />
35+
<div className="skeleton h-4 w-[94%] rounded" />
36+
<div className="skeleton h-4 w-[70%] rounded" />
37+
<div className="skeleton h-4 w-[88%] rounded" />
38+
<div className="skeleton h-4 w-1/2 rounded" />
2939
</div>
3040
</div>
3141
)

‎packages/webapp/src/components/skeleton/DocumentWithPictureLoader.tsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,45 @@
11
import React from 'react'
22

33
type TProps = {
4-
level: string
5-
className: string
4+
level?: string
5+
className?: string
66
}
77

8-
// Using React.HTMLProps<HTMLDivElement> for general div props
9-
const DocumentWithPictureLoader: React.FC<React.HTMLProps<HTMLDivElement> & TProps> = (
10-
props: TProps
11-
) => {
8+
const DocumentWithPictureLoader: React.FC<React.HTMLProps<HTMLDivElement> & TProps> = (props) => {
9+
const { level, className, ...rest } = props
10+
1211
return (
13-
<div {...props}>
14-
<div className="skeleton mt-3 h-7 w-[54%]"></div>
15-
<div className="flex space-x-10">
16-
<div className="skeleton mt-3 h-5 w-[12%]"></div>
17-
<div className="skeleton mt-3 h-5 w-[32%]"></div>
12+
<div className={className} {...rest}>
13+
{/* Heading */}
14+
<div className="skeleton mb-3 h-7 w-3/5 rounded" />
15+
16+
{/* Meta info */}
17+
<div className="mb-4 flex gap-6">
18+
<div className="skeleton h-4 w-16 rounded" />
19+
<div className="skeleton h-4 w-28 rounded" />
1820
</div>
19-
<div className="ml-6 mt-6">
20-
<div className="skeleton mt-3 h-5 w-[94%]"></div>
21-
<div className="skeleton mt-3 h-5 w-[30%]"></div>
22-
<div className="mt-3 flex">
23-
<div className="skeleton h-36 w-40 bg-neutral opacity-60"></div>
24-
<div className="float-left ml-4 w-full">
25-
<div className="skeleton h-5 w-[78%] bg-neutral opacity-60"></div>
26-
<div className="skeleton mt-3 h-5 w-[58%] bg-neutral opacity-60"></div>
27-
<div className="skeleton mt-3 h-5 w-[78%] bg-neutral opacity-60"></div>
28-
<div className="skeleton mt-3 h-5 w-[28%] bg-neutral opacity-60"></div>
21+
22+
{/* Content with image */}
23+
<div className="space-y-3 pl-4">
24+
<div className="skeleton h-4 w-[94%] rounded" />
25+
<div className="skeleton h-4 w-[40%] rounded" />
26+
27+
{/* Image with text */}
28+
<div className="flex gap-4 py-2">
29+
<div className="skeleton bg-neutral/30 size-32 shrink-0 rounded-lg" />
30+
<div className="flex-1 space-y-3">
31+
<div className="skeleton bg-neutral/20 h-4 w-[78%] rounded" />
32+
<div className="skeleton bg-neutral/20 h-4 w-[58%] rounded" />
33+
<div className="skeleton bg-neutral/20 h-4 w-[72%] rounded" />
34+
<div className="skeleton bg-neutral/20 h-4 w-[30%] rounded" />
2935
</div>
3036
</div>
31-
<div className="skeleton mt-3 h-5 w-[78%]"></div>
32-
<div className="skeleton mt-3 h-5 w-[94%]"></div>
33-
<div className="skeleton mt-3 h-5 w-[78%]"></div>
34-
<div className="skeleton mt-3 h-5 w-[94%]"></div>
35-
<div className="skeleton mt-3 h-5 w-[52%]"></div>
37+
38+
<div className="skeleton h-4 w-[78%] rounded" />
39+
<div className="skeleton h-4 w-[94%] rounded" />
40+
<div className="skeleton h-4 w-[70%] rounded" />
41+
<div className="skeleton h-4 w-[88%] rounded" />
42+
<div className="skeleton h-4 w-1/2 rounded" />
3643
</div>
3744
</div>
3845
)

‎packages/webapp/src/components/skeleton/PadTitleLoader.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
type Props = {}
2-
export const PadTitleLoader = ({}: Props) => {
1+
export const PadTitleLoader = () => {
32
return (
4-
<div className="docTitle relative z-10 flex min-h-12 w-full flex-row items-center bg-white p-2 py-4 shadow-md md:shadow-none">
5-
<div className="skeleton hidden h-10 w-10 md:block"></div>
6-
<div className="skeleton ml-4 h-5 w-32"></div>
7-
<div className="skeleton ml-auto mr-4 hidden h-8 w-20 md:block"></div>
8-
<div className="skeleton ml-auto h-10 w-10 rounded-full md:ml-0"></div>
3+
<div className="docTitle flex min-h-14 items-center justify-between border-b border-slate-200 bg-white px-4 py-3">
4+
{/* Left side - Logo and title */}
5+
<div className="flex items-center gap-3">
6+
<div className="skeleton hidden size-8 rounded md:block" />
7+
<div className="skeleton h-5 w-32 rounded" />
8+
</div>
9+
10+
{/* Right side - Actions */}
11+
<div className="flex items-center gap-3">
12+
<div className="skeleton hidden h-8 w-20 rounded-lg md:block" />
13+
<div className="skeleton size-9 rounded-full" />
14+
</div>
915
</div>
1016
)
1117
}

‎packages/webapp/src/components/skeleton/SidebarLoader.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,40 @@
11
const SidebarLoader = () => {
22
return (
3-
<div className="sidebar flex h-full w-[25%] flex-col border-l border-gray-200 bg-base-100">
3+
<div className="flex h-full w-64 flex-col border-l border-slate-200 bg-white">
44
{/* Header */}
5-
<div className="border-b border-gray-200 p-4">
6-
<div className="skeleton h-6 w-36" />
7-
<div className="skeleton mt-2 h-3 w-24" />
5+
<div className="border-b border-slate-200 p-4">
6+
<div className="skeleton h-5 w-36 rounded" />
7+
<div className="skeleton mt-2 h-3 w-24 rounded" />
88
</div>
99

1010
{/* Version list */}
1111
<div className="flex-1 overflow-y-auto">
12-
{/* Day groups */}
1312
{[1, 2, 3].map((day) => (
14-
<div key={day} className="border-b border-gray-100">
13+
<div key={day} className="border-b border-slate-100">
1514
{/* Day header */}
1615
<div className="flex items-center justify-between px-4 py-3">
17-
<div className="skeleton h-4 w-24" />
18-
<div className="skeleton h-4 w-4" />
16+
<div className="skeleton h-4 w-24 rounded" />
17+
<div className="skeleton size-4 rounded" />
1918
</div>
2019

2120
{/* Session items */}
22-
<div className="pb-2">
21+
<div className="space-y-1 pb-3">
2322
{[1, 2].map((session) => (
24-
<div key={session} className="flex items-start gap-3 px-4 py-2.5">
23+
<div key={session} className="flex items-start gap-3 px-4 py-2">
2524
{/* Timeline dot */}
2625
<div className="pt-1.5">
27-
<div className="skeleton h-2 w-2 rounded-full" />
26+
<div className="skeleton size-2 rounded-full" />
2827
</div>
2928

3029
{/* Content */}
31-
<div className="flex-1">
30+
<div className="flex-1 space-y-1.5">
3231
<div className="flex items-center gap-2">
33-
<div className="skeleton h-4 w-20" />
32+
<div className="skeleton h-4 w-20 rounded" />
3433
{session === 1 && day === 1 && (
35-
<div className="skeleton h-4 w-12 rounded" />
34+
<div className="skeleton bg-primary/20 h-4 w-12 rounded" />
3635
)}
3736
</div>
38-
<div className="skeleton mt-1.5 h-3 w-16" />
37+
<div className="skeleton h-3 w-16 rounded" />
3938
</div>
4039
</div>
4140
))}

0 commit comments

Comments
 (0)