styles(website): add smooth animation

halvaradop · halvaradop · commit e0023c81283b · 2025-06-14T12:47:26.000-05:00
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -40,11 +40,10 @@ export const metadata: Metadata = {
 }
 
 export default function RootLayout({ children }: LayoutProps) {
-    console.log("Rendering RootLayout")
     return (
-        <html lang="en">
+        <html className="scroll-smooth" lang="en">
             <body
-                className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll-smooth scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
+                className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
             >
                 <Header />
                 {children}
diff --git a/app/src/lib/@types/props.ts b/app/src/lib/@types/props.ts
@@ -23,8 +23,10 @@ export interface TitleProps extends ImageSetProps {
     title: string
 }
 
-export interface SeparatorProps extends PropsWithChildren {
-    index?: number
+export interface SeparatorProps {
+    className?: string
+    redirectTo?: string
+    children: string
     rotate?: boolean
 }
 
diff --git a/app/src/ui/community/community-cards.tsx b/app/src/ui/community/community-cards.tsx
@@ -3,7 +3,7 @@ import Link from "next/link"
 import { useState } from "react"
 import { motion } from "motion/react"
 import { Separator } from "@/ui/separator"
-import { cardVariants } from "@/ui/motion-config/card.motion"
+import { cardVariants } from "@/ui/motion-config/benefit.motion"
 import { SegmentAnimation } from "@/ui/motion/segment"
 import { communityCards } from "@/lib/content"
 
diff --git a/app/src/ui/footer.tsx b/app/src/ui/footer.tsx
@@ -59,8 +59,8 @@ export const Footer = () => {
                     </figure>
                 </div>
             </section>
-            <Separator rotate>
-                <span className="mx-auto">&#169; 2025 halvaradop.</span>
+            <Separator className="justify-center" redirectTo="@halvaradop/tailwindcss-utilities" rotate>
+                &#169; 2025 halvaradop.
             </Separator>
         </footer>
     )
diff --git a/app/src/ui/header/header.tsx b/app/src/ui/header/header.tsx
@@ -29,7 +29,10 @@ export const Header = () => {
     }, [])
 
     return (
-        <header className={merge("flex items-center border-b border-solid border-border", isOpen ? "open" : "")}>
+        <header
+            className={merge("flex items-center border-b border-solid border-border", isOpen ? "open" : "")}
+            id="halvaradop-tailwindcss-utilities"
+        >
             <nav className="flex-100 h-16 ml-10 px-4 border-x border-solid border-border sm:px-6 md:px-8 base:ml-16 base:px-10 base:flex base:items-center base:justify-between base:relative">
                 <div className="w-full h-full flex items-center justify-between relative z-20 base:w-fit">
                     <h2 className="text-primary base:text-lg">
diff --git a/app/src/ui/home/benefits.tsx b/app/src/ui/home/benefits.tsx
@@ -3,7 +3,7 @@ import { useState } from "react"
 import { motion } from "motion/react"
 import { Separator } from "@/ui/separator"
 import { SegmentAnimation } from "@/ui/motion/segment"
-import { cardVariants } from "@/ui/motion-config/card.motion"
+import { cardVariants } from "@/ui/motion-config/benefit.motion"
 import { benefitsContent } from "@/lib/content"
 
 export const BenefitsSection = () => {
diff --git a/app/src/ui/home/community-cards.tsx b/app/src/ui/home/community-cards.tsx
diff --git a/app/src/ui/motion-config/benefit.motion.ts b/app/src/ui/motion-config/benefit.motion.ts
diff --git a/app/src/ui/separator.tsx b/app/src/ui/separator.tsx
@@ -1,26 +1,40 @@
 "use client"
+import Link from "next/link"
 import Image from "next/image"
 import arrow from "@/assets/arrow.svg"
 import type { SeparatorProps } from "@/lib/@types/props"
 
-export const Separator = ({ rotate = false, children }: SeparatorProps) => {
+export const Separator = ({ rotate = false, className, children, redirectTo }: SeparatorProps) => {
+    const name = encodeURIComponent(
+        String(redirectTo ?? children)
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, "-")
+            .replace(/^-+|-+$/g, "")
+    )
+
     return (
-        <div className="h-16 flex items-center text-primary border-y border-solid border-border separator">
-            <figure className="group w-10 h-full flex items-center justify-center relative overflow-hidden img:transition-transform img:ease-linear img:duration-300 hover:cursor-pointer base:w-16">
-                <Image
-                    className={`${rotate ? "-rotate-127 group-hover:-translate-y-14 group-hover:translate-x-14" : "group-hover:translate-y-18"}`}
-                    src={arrow}
-                    alt="Arrow Icon"
-                    priority
-                />
-                <Image
-                    className={`absolute ${rotate ? "-rotate-127 translate-y-14 -translate-x-14 group-hover:translate-0" : "-translate-y-14 group-hover:translate-0"}`}
-                    src={arrow}
-                    alt="Arrow Icon"
-                    priority
-                />
-            </figure>
-            <p className="flex-100 h-full px-4 flex items-center border-x border-border sm:px-6 md:px-8 base:px-10">{children}</p>
+        <div className="h-16 flex items-center text-primary border-y border-solid border-border separator" id={name}>
+            <Link className="h-full" href={`#${name}`}>
+                <figure className="group w-10 h-full flex items-center justify-center relative overflow-hidden img:transition-transform img:ease-linear img:duration-300 hover:cursor-pointer base:w-16">
+                    <Image
+                        className={`${rotate ? "-rotate-127 group-hover:-translate-y-14 group-hover:translate-x-14" : "group-hover:translate-y-18"}`}
+                        src={arrow}
+                        alt="Arrow Icon"
+                        priority
+                    />
+                    <Image
+                        className={`absolute ${rotate ? "-rotate-127 translate-y-14 -translate-x-14 group-hover:translate-0" : "-translate-y-14 group-hover:translate-0"}`}
+                        src={arrow}
+                        alt="Arrow Icon"
+                        priority
+                    />
+                </figure>
+            </Link>
+            <p
+                className={`flex-100 h-full px-4 flex items-center border-x border-border sm:px-6 md:px-8 base:px-10 ${className}`}
+            >
+                {children}
+            </p>
             <span className="w-10 grid place-content-center base:w-16 index" />
         </div>
     )

Original file line number	Diff line number	Diff line change
`@@ -40,11 +40,10 @@ export const metadata: Metadata = {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`export default function RootLayout({ children }: LayoutProps) {`
`43`		`- console.log("Rendering RootLayout")`
`44`	`43`	`return (`
`45`		`- <html lang="en">`
	`44`	`+ <html className="scroll-smooth" lang="en">`
`46`	`45`	`<body`
`47`		- className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll-smooth scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
	`46`	+ className={`${inter.className} min-h-screen grid grid-rows-[auto,1fr_auto] antialiased relative overflow-x-hidden bg-black scroll:w-2 track:my-2 thumb:rounded thumb:bg-gray-100 has-[header.open]:scroll:bg-gray-300`}
`48`	`47`	`>`
`49`	`48`	`<Header />`
`50`	`49`	`{children}`
Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,10 @@ export interface TitleProps extends ImageSetProps {`
`23`	`23`	`title: string`
`24`	`24`	`}`
`25`	`25`
`26`		`-export interface SeparatorProps extends PropsWithChildren {`
`27`		`- index?: number`
	`26`	`+export interface SeparatorProps {`
	`27`	`+ className?: string`
	`28`	`+ redirectTo?: string`
	`29`	`+ children: string`
`28`	`30`	`rotate?: boolean`
`29`	`31`	`}`
`30`	`32`