✨ Design of profile page

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 next-env.d.ts
 
 .env
+
+# Android build
+android/

app/account/page.jsx

@@ -0,0 +1,113 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
+import Link from 'next/link';
+import SlotCounter from 'react-slot-counter';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import SettingsIcon from '@/assets/SettingsIcon';
+import ArrowRightIcon from '@/assets/ArrowRightIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Account = () => {
+	return (
+		<div className='accountContainer'>
+			<div className='header'>
+				<div className='infosContainer'>
+					<p className='username'>Un Épicier</p>
+					<p className='sinceDate'>Créé le: 02/09/2024</p>
+				</div>
+
+				<Link
+					href={'/settings'}
+					className='settingsButton'
+				>
+					<SettingsIcon />
+				</Link>
+			</div>
+			<div className='separator' />
+			<div className='statistics'>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Followers</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Suivis</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par semaine</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par mois</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves par an</p>
+				</div>
+				<div className='statistic'>
+					<SlotCounter
+						value={'00'}
+						startValue={'00'}
+						startValueOnce
+						dummyCharacterCount={10}
+						direction='top-bottom'
+						containerClassName='slotCounter'
+					/>
+					<p className='statName'>Loves total</p>
+				</div>
+			</div>
+			<div className='buttonsContainer'>
+				<button className='button'>
+					Followers <ArrowRightIcon />
+				</button>
+				<button className='button'>
+					Suivis <ArrowRightIcon />
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default Account;

app/account/styles.scss

@@ -0,0 +1,111 @@
+.accountContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	& > .header {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		align-items: center;
+		gap: 20px;
+		padding: 20px;
+		width: 100%;
+
+		& > .infosContainer {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+
+			& > .username {
+				font-size: 1.1rem;
+				color: #ffffff;
+			}
+
+			& > .sinceDate {
+				font-size: 0.9rem;
+				font-weight: 300;
+				color: #eee;
+			}
+		}
+
+		& > .settingsButton {
+			$size: 25px;
+			width: $size;
+			height: $size;
+			color: #ffffff;
+		}
+	}
+
+	& > .separator {
+		display: block;
+		width: 90%;
+		height: 1px;
+		background-color: rgb(254, 254, 250);
+		background: linear-gradient(
+			90deg,
+			rgba(254, 254, 250, 0) 0%,
+			rgba(254, 254, 250, 1) 10%,
+			rgba(254, 254, 250, 1) 90%,
+			rgba(254, 254, 250, 0) 100%
+		);
+	}
+
+	& > .statistics {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+		gap: 20px;
+		justify-items: center;
+		align-items: center;
+		padding: 40px 20px;
+		width: 100%;
+
+		& > .statistic {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			font-weight: 300;
+			color: #ffffff;
+
+			& > .slotCounter {
+				font-size: 3rem;
+			}
+
+			& > .statName {
+				color: #eee;
+			}
+		}
+	}
+
+	& > .buttonsContainer {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 2px;
+		width: 100%;
+		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+
+		& > .button {
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			gap: 20px;
+			padding: 15px 20px;
+			border: none;
+			background-color: #d94253;
+			font-size: 1rem;
+			color: #ffffff;
+			filter: brightness(1.1);
+			transition: filter 0.3s ease;
+
+			&:hover {
+				filter: brightness(1.3);
+			}
+
+			& > svg {
+				width: 1.2em;
+			}
+		}
+	}
+}

assets/ArrowRightIcon.jsx

@@ -0,0 +1,20 @@
+const ArrowRightIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='48'
+				d='M184 112l144 144-144 144'
+			/>
+		</svg>
+	);
+};
+
+export default ArrowRightIcon;

assets/SettingsIcon.jsx

@@ -0,0 +1,20 @@
+const SettingsIcon = (props) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default SettingsIcon;

capacitor.config.ts

@@ -0,0 +1,13 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+	appId: 'fr.lovemap.app',
+	appName: 'Lovemap ❤️',
+	webDir: 'out',
+	server: {
+		androidScheme: 'https',
+	},
+	backgroundColor: '#d94253',
+};
+
+export default config;

components/Navbar/config.js

@@ -20,7 +20,7 @@ const config = [
 		icon: PeopleIcon,
 	},
 	{
-		title: 'Compte',
+		title: 'Profil',
 		link: '/account',
 		icon: AccountIcon,
 	},

next.config.mjs

@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+	output: 'export',
 	env: {
 		MAPBOX_TOKEN: process.env.MAPBOX_TOKEN,
 	},

package.json

@@ -9,12 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
     "deck.gl": "^9.0.28",
     "mapbox-gl": "^3.6.0",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18",
-    "react-map-gl": "^7.1.7"
+    "react-map-gl": "^7.1.7",
+    "react-slot-counter": "^3.0.1"
   },
   "devDependencies": {
     "eslint": "^8",