fix: start section

src/components/section/section-root.tsx

@@ -1,16 +1,32 @@
 import { cn } from "@/lib/utils";
-import type{ ClassValue } from "clsx";
+import { cva, VariantProps } from "class-variance-authority";
+import type { ClassValue } from "clsx";
 
-interface SectionRootProps {
+
+const sectionVariants = cva(
+  "justify-center h-screen",
+  {
+    variants: {
+      variant: {
+        default: "grid justify-center h-screen",
+        start: "h-screen flex flex-col items-center justify-center text-center space-y-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+interface SectionRootProps extends VariantProps<typeof sectionVariants> {
   id: string;
   children: React.ReactNode;
   className?: ClassValue;
   ref?: React.Ref<HTMLElement>;
 }
 
-export function SectionRoot({ id, children, className, ref }: Readonly<SectionRootProps>) {
+export function SectionRoot({ id, children, variant, className, ref }: Readonly<SectionRootProps>) {
   return (
-    <section ref={ref} id={id} className={cn("grid justify-center h-screen", className)}>
+    <section ref={ref} id={id} className={cn(sectionVariants({ variant, className }))}>
       {children}
     </section>
   );

src/components/start.tsx

@@ -6,20 +6,20 @@ import { BackToTop } from "./back-to-top";
 import { Section } from "./section";
 
 export function Start() {
-	const t = useTranslations();
+  const t = useTranslations();
   const startRef = useRef<HTMLElement>(null);
 
-	return (
-		<Section.Root
+  return (
+    <Section.Root
       ref={startRef}
-			id="start"
-			className="flex-col items-center justify-center text-center space-y-2"
-		>
+      id="start"
+      variant="start"
+    >
       <h1>{t("WIP")}</h1>
-			<div className="text-3xl">{t("Start.Hello")}</div>
-			<div className="text-6xl">{t("Start.Name")}</div>
-			<div className="text-2xl">{t("Start.Details")}</div>
+      <div className="text-3xl">{t("Start.Hello")}</div>
+      <div className="text-6xl">{t("Start.Name")}</div>
+      <div className="text-2xl">{t("Start.Details")}</div>
       <BackToTop startRef={startRef} />
-		</Section.Root>
-	);
+    </Section.Root>
+  );
 }