Skip to content

Commit

Permalink
refactor(css): migrate to tailwind css from plain css
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruru-m07
ruru-m07 committed Aug 4, 2024
1 parent 97e75a5 commit 7e64322
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 227 deletions.
227 changes: 17 additions & 210 deletions apps/www/app/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,227 +49,31 @@
--card: 230 40% 26.3% !important;
}

.border-box {
position: relative;
}

.border-box::before,
.border-box::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #2e2e2e;
}

.border-box::before {
top: -4px;
left: -4px;
}

.border-box::after {
bottom: -4px;
right: -4px;
}

.border-box::before::before,
.border-box::before::after,
.border-box::after::before,
.border-box::after::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #2e2e2e;
}

.border-box::before::before {
top: 0;
left: 0;
}

.border-box::before::before::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: red;
top: 1;
left: 3;
}

.border-box::before::after {
top: 0;
right: 0;
}

.border-box::after::before {
bottom: 0;
left: 0;
}

.border-box::after::after {
bottom: 0;
right: 0;
}

.home_main {
display: flex;
align-items: center;
justify-content: center;
background-image: url("/rings-bg.svg");
width: 100%;
height: 100vh;
max-height: 1000px;
background-size: cover;
position: relative;
flex-wrap: wrap;
background-repeat: no-repeat;
background-position: 50%;
}

.home_spotlight {
background: radial-gradient(
50% 50% at 50% 50%,
#fff 0,
hsla(0, 0%, 100%, 0) 100%
);
opacity: 0.06;
transform: rotate(45deg);
width: 100%;
top: -80px;
max-width: 1800px;
}

.home_intro {
display: flex;
flex-direction: column;
align-items: center;
max-width: 800px;
padding: 0 16px;
}

.words_selectionDot__A9lBk {
background: #fff;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1px var(--accent-color);
position: absolute;
}

.words_designers__jgVLV {
--accent-color: #666;
box-shadow: 0 0 0 2px var(--accent-color);
padding: 0 2px;
position: relative;
display: inline-flex;
}

.words_width__LcrJC {
display: inline-block;
width: -moz-fit-content;
width: fit-content;
letter-spacing: -1px;
line-height: 16px;
border-radius: 3px;
padding: 1px 4px;
font-size: 12px;
background: var(--accent-color);
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
animation: words_width_animation 2s normal;
}

.words_stunning {
fill: none;
stroke: #f1f1f1;
stroke-width: 0.2px;
stroke-linejoin: round;
stroke-dasharray: 3;
stroke-dashoffset: 0;
}

