styles: re-structure project

Author: halvaradop

app/src/app/layout.tsx

@@ -4,7 +4,6 @@ import { LayoutProps } from "@/lib/@types/props"
 import { Header } from "@/ui/header/header"
 import { Footer } from "@/ui/footer"
 import "@/ui/globals.css"
-import { Cursor } from "@/ui/cursor"
 
 const inter = Inter({
     subsets: ["latin"],

app/src/app/page.tsx

@@ -1,15 +1,15 @@
-import { HeroSection } from "@/ui/hero"
-import { UtilitiesSection } from "@/ui/utilities"
-import { DeveloperExperienceSection } from "@/ui/developer-experience"
-import { PoweredBySection } from "@/ui/powered-by"
-import { DocsSection } from "@/ui/docs"
+import { HeroSection } from "@/ui/home/hero"
+import { FeatureListSection } from "@/ui/home/feature-list"
+import { BenefitsSection } from "@/ui/home/benefits"
+import { PoweredBySection } from "@/ui/home/powered-by"
+import { DocsSection } from "@/ui/home/docs"
 
 const Index = () => {
     return (
         <main>
             <HeroSection />
-            <DeveloperExperienceSection />
-            <UtilitiesSection />
+            <BenefitsSection />
+            <FeatureListSection />
             <PoweredBySection />
             <DocsSection />
         </main>

app/src/lib/content.ts

@@ -1,4 +1,4 @@
-export const whyChooseUsContent = [
+export const benefitsContent = [
     {
         number: "/01",
         title: "Native",

app/src/ui/footer.tsx

@@ -8,7 +8,7 @@ import tailwindLogo from "@/assets/tailwind.svg"
 export const Footer = () => {
     return (
         <footer>
-            <Separator index={4}>Stay connected</Separator>
+            <Separator index={5}>Stay connected</Separator>
             <section className="mx-10 text-primary border-x border-solid border-border base:grid md:grid-cols-2 base:mx-16">
                 <h2 className="py-16 px-4 text-fluid-xl text-center border-b border-solid border-border sm:px-6 md:px-8 base:px-10 base:col-span-2 hover:bg-surface">
                     @halvaradop/tailwindcss

app/src/ui/header/header-menu.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link"
 import { motion } from "motion/react"
-import { itemVariants, menuVariants } from "@/ui/motion/menu.motion"
-import { TextScramble } from "../text-scramble"
+import { itemVariants, menuVariants } from "@/ui/motion-config/menu.motion"
+import { TextScramble } from "@/ui/motion/text-scramble"
 
 export const HeaderMenu = () => {
     return (

app/src/ui/developer-experience.tsx app/src/ui/home/benefits.tsxapp/src/ui/developer-experience.tsx renamed to app/src/ui/home/benefits.tsx

@@ -1,12 +1,12 @@
 "use client"
 import { useState } from "react"
-import { Separator } from "./separator"
 import { motion } from "motion/react"
-import { SegmentAnimation } from "./animations/segment"
-import { cardVariants } from "./motion/card.motion"
-import { whyChooseUsContent } from "@/lib/content"
+import { Separator } from "@/ui/separator"
+import { SegmentAnimation } from "@/ui/motion/segment"
+import { cardVariants } from "@/ui/motion-config/card.motion"
+import { benefitsContent } from "@/lib/content"
 
-export const DeveloperExperienceSection = () => {
+export const BenefitsSection = () => {
     const [hovered, setHovered] = useState<number | null>(null)
 
     return (
@@ -18,7 +18,7 @@ export const DeveloperExperienceSection = () => {
                     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."
                 />
                 <div className="grid text-primary text-left article:border-t article:border-solid article:border-border lg:flex-100 lg:grid-cols-2 lg:article:border-r lg:article:even:border-r-0 xl:min-h-[30dvw] xl:grid-cols-4 xl:article:nth-[2]:border-r">
-                    {whyChooseUsContent.map((item, idx) => (
+                    {benefitsContent.map((item, idx) => (
                         <motion.article
                             key={item.number}
                             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"

app/src/ui/docs.tsx app/src/ui/home/docs.tsxapp/src/ui/docs.tsx renamed to app/src/ui/home/docs.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link"
 import { Button } from "@halvaradop/ui-button"
-import { Separator } from "./separator"
+import { Separator } from "@/ui/separator"
 
 export const DocsSection = () => {
     return (

app/src/ui/utilities.tsx app/src/ui/home/feature-list.tsxapp/src/ui/utilities.tsx renamed to app/src/ui/home/feature-list.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link"
-import { Separator } from "./separator"
-import { SegmentAnimation } from "./animations/segment"
+import { Separator } from "@/ui/separator"
+import { SegmentAnimation } from "@/ui/motion/segment"
 
-export const UtilitiesSection = () => {
+export const FeatureListSection = () => {
     return (
         <section className="">
             <Separator index={2}>Explore our utilities</Separator>

app/src/ui/hero.tsx app/src/ui/home/hero.tsxapp/src/ui/hero.tsx renamed to app/src/ui/home/hero.tsx

@@ -1,4 +1,4 @@
-import { TextEffect } from "./text-effect"
+import { TextEffect } from "@/ui/motion/text-effect"
 
 export const HeroSection = () => {
     return (

app/src/ui/powered-by.tsx app/src/ui/home/powered-by.tsxapp/src/ui/powered-by.tsx renamed to app/src/ui/home/powered-by.tsx

@@ -1,4 +1,4 @@
-import { Separator } from "./separator"
+import { Separator } from "@/ui/separator"
 
 export const PoweredBySection = () => {
     return (