👍 fix(animation): adding animation and prune packages

.env.example

@@ -6,5 +6,3 @@ NEXT_PUBLIC_GOOGLE_VERIFICATION =
 
 # POSTHOG SETTINGS
 NEXT_PUBLIC_POSTHOG_KEY =
-NEXT_PUBLIC_POSTHOG_HOST =
-NEXT_PUBLIC_POSTHOG_UI_HOST =

CHANGELOG.md

@@ -3,15 +3,17 @@
 ## [v2.0.0](https://github.com/brook-code-theme/official-website/releases/tag/v2.0.0) - 2024-11-29 13:37:07
 
 ## What's Changed
-* Add multiple pages by @nyomansunima in https://github.com/brook-code-theme/official-website/pull/5
+
+- Add multiple pages by @nyomansunima in https://github.com/brook-code-theme/official-website/pull/5
 
 ## New Contributors
-* @nyomansunima made their first contribution in https://github.com/brook-code-theme/official-website/pull/5
+
+- @nyomansunima made their first contribution in https://github.com/brook-code-theme/official-website/pull/5
 
 **Full Changelog**: https://github.com/brook-code-theme/official-website/compare/v1.0.0...v2.0.0
 
 ## [v1.0.0](https://github.com/brook-code-theme/official-website/releases/tag/v1.0.0) - 2024-11-25 16:11:43
 
 **Full Changelog**: https://github.com/brook-code-theme/official-website/commits/v1.0.0
 
