From 256c6566adaaf767201c055b9ffab24534a5e1c5 Mon Sep 17 00:00:00 2001
From: Nabil Al-Ashbat <nbl.dev21@gmail.com>
Date: Wed, 29 Nov 2023 11:27:51 +0300
Subject: [PATCH] feat: :sparkles: 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  |  6 ++++++
 src/app/about/page.tsx | 11 +++++++++++
 src/app/page.tsx       | 10 ++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 src/app/about/page.tsx

diff --git a/cypress/e2e/app.cy.ts b/cypress/e2e/app.cy.ts
index c2c1f1d..f166e35 100644
--- a/cypress/e2e/app.cy.ts
+++ b/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')
 	})
 })
 
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..636fadb
--- /dev/null
+++ b/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>
+	)
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f1ab86a..db0c6bc 100644
--- a/src/app/page.tsx
+++ b/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'