.words_customizable {
padding: 0 2px;
position: relative;
display: inline-flex;
.words_width_animat {
animation: words_width_animation 4s normal;
animation-delay: 1s;
}

.words_width_lens_body {
display: inline-block;
justify-content: center;
align-items: center;
letter-spacing: -1px;
line-height: 16px;
border-radius: 50%;
border: solid 1px #2e2e2e;
font-size: 12px;
position: absolute;
top: -15px;
left: 28%;
transform: translateX(-50%);
animation: lense 2s normal;
animation: lense 3s normal;
animation-delay: 1s;
}

.word_large_text {
font-size: 3rem;
line-height: 1;
animation: word_large_text_animation 2s normal;
}

.words_width_lens {
margin: 3px;
width: 63px;
height: 63px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(1.2px);
-webkit-backdrop-filter: blur(1.2px);
animation: word_large_text_animation 1s normal;
animation-delay: 1s;
}

.underline-clip:after {
content: "";
position: absolute;
top: 95%;
width: 150%;
aspect-ratio: 5 / 1;
left: 50%;
transform: translate(-50%, 0);
border-radius: 50%;
border: 2px solid hsl(0, 0%, 90%);
clip-path: polygon(0 0, 50% 50%, 100% 0);
animation: underline_clip 3s none;
}

.words_interfaces {
position: relative;
animation: underline_clip 4s none;
}

.words_interfaces::after {
content: "";
position: absolute;
height: 60px;
width: 6px;
top: -17px;
left: -10px;
border-radius: 9999px;
background: #f0f0f0;
animation: words_interfaces_after_animation 2s normal;
animation: words_interfaces_after_animation 3.5s normal;
}

.words_interfaces::before {
content: "";
position: absolute;
height: 6px;
width: 205px;
top: -5px;
left: -20px;
border-radius: 9999px;
background: #f0f0f0;
animation: words_interfaces_before_animation 2s normal;
animation: words_interfaces_before_animation 3.5s normal;
}

@keyframes words_width_animation {
Expand All @@ -289,10 +93,13 @@

@keyframes lense {
0% {
left: 50%;
left: 28%;
}
50% {
left: 60%;
}
100% {
left: 17%;
left: 28%;
}
}

Expand All @@ -319,7 +126,7 @@
width: 0;
opacity: 0;
}
50% {
65% {
width: 205px;
opacity: 0.5;
}
Expand All @@ -334,7 +141,7 @@
height: 0;
opacity: 0;
}
50% {
65% {
height: 60px;
opacity: 0.5;
}
Expand Down
50 changes: 33 additions & 17 deletions apps/www/components/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,56 +4,72 @@ import Link from "next/link";

const Hero = () => {
return (
<main className="home_main">
<div aria-hidden="true" className="home_spotlight"></div>
<div className="home_intro -mt-72">
<main className="flex items-center justify-center bg-[url('/rings-bg.svg')] w-full h-screen bg-cover relative bg-no-repeat flex-wrap bg-center">
<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]"
></div>
<div className="flex flex-col items-center max-w-[800px] px-[16px] py-[0] -mt-72">
<h1 className="text-4xl font-bold text-center space-x-2 ">
<span
className="words_designers__jgVLV mr-2"
className="[box-shadow:0_0_0_2px_#666] px-[2px] py-[0] relative inline-flex mr-2"
style={{ letterSpacing: "-2px" }}
>
<div
className="words_selectionDot__A9lBk"
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ top: "-3px", left: "-3px" }}
></div>
<div
className="words_selectionDot__A9lBk"
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ right: "-3px", top: "-3px" }}
></div>
<div
className="words_selectionDot__A9lBk"
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", left: "-3px" }}
></div>
<div
className="words_selectionDot__A9lBk"
className="bg-[#fff] w-[4px] h-[4px] [box-shadow:0_0_0_1px_var(--accent-color)] absolute"
style={{ bottom: "-3px", right: "-3px" }}
></div>
<div className="words_width__LcrJC">330 x 56</div>Craft Seamless
<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">
330 x 56
</div>
Craft Seamless
<span className="words_comma__9_pb3">,</span>
</span>
<span>
<text className="words_stunning">
<text className="stroke-[#f1f1f1] stroke-[0.2px]">
{" "}
<span className="word_large_text">S</span>tunn
<span className="word_large_text">i</span>ng,{" "}
<span className="word_large_text text-[3rem] leading-none">
S
</span>
tunn
<span className="word_large_text text-[3rem] leading-none">
i
</span>
ng,{" "}
</text>
</span>
<br />
<div className="my-7" />
<span className="words_customizable">
<div className="words_width_lens_body">
<span className="px-[2px] py-[0] relative inline-flex">
<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="words_width_lens"
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]"
data-word-researchers-glass
style={{ transform: "none" }}
/>
</div>
Customizable
</span>
<span className="mx-52" />
<span className="words_interfaces">Interfaces</span>
<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] ">
Interfaces
</span>
<span>with</span>
<span className="relative underline-clip">Ruru UI</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)]">
Ruru UI
</span>
</h1>
<p className="text-muted-foreground text-lg mx-20 mt-6 mb-6 text-center ">
the ultimate design system and UI library for creating seamless,
Expand Down

0 comments on commit 7e64322

Please sign in to comment.