Merge branch 'develop' into escrow-contract

apps/web/app/css/globals.css

@@ -49,6 +49,7 @@
 		--input: 222 30% 50%;
 		--ring: 99 57.1% 56.1%;
 		--radius: 0.75rem;
+		--skeleton-opacity: 0.3;
 	}
 
 	.dark {
@@ -77,6 +78,7 @@
 		--input: 222 30% 18%;
 		--ring: 99 57.1% 46.1%;
 		--radius: 0.75rem;
+		--skeleton-opacity: 0.2;
 	}
 }
 

apps/web/components/base/alert-dialog.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 
 import { buttonVariants } from '~/components/base/button'
 import useReducedMotion from '~/hooks/use-reduced-motion'
-import { animations } from '~/lib/animations'
+import { animations } from '~/lib/constants/animations'
 import { cn } from '~/lib/utils'
 
 const AlertDialog = AlertDialogPrimitive.Root
@@ -149,14 +149,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
 	AlertDialog,
-	AlertDialogPortal,
-	AlertDialogOverlay,
-	AlertDialogTrigger,
+	AlertDialogAction,
+	AlertDialogCancel,
 	AlertDialogContent,
-	AlertDialogHeader,
+	AlertDialogDescription,
 	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
 	AlertDialogTitle,
-	AlertDialogDescription,
-	AlertDialogAction,
-	AlertDialogCancel,
+	AlertDialogTrigger,
 }

apps/web/components/base/dialog.tsx

@@ -4,7 +4,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
 import * as React from 'react'
 import useReducedMotion from '~/hooks/use-reduced-motion'
-import { animations } from '~/lib/animations'
+import { animations } from '~/lib/constants/animations'
 import { cn } from '~/lib/utils'
 
 const Dialog = DialogPrimitive.Root
@@ -130,13 +130,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
 	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
 	DialogClose,
 	DialogContent,
-	DialogHeader,
+	DialogDescription,
 	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
 	DialogTitle,
-	DialogDescription,
+	DialogTrigger,
 }

apps/web/components/base/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 import useReducedMotion from '~/hooks/use-reduced-motion'
-import { animations } from '~/lib/animations'
+import { animations } from '~/lib/constants/animations'
 
 import { cn } from '~/lib/utils'
 

apps/web/components/base/sheet.tsx

@@ -5,7 +5,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { X } from 'lucide-react'
 import * as React from 'react'
 import useReducedMotion from '~/hooks/use-reduced-motion'
-import { animations } from '~/lib/animations'
+import { animations } from '~/lib/constants/animations'
 import { cn } from '~/lib/utils'
 
 const Sheet = SheetPrimitive.Root

apps/web/components/base/skeleton-text.tsx

@@ -0,0 +1,22 @@
+import type { FC } from 'react'
+import { Skeleton } from '~/components/base/skeleton'
+import { cn } from '~/lib/utils'
+
+interface SkeletonTextProps {
+	width: number[]
+	className?: string
+}
+
+export const SkeletonText: FC<SkeletonTextProps> = ({ width, className }) => {
+	return (
+		<div className="space-y-2">
+			{width.map((w) => (
+				<Skeleton
+					key={w}
+					className={cn('h-4', className)}
+					style={{ width: `${w}%` }}
+				/>
+			))}
+		</div>
+	)
+}

apps/web/components/base/skeleton.tsx

@@ -6,7 +6,10 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
 	return (
 		<div
-			className={cn('animate-pulse rounded-md bg-primary/10', className)}
+			className={cn(
+				'animate-pulse rounded-md bg-primary/[var(--skeleton-opacity)]',
+				className,
+			)}
 			{...props}
 		/>
 	)

apps/web/components/pages/home.tsx

@@ -1,10 +1,21 @@
 import dynamic from 'next/dynamic'
