Skip to content

Commit f0a0b38

Browse files
halvaradophalvaradop
committed
feat(website): add Community page
1 parent 19f77f2 commit f0a0b38

9 files changed

Lines changed: 178 additions & 2 deletions

File tree

‎app/src/app/community/page.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { HeroSection } from "@/ui/community/hero"
2+
import { CommunitySection } from "@/ui/community/community-cards"
3+
import { CallToAction } from "@/ui/call-to-action"
4+
5+
const CommunityPage = () => {
6+
return (
7+
<main>
8+
<HeroSection />
9+
<CommunitySection />
10+
<CallToAction
11+
index={2}
12+
separator="Start Contributing"
13+
title="Join Our Community"
14+
description="Become a part of our growing community and connect with like-minded individuals."
15+
button="Get Started"
16+
href="https://github.com/halvaradop/tailwindcss-utilities"
17+
/>
18+
</main>
19+
)
20+
}
21+
22+
export default CommunityPage

‎app/src/app/docs/page.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const DocsPage = () => {
2+
return (
3+
<main className="min-h-[60vh] flex flex-col items-center justify-center text-center p-8">
4+
<h1 className="text-4xl font-bold mb-4 text-primary">Documentation</h1>
5+
<p className="text-muted text-lg max-w-2xl">
6+
Welcome to the documentation! Here you'll find guides, API references, and best practices for using{" "}
7+
<b>@halvaradop/tailwindcss-utilities</b> in your projects. Select a topic from the sidebar or start exploring the
8+
utilities and animations sections.
9+
</p>
10+
</main>
11+
)
12+
}
13+
14+
export default DocsPage

‎app/src/lib/@types/props.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,12 @@ export interface SegmentAnimationProps {
7878
title: string
7979
description: string
8080
}
81+
82+
export interface CallToActionProps {
83+
title: string
84+
description: string
85+
button: string
86+
href: string
87+
index: number
88+
separator: string
89+
}

‎app/src/lib/content.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,36 @@ export const benefitsContent = [
2020
desc: `We follow Tailwind’s core design philosophy — fast builds, atomic classes, and a unified, zero-runtime experience.`,
2121
},
2222
]
23+
24+
export const communityCards = [
25+
{
26+
number: "/01",
27+
title: "Improve Documentation",
28+
desc: "Suggest edits, add examples, or clarify guides to help others get started faster.",
29+
href: "https://github.com/halvaradop/tailwindcss-utilities/tree/master/app/src/app/docs",
30+
},
31+
{
32+
number: "/02",
33+
title: "Join the Discussion",
34+
desc: "Share your ideas, ask questions, or give feedback in our GitHub Discussions.",
35+
href: "https://github.com/halvaradop/tailwindcss-utilities/discussions",
36+
},
37+
{
38+
number: "/03",
39+
title: "Report Issues",
40+
desc: "Found a bug or have a feature request? Open an issue and help us improve.",
41+
href: "https://github.com/halvaradop/tailwindcss-utilities/issues",
42+
},
43+
{
44+
number: "/04",
45+
title: "Contribute Code",
46+
desc: "Help us build new features, fix bugs, or refactor the codebase. Every PR is welcome!",
47+
href: "https://github.com/halvaradop/tailwindcss-utilities/pulls",
48+
},
49+
{
50+
number: "/05",
51+
title: "Star the Project",
52+
desc: "Show your support by starring us on GitHub. It helps others discover the toolkit!",
53+
href: "https://github.com/halvaradop/tailwindcss-utilities",
54+
},
55+
]

‎app/src/ui/call-to-action.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Link from "next/link"
2+
import { Button } from "@halvaradop/ui-button"
3+
import { Separator } from "@/ui/separator"
4+
import { CallToActionProps } from "@/lib/@types/props"
5+
6+
export const CallToAction = ({ index, separator, title, description, button, href }: CallToActionProps) => {
7+
return (
8+
<section>
9+
<Separator index={index}>{separator}</Separator>
10+
<div className="min-h-[50dvh] mx-10 py-16 px-4 flex items-center justify-center flex-col text-center border-x border-solid border-border sm:px-6 md:px-8 base:mx-16 base:px-10">
11+
<h2 className="text-primary text-2xl md:text-fluid-3xl">{title}</h2>
12+
<p className="mt-6 mb-8 text-muted text-fluid-base">{description}</p>
13+
<Button asChild>
14+
<Link href={href}>{button}</Link>
15+
</Button>
16+
</div>
17+
</section>
18+
)
19+
}

