feat: ✨ update cypress tests and add about page

Changes include:

- cypress/e2e/app.cy.ts: Update Cypress end-to-end tests
- src/app/about/page.tsx: Add new About page
- src/app/page.tsx: Modify existing page

This commit Updates Cypress tests and adds About page for e2e test simulation.

cypress/e2e/app.cy.ts

@@ -16,6 +16,12 @@ describe('Navigation', () => {
 
 		// The new page should contain an h1 with "About page"
 		cy.get('h1').contains('About Page')
+
+		// Go back to home page
+		cy.go('back')
+
+		// The url should be "/"
+		cy.url().should('not.include', '/about')
 	})
 })
 

src/app/about/page.tsx

@@ -0,0 +1,11 @@
+import AboutComponent from '@/components/about/about-component'
+
+export default function About() {
+	return (
+		<div className='flex h-screen min-h-screen flex-col items-center justify-center p-2'>
+			<div className='flex flex-1 flex-col items-center justify-center p-20'>
+				<AboutComponent />
+			</div>
+		</div>
+	)
+}

src/app/page.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import Link from 'next/link'
 
 export default function Home() {
 	return (
@@ -28,6 +29,15 @@ export default function Home() {
 				</div>
 			</div>
 
+			<div className='m-4'>
+				<Link
+					href='/about'
+					className='border-b-2 border-blue-500 text-2xl text-blue-500 transition duration-200 hover:text-blue-700'
+				>
+					About
+				</Link>
+			</div>
+
 			<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
 				<Image
 					className='relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert'