Skip to content

Commit

Permalink
Merge pull request #74 from ruru-m07/feat/landing-page
Browse files Browse the repository at this point in the history
feat(landing-page): update landing page
  • Loading branch information
ruru-m07 authored Sep 21, 2024
2 parents f50b109 + d522e20 commit 70be0ce
Show file tree
Hide file tree
Showing 9 changed files with 540 additions and 32 deletions.
78 changes: 73 additions & 5 deletions apps/www/app/(home)/page.tsx → apps/www/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import Hero from "../../components/hero";
import Hero from "@/components/hero";
import {
Heart,
LayoutTemplate,
LibraryBig,
Palette,
Plus,
Expand All @@ -13,10 +15,11 @@ import { cn } from "@/utils/cn";
import { File, Folder, Files } from "fumadocs-ui/components/files";
import { Spinner } from "ruru-ui/components/spinner";
import dynamic from "next/dynamic";
import { GitHubLogoIcon } from "@radix-ui/react-icons";
import { GitHubLogoIcon, HeartIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Button } from "ruru-ui/components/button";
import { Footer } from "@/components/footer";
import ContributorCounter from "@/components/contributor-count";
import Image from "next/image";

const CodeBlockServer = dynamic(
() => import("@/components/ui/code-block-server"),
Expand Down Expand Up @@ -81,9 +84,9 @@ export default function App() {
return (
<>
<main>
<div className="dark:bg-[#050505]">
<div>
<Hero />
<div className="border w-[80%] m-auto">
<div className="border w-[80%] m-auto z-10 bg-[#050505] mt-5">
<div
className="relative p-6 text-center text-3xl font-bold py-14"
style={{
Expand Down Expand Up @@ -360,6 +363,71 @@ export default function App() {

<ShapratorHorizontal />

<div className="flex flex-col items-center justify-center py-10">
<Heart size={36} className="mb-3" />
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
Made Possible by You.
</h3>
<p className="text-sm text-muted-foreground my-3">
Ruru UI is 100% powered by passion and open source community.
</p>

<ContributorCounter repoOwner={"ruru-m07"} repoName={"ruru-ui"} />

<p className="text-sm text-muted-foreground my-3">
Some of our best contributors.
</p>
</div>

<ShapratorHorizontal />

<div className="flex">
<Link href={"/theme"} className="w-1/2 border-r">
<div className="z-10 p-4">
<div className="flex items-center ml-5 mt-5">
<Palette size={20} strokeWidth={1.5} className="mr-2" />
<h2 className="text-base font-medium">Theming</h2>
</div>
<p className="text-muted-foreground text-xs ml-5 mt-2">
Customize theme your components.
</p>
</div>
<div>
<Image
src="/assets/theme.svg"
alt="theme"
width={715}
height={409}
/>
</div>
</Link>
<Link href={"/blocks"} className="w-1/2 bg-[#080808]">
<div className="z-10 p-4">
<div className="flex items-center ml-5 mt-5">
<LayoutTemplate
size={20}
strokeWidth={1.5}
className="mr-2"
/>
<h2 className="text-base font-medium">Blocks</h2>
</div>
<p className="text-muted-foreground text-xs ml-5 mt-2">
The Blocks To Build Your App Faster
</p>
</div>
<div>
<Image
src="/assets/blocks.svg"
alt="blocks"
width={715}
height={409}
/>
</div>
</Link>
</div>

<ShapratorHorizontal />

<div
className="relative p-6 text-center text-3xl font-bold py-14"
style={{
Expand Down
58 changes: 58 additions & 0 deletions apps/www/components/contributor-count.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import type { HTMLAttributes } from "react";
import Image from "next/image";
import { cn } from "@/utils/cn";
import { fetchContributors } from "@/utils/get-contributors";

export interface ContributorCounterProps
extends HTMLAttributes<HTMLDivElement> {
repoOwner: string;
repoName: string;
displayCount?: number;
}

export default async function ContributorCounter({
repoOwner,
repoName,
displayCount = 20,
...props
}: ContributorCounterProps): Promise<React.ReactElement> {
const contributors = await fetchContributors(repoOwner, repoName);
const topContributors = contributors
.filter((contributor) => contributor.login !== "turbobot-temp")
.slice(0, displayCount);

return (
<div
{...props}
className={cn("flex flex-col items-center gap-4", props.className)}
>
<div className="flex flex-row flex-wrap items-center justify-center md:pe-4">
{topContributors.map((contributor, i) => (
<a
key={contributor.login}
href={`https://github.com/${contributor.login}`}
rel="noreferrer noopener"
target="_blank"
className="size-10 overflow-hidden rounded-full border-4 border-[#050505] bg-fd-background md:-mr-4 md:size-12"
style={{
zIndex: topContributors.length - i,
}}
>
<Image
src={contributor.avatar_url}
alt={`${contributor.login}'s avatar`}
unoptimized
width={48}
height={48}
/>
</a>
))}
{displayCount < contributors.length ? (
<div className="size-12 content-center rounded-full bg-fd-secondary text-center">
+{contributors.length - displayCount}
</div>
) : null}
</div>
</div>
);
}
99 changes: 72 additions & 27 deletions apps/www/components/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,68 @@ import { GitHubLogoIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Button, buttonVariants } from "ruru-ui/components/button";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { cn } from "@/utils/utils";

const Hero = () => {
const router = useRouter();

return (
<main className="flex items-center justify-center bg-[url('/assets/rings-bg.svg')] w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center">
<main className="flex items-center justify-center w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center bg-[#05050541]">
<Image
className="absolute top-0 ring-0 -z-10"
src={"/assets/background_dots.svg"}
alt="bg dots"
width={1508}
height={904}
/>
<Image
className="absolute -top-3 ring-0 -z-10"
src={"/assets/shaders.svg"}
alt="bg dots"
width={1508}
height={1114}
/>
<Image
className="absolute top-2 left-2 -z-10"
src={"/assets/glowing_logo.svg"}
alt="bg dots"
width={100}
height={100}
/>
<div
aria-hidden="true"
className="bg-[radial-gradient(_50%_50%_at_50%_50%,_#fff_0,_hsla(0,_0%,_100%,_0)_100%_)] opacity-[0.06] rotate-45 w-full -top-[80px] max-w-[1800px]"
className="opacity-[0.06] rotate-45 w-full -top-[80px] max-w-[1800px]"
></div>
<div className="flex flex-col items-center max-w-[800px] px-[16px] py-[0] -mt-72">
<div className="flex flex-col items-center max-w-[800px] px-[16px] -mt-72 z-10">
<h1 className="text-4xl font-bold text-center space-x-2 ">
<span
className="[box-shadow:0_0_0_2px_#666] px-[2px] py-[0] relative inline-flex mr-2"
style={{ letterSpacing: "-2px" }}
className="[box-shadow:0_0_0_1.5px_#444444] px-[2px] py-[0] relative inline-flex mr-2"
style={{ letterSpacing: "1px" }}
>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ top: "-3px", left: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ top: "-4px", left: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ right: "-3px", top: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ right: "-4px", top: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", left: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-4px", left: "-4px" }}
></div>
<div
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", right: "-3px" }}
className="bg-[#BCBCBC] border-[#444444] border w-[6px] h-[6px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-4px", right: "-4px" }}
></div>
<div className="words_width_animat inline-block w-[fit-content] tracking-[-1px] leading-[16px] rounded-[3px] px-[4px] py-px text-[12px] bg-[#666] absolute -top-[28px] left-2/4 -translate-x-1/2">
<div className="words_width_animat font-medium inline-block w-[fit-content] tracking-[-1px] leading-[16px] rounded-[3px] px-[5px] py-[2px] text-[10px] bg-[#4d4d4d] absolute -top-[28px] left-2/4 -translate-x-1/2">
330 x 56
</div>
Craft Seamless
<span className="words_comma__9_pb3">,</span>
</span>
<span>
<span style={{ letterSpacing: "1px" }}>
<text className="stroke-[#f1f1f1] stroke-[0.2px]">
{" "}
<span className="word_large_text text-[3rem] leading-none">
Expand All @@ -58,7 +81,10 @@ const Hero = () => {
</span>
<br />
<div className="my-7" />
<span className="px-[2px] py-[0] relative inline-flex">
<span
className="px-[2px] py-[0] relative inline-flex"
style={{ letterSpacing: "1px" }}
>
<div className="words_width_lens_body inline-block justify-center items-center tracking-[-1px] leading-[16px] rounded-[50%] border-[solid] border-[1px] border-[#2e2e2e] text-[12px] absolute -top-[15px] left-[28%] -translate-x-1/2">
<div
className="m-[3px] w-[63px] h-[63px] rounded-[50%] bg-[rgba(255,_255,_255,_0.2)] [box-shadow:0_4px_30px_rgba(0,_0,_0,_0.1)] backdrop-filter backdrop-blur-[1.2px]"
Expand All @@ -68,26 +94,34 @@ const Hero = () => {
</div>
Customizable
</span>
<span className="mx-52" />
<span className="relative words_interfaces after:content-[''] after:absolute after:h-[60px] after:w-[6px] after:-top-[17px] after:-left-[10px] after:rounded-full after:bg-[#f0f0f0] before:content-[''] before:absolute before:h-[6px] before:w-[205px] before:-top-[5px] before:-left-[20px] before:rounded-full before:bg-[#f0f0f0] ">
<span className="w-5" />
<span
className={cn(
"relative words_interfaces",
"after:content-[''] after:absolute after:h-[60px] after:w-[6px] after:-top-[17px] after:-left-[10px] after:rounded-full after:bg-[#f0f0f0]",
"before:content-[''] before:absolute before:h-[6px] before:w-[205px] before:-top-[1px] before:-left-[25px] before:rounded-full before:bg-[#f0f0f0] ",
)}
style={{ letterSpacing: "1px" }}
>
Interfaces
</span>
<span>with</span>
<span className="relative underline-clip after:content-[''] after:absolute after:top-[95%] after:w-[150%] after:[aspect-ratio:5_/_1] after:left-2/4 after:-translate-x-1/2 after:translate-y-[0] after:rounded-[50%] after:border-[2px] after:border-[solid] after:border-[hsl(0,0%,90%)] after:[clip-path:polygon(0_0,_50%_50%,_100%_0)]">
<span style={{ letterSpacing: "1px" }}>with</span>
<span
className={cn(
"relative underline-clip",
"after:content-[''] after:absolute after:top-[95%] after:w-[150%] after:[aspect-ratio:5_/_1] after:left-2/4 after:-translate-x-1/2 after:translate-y-[0] after:rounded-[50%] after:border-[2px] after:border-[solid] after:border-[hsl(0,0%,90%)] after:[clip-path:polygon(0_0,_50%_50%,_100%_0)]",
)}
style={{ letterSpacing: "1px" }}
>
Ruru UI
</span>
</h1>
<p className="text-muted-foreground text-lg mx-20 mt-6 mb-6 text-center ">
<p className="text-muted-foreground text-lg mx-20 mt-9 mb-9 text-center ">
the ultimate design system and UI library for creating seamless,
beautiful, and highly customizable user interfaces.
</p>
<div className="flex space-x-3">
<div className="flex space-x-3 mt-2">
<Button onClick={() => router.push("/docs")}>Get Started</Button>
{/* <Button variant={"secondary"}>
<Link target="_blank" className="flex items-center" href={"https://github.com/ruru-m07/ruru-ui"}>
<GitHubLogoIcon className="mr-2" /> Give a star
</Link>
</Button> */}
<Button
onClick={() =>
window.open("https://github.com/ruru-m07/ruru-ui", "_blank")
Expand All @@ -97,6 +131,17 @@ const Hero = () => {
<GitHubLogoIcon className="mr-2" /> Give a star
</Button>
</div>
<div className="fixed h-[50px] border rounded-full mt-10 flex justify-around items-center px-2 top-0 backdrop-blur-xl bg-primary-foreground/35">
{["docs", "blocks", "theme", "sponsors"].map((i) => (
<Link
key={i}
href={`/${i}`}
className="text-muted-foreground hover:text-primary text-sm hover:border hover:border-border border border-transparent hover:bg-secondary/55 rounded-full py-1 px-4"
>
{i.charAt(0).toUpperCase() + i.slice(1)}
</Link>
))}
</div>
</div>
</main>
);
Expand Down
Loading

0 comments on commit 70be0ce

Please sign in to comment.