‎app/src/ui/community/community-cards.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use client"
2+
import Link from "next/link"
3+
import { useState } from "react"
4+
import { motion } from "motion/react"
5+
import { Separator } from "@/ui/separator"
6+
import { cardVariants } from "@/ui/motion-config/card.motion"
7+
import { SegmentAnimation } from "@/ui/motion/segment"
8+
import { communityCards } from "@/lib/content"
9+
10+
export const CommunitySection = () => {
11+
const [hovered, setHovered] = useState<number | null>(null)
12+
return (
13+
<section>
14+
<Separator index={1}>Get Involved</Separator>
15+
<section className="mx-10 border-x border-solid border-border base:mx-16 lg:min-h-[calc(100dvh-4rem)] lg:flex lg:flex-col">
16+
<SegmentAnimation
17+
title="Ways to Contribute"
18+
description="Tailwind CSS v4 brings a modern engine — and our utilities are built for it. We’ve designed every package to integrate seamlessly using the new configuration API, variant generator, and dynamic styling support."
19+
/>
20+
<div className="grid text-primary text-left a:border-t a:border-solid a:border-border lg:flex-100 lg:grid-cols-3 lg:a:border-r lg:a:nth-[3]:border-r-0 lg:a:nth-[5]:border-r-0 lg:a:nth-[4]:col-span-2 xl:min-h-[30dvw] xl:a:nth-[2]:border-r">
21+
{communityCards.map((item, idx) => (
22+
<Link href={item.href} key={item.number} target="_blank" rel="noopener noreferrer">
23+
<motion.article
24+
key={item.number}
25+
className="group w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 relative z-10 overflow-hidden sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start hover:bg-surface hover:cursor-pointer"
26+
onMouseEnter={() => setHovered(idx)}
27+
onMouseLeave={() => setHovered(null)}
28+
transition={cardVariants}
29+
>
30+
<span>{item.number}</span>
31+
<div className="w-full text-right self-end overflow-hidden base:text-left">
32+
<p className="text-lg font-medium group-hover:text-primary">{item.title}</p>
33+
<motion.p
34+
className="mt-1 text-muted overflow-hidden group-hover:text-primary"
35+
animate={
36+
hovered === idx
37+
? { opacity: 1, y: 0, height: "auto" }
38+
: { opacity: 0, y: 20, height: 0 }
39+
}
40+
initial={{ opacity: 0, y: 20, height: 0 }}
41+
transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
42+
>
43+
{item.desc}
44+
</motion.p>
45+
</div>
46+
</motion.article>
47+
</Link>
48+
))}
49+
</div>
50+
</section>
51+
</section>
52+
)
53+
}

‎app/src/ui/community/hero.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { TextEffect } from "@/ui/motion/text-effect"
2+
3+
export const HeroSection = () => {
4+
return (
5+
<section className="mx-10 py-16 text-primary border-x border-solid border-border base:mx-16">
6+
<TextEffect
7+
className="mb-4 px-4 text-3xl/relaxed font-medium uppercase sm:px-6 md:px-8 base:px-10"
8+
preset="fade-in-blur"
9+
speedReveal={1.1}
10+
speedSegment={0.5}
11+
as="h1"
12+
>
13+
Join Our Community
14+
</TextEffect>
15+
<TextEffect
16+
className="px-4 text-muted text-lg sm:px-6 md:px-8 base:px-10"
17+
preset="fade-in-blur"
18+
speedReveal={1.1}
19+
speedSegment={0.5}
20+
>
21+
Join our community to share ideas, ask questions, and contribute to "@halvaradop/tailwindcss-utilities"! Connect
22+
with us on GitHub, open issues, or join discussions to help shape the future of the toolkit.
23+
</TextEffect>
24+
</section>
25+
)
26+
}

‎app/src/ui/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const Footer = () => {
5959
</figure>
6060
</div>
6161
</section>
62-
<Separator index={5} rotate>
62+
<Separator index={6} rotate>
6363
<span className="mx-auto">&#169; 2025 halvaradop.</span>
6464
</Separator>
6565
</footer>

‎app/src/ui/home/hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const HeroSection = () => {
44
return (
55
<section className="mx-10 min-h-[calc(100dvh-4rem)] text-primary border-x border-solid border-border base:mx-16">
66
<TextEffect
7-
className="py-10 px-4 text-lg uppercase border-b border-border sm:px-6 md:px-8 base:py-16 base:px-10"
7+
className="py-10 px-4 text-lg uppercase border-b border-solid border-border sm:px-6 md:px-8 base:py-16 base:px-10"
88
preset="fade-in-blur"
99
speedReveal={1.1}
1010
speedSegment={0.5}

0 commit comments

Comments
 (0)