-\* *This CHANGELOG was automatically generated by [auto-generate-changelog](https://github.com/BobAnkh/auto-generate-changelog)*
+\* _This CHANGELOG was automatically generated by [auto-generate-changelog](https://github.com/BobAnkh/auto-generate-changelog)_

package.json

@@ -1,6 +1,5 @@
 {
   "name": "website",
-  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
@@ -14,27 +13,18 @@
   },
   "dependencies": {
     "@flaticon/flaticon-uicons": "^3.3.1",
-    "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",
-    "@tanstack/react-query": "^5.61.3",
-    "@tanstack/react-query-devtools": "^5.61.3",
-    "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.17",
+    "dayjs": "^1.11.13",
     "lenis": "^1.1.16",
+    "motion": "^11.13.3",
     "next": "15.0.4",
     "next-themes": "^0.4.3",
-    "npm": "^10.9.1",
-    "plaiceholder": "^3.0.0",
     "posthog-js": "^1.188.0",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0",
-    "react-hook-form": "^7.53.2",
-    "zod": "^3.23.8"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.9",

src/app/(landing)/page.tsx

@@ -8,7 +8,7 @@ import {
   PricingSection,
   TestimonialSection,
 } from '@features/landing'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -17,13 +17,13 @@ export const metadata: Metadata = {
   description:
     'The best clean code editor theme that combine simplicity and clean look',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',

src/app/changelog/page.tsx

@@ -1,5 +1,5 @@
 import { ChangelogSection } from '@features/changelog'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -8,13 +8,13 @@ export const metadata: Metadata = {
   description:
     "See what's new in the progress, we always ship and fix in a weeks",
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: "What's new",
     description:
       "See what's new in the progress, we always ship and fix in a weeks",
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: "What's new",
     description:
       "See what's new in the progress, we always ship and fix in a weeks",

src/app/docs/page.tsx

@@ -1,4 +1,4 @@
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import * as React from 'react'
 
@@ -7,13 +7,13 @@ export const metadata: Metadata = {
   description:
     'Read the docs to find the tips and tricks to get started with brook code theme',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Docs',
     description:
       'Read the docs to find the tips and tricks to get started with brook code theme',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Docs',
     description:
       'Read the docs to find the tips and tricks to get started with brook code theme',

src/app/global-error.tsx

@@ -1,9 +1,10 @@
 'use client'
+
 import * as React from 'react'
 import '@shared/styles/globals.css'
-import { Button } from '@shared/components/ui/button'
-import { ThemeProvider } from '@shared/providers/theme-provider'
-import * as fonts from '@shared/fonts'
+import { Button } from '@shared/components'
+import { ThemeProvider } from '@shared/providers'
+import { fonts } from '@shared/fonts'
 
 export default function GlobalError({
   reset,

src/app/layout.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react'
 import type { Metadata } from 'next'
 import '@shared/styles/globals.css'
-import * as fonts from '@shared/fonts'
-import config from '@shared/libs/config'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
-import { ThemeProvider } from '@shared/providers/theme-provider'
-import { QueryProvider } from '@shared/providers/query-provider'
-import { Sonner } from '@shared/components/ui/sonner'
-import { PosthogProvider } from '@shared/providers/posthog-provider'
-import { Header } from '@shared/components/common/header'
-import { Footer } from '@shared/components/common/footer'
-import { AnimationProvider } from '@shared/providers/animation-provider'
+import { fonts } from '@shared/fonts'
+import { config, sharedMetadata } from '@shared/libs'
+import {
+  PosthogProvider,
+  AnimationProvider,
+  ThemeProvider,
+} from '@shared/providers'
+import { Header, Sonner, Footer } from '@shared/components'
 
 interface RootLayoutProps {
   children: React.ReactNode
@@ -39,13 +37,13 @@ export const metadata: Metadata = {
   publisher: 'Nyoman Sunima',
   creator: 'Nyoman Sunima',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Brook Code Theme',
     description:
       'The best clean code editor theme that combine simplicity and clean look',
@@ -73,14 +71,10 @@ export default function RootLayout({
               defaultTheme="system"
               disableTransitionOnChange
             >
-              <QueryProvider>
-                <>
-                  <Header />
-                  {children}
-                  <Footer />
-                  <Sonner />
-                </>
-              </QueryProvider>
+              <Header />
+              {children}
+              <Footer />
+              <Sonner />
             </ThemeProvider>
           </body>
         </AnimationProvider>

src/app/not-found.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@shared/components/ui/button'
+import { Button } from '@shared/components'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'

src/app/privacy/page.tsx

@@ -1,5 +1,5 @@
-import { ArticleContent } from '@shared/components/common/content'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { ArticleContent } from '@shared/components'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'
@@ -8,12 +8,12 @@ export const metadata: Metadata = {
   title: 'Privacy policy',
   description: 'Read the privacy and policy',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Privacy policy',
     description: 'Read the privacy and policy',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Privacy policy',
     description: 'Read the privacy and policy',
   },

src/app/template.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { PageTransition } from '@shared/components/common/transition'
+import { PageTransition } from '@shared/components'
 
 interface RootTemplateProps {
   children: React.ReactNode

src/app/terms/page.tsx

@@ -1,5 +1,5 @@
-import { ArticleContent } from '@shared/components/common/content'
-import * as defaultMetadata from '@shared/libs/shared-metadata'
+import { ArticleContent } from '@shared/components'
+import { sharedMetadata } from '@shared/libs'
 import { Metadata } from 'next'
 import Link from 'next/link'
 import * as React from 'react'
@@ -8,12 +8,12 @@ export const metadata: Metadata = {
   title: 'Terms of use',
   description: 'Read the terms of use',
   openGraph: {
-    ...defaultMetadata.openGraph,
+    ...sharedMetadata.openGraph,
     title: 'Terms of use',
     description: 'Read the terms of use',
   },
   twitter: {
-    ...defaultMetadata.twitter,
+    ...sharedMetadata.twitter,
     title: 'Terms of use',
     description: 'Read the terms of use',
   },

src/features/changelog/changelog-item.tsx

@@ -1,6 +1,11 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
+import { motion } from 'motion/react'
+
+const MotionLink = motion.create(Link)
 
 export interface ChangelogData {
   title: string
@@ -20,10 +25,14 @@ export function ChangelogItem({
   const { title, date, image, description, url } = data
 
   return (
-    <Link
+    <MotionLink
+      initial={{ opacity: 0, y: 200, scale: 0.98 }}
+      whileInView={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+      viewport={{ once: true, margin: '-20% 0px' }}
       href={url}
       target="_blank"
-      className="flex flex-col gap-4 bg-surface border border-border rounded-2xl p-4 transition-all duration-300 hover:-translate-y-1 group"
+      className="flex flex-col gap-4 bg-surface border border-border rounded-2xl p-4 group"
     >
       <div className="flex flex-col tablet:flex-row gap-2 tablet:items-center justify-between">
         <span className="font-medium">{title}</span>
@@ -39,6 +48,6 @@ export function ChangelogItem({
       <p className="text-sm text-foreground/80 !leading-relaxed">
         {description}
       </p>
-    </Link>
+    </MotionLink>
   )
 }

src/features/changelog/changelog-section.tsx

@@ -1,4 +1,4 @@
-import { SectionLabel } from '@shared/components/common/section-label'
+import { SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { ChangelogList } from './changelog-list'
 

src/features/landing/about/about-section.tsx

@@ -1,11 +1,20 @@
-import { SectionLabel } from '@shared/components/common/section-label'
+'use client'
+
+import { SectionLabel } from '@shared/components'
 import * as React from 'react'
 import { AboutImage } from './about-image'
+import { motion } from 'motion/react'
 
 export function AboutSection(): React.ReactElement {
   return (
     <section className="flex py-20 tablet:py-36 container mx-auto px-5 tablet:px-0">
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>About</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -20,7 +29,7 @@ export function AboutSection(): React.ReactElement {
         <div className="flex justify-center items-center mt-20 tablet:mt-36 w-full tablet:w-9/12">
           <AboutImage />
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }

src/features/landing/cta/cta-section.tsx

@@ -1,15 +1,23 @@
-import { SectionLabel } from '@shared/components/common/section-label'
-import { Button } from '@shared/components/ui/button'
+'use client'
+
+import { SectionLabel, Button } from '@shared/components'
 import Link from 'next/link'
 import * as React from 'react'
+import { motion } from 'motion/react'
 
 export function CTASection(): React.ReactElement {
   return (
     <section
       className="flex py-20 tablet:py-36 container mx-auto px-5 tablet:px-0"
       id="get-started"
     >
-      <div className="flex flex-col items-center mx-auto w-full">
+      <motion.div
+        initial={{ opacity: 0, y: 200, scale: 0.98 }}
+        whileInView={{ opacity: 1, y: 0, scale: 1 }}
+        transition={{ type: 'spring', duration: 1.2, delay: 0.2 }}
+        viewport={{ once: true, margin: '-20% 0px' }}
+        className="flex flex-col items-center mx-auto w-full"
+      >
         <SectionLabel>Get Started</SectionLabel>
 
         <h2 className="text-3xl tablet:text-5xl text-foreground font-medium !leading-tight text-balance text-center mt-8 tablet:w-7/12">
@@ -53,7 +61,7 @@ export function CTASection(): React.ReactElement {
             Syntax highlight (coming soon)
           </Button>
         </div>
-      </div>
+      </motion.div>
     </section>
   )
 }

src/features/landing/faqs/faq-item.tsx

@@ -2,7 +2,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@shared/components/ui/accordion'
+} from '@shared/components'
 import * as React from 'react'
 
 export interface FAQData {