+import {
+	SkeletonCommunity,
+	SkeletonFinalCTA,
+	SkeletonHero,
+	SkeletonHighlightedProjects,
+	SkeletonHowItWorks,
+	SkeletonJoinUs,
+	SkeletonNewUserGuide,
+	SkeletonPlatformOverview,
+	SkeletonUserJourney,
+} from '~/components/sections/home/skeletons'
 
 const Hero = dynamic(
 	() => import('~/components/sections/home/hero').then((mod) => mod.Hero),
 	{
-		ssr: true, // Rendered on the server to enhance initial load and SEO performance
-		loading: () => <p>Loading Hero Section...</p>,
+		ssr: true,
+		loading: SkeletonHero,
 	},
 )
 const UserJourney = dynamic(
@@ -13,7 +24,7 @@ const UserJourney = dynamic(
 			(mod) => mod.UserJourney,
 		),
 	{
-		loading: () => <p>Loading User Journey...</p>,
+		loading: SkeletonUserJourney,
 	},
 )
 const HighlightedProjects = dynamic(
@@ -22,13 +33,13 @@ const HighlightedProjects = dynamic(
 			(mod) => mod.HighlightedProjects,
 		),
 	{
-		loading: () => <p>Loading Highlighted Projects...</p>,
+		loading: SkeletonHighlightedProjects,
 	},
 )
 const JoinUs = dynamic(
 	() => import('~/components/sections/home/join-us').then((mod) => mod.JoinUs),
 	{
-		loading: () => <p>Loading Join Us...</p>,
+		loading: SkeletonJoinUs,
 	},
 )
 const HowItWorks = dynamic(
@@ -37,7 +48,7 @@ const HowItWorks = dynamic(
 			(mod) => mod.HowItWorks,
 		),
 	{
-		loading: () => <p>Loading How It Works...</p>,
+		loading: SkeletonHowItWorks,
 	},
 )
 const NewUserGuide = dynamic(
@@ -46,7 +57,7 @@ const NewUserGuide = dynamic(
 			(mod) => mod.NewUserGuide,
 		),
 	{
-		loading: () => <p>Loading New User Guide...</p>,
+		loading: SkeletonNewUserGuide,
 	},
 )
 const PlatformOverview = dynamic(
@@ -55,21 +66,21 @@ const PlatformOverview = dynamic(
 			(mod) => mod.PlatformOverview,
 		),
 	{
-		loading: () => <p>Loading Platform Overview...</p>,
+		loading: SkeletonPlatformOverview,
 	},
 )
 const Community = dynamic(
 	() =>
 		import('~/components/sections/home/community').then((mod) => mod.Community),
 	{
-		loading: () => <p>Loading Community...</p>,
+		loading: SkeletonCommunity,
 	},
 )
 const FinalCTA = dynamic(
 	() =>
 		import('~/components/sections/home/final-cta').then((mod) => mod.FinalCTA),
 	{
-		loading: () => <p>Loading Final Call-to-Action...</p>,
+		loading: SkeletonFinalCTA,
 	},
 )
 

apps/web/components/sections/home/hero.tsx

@@ -5,7 +5,7 @@ import { motion, useReducedMotion } from 'framer-motion'
 import { useCallback } from 'react'
 import { Badge } from '~/components/base/badge'
 import { Button } from '~/components/base/button'
-import { badgeVariants, staggerChildren } from '~/lib/animations'
+import { badgeVariants, staggerChildren } from '~/lib/constants/animations'
 import { categories } from '~/lib/mock-data/mock-hero-section'
 import type { Category } from '~/lib/types'
 

apps/web/components/sections/home/join-us.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
 import { Button } from '~/components/base/button'
 import { SectionCaption } from '~/components/shared/section-caption'
-import { fadeInUpAnimation } from '~/lib/animations'
+import { fadeInUpAnimation } from '~/lib/constants/animations'
 import { features } from '~/lib/mock-data/mock-join-us-section'
 
 export function JoinUs() {

apps/web/components/sections/home/new-user-guide.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion'
 import { StepCard } from '~/components/shared/steps-card'
-import { fadeInUpVariants } from '~/lib/animations'
+import { fadeInUpVariants } from '~/lib/constants/animations'
 import { steps } from '~/lib/mock-data/mock-new-user-guide'
 
 export function NewUserGuide() {

apps/web/components/sections/home/platform-overview.tsx

@@ -4,7 +4,7 @@ import { motion, useReducedMotion } from 'framer-motion'
 import { Users } from 'lucide-react'
 import { Card, CardContent } from '~/components/base/card'
 import { Web3FeatureCard } from '~/components/shared/web3-feature-card'
-import { fadeInUpAnimation } from '~/lib/animations'
+import { fadeInUpAnimation } from '~/lib/constants/animations'
 import { features, stats } from '~/lib/mock-data/mock-platform-overview'
 
 export function PlatformOverview() {