Merge branch 'issue/13-create-user-card' into 'develop'

Issue #13: CREATE user card

See merge request !2

src/app/perfil/components/UserCard.js

+"use client"
+
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CheckBoxOutlineBlankSharpIcon from '@mui/icons-material/CheckBoxOutlineBlankSharp';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Grid from '@mui/material/Grid';
+
+
+export default function UserCard() {
+    const matches = useMediaQuery('(min-width:600px)')
+
+    return (
+        <div className='flex justify-center pt-[10%]'>
+            <Card className='rounded-md min-w-[200px] min-h-[170px] pr-5 ' >
+                <Grid container>
+
+
+                    {/* ao mudar para imagem manter proporções parecidas */}
+                    <Grid sm={4} xs={12}>
+                        <CheckBoxOutlineBlankSharpIcon className=' bg-[#00bacc] text-[#00bacc] rounded-full m-5 mt-[20%] min-w-[100px] min-h-[100px] ' />
+                    </Grid>
+                    <Grid sm={8} xs={12}>
+
+                        <div className=' pt-5 '>
+
+                            <h2 className='max-[600px]:flex max-[600px]:justify-center text-gray-500 font-bold text-2xl'>Nome do Usuário</h2>
+                            <p className='max-[600px]:flex max-[600px]:justify-center text-[#00bacc] text-sm'>@username</p>
+                            <p className="max-[600px]:flex max-[600px]:justify-center text-gray-500">Professor na E. E. Ludovino Ferreira</p>
+                            <p className="max-[600px]:flex max-[600px]:justify-center text-sm text-gray-400">Marabá(PA)</p>
+
+                            <div className='max-[600px]:flex max-[600px]:justify-center'>
+                                <p className='inline text-[#00bacc] font-bold'>59</p>
+                                <p className='inline pl-1 text-sm text-gray-500'>Seguindo</p>
+                                <p className='inline pl-2 text-[#00bacc] font-bold'>59</p>
+                                <p className='inline pl-1 text-sm text-gray-500'>Seguidores</p>
+                                <p className='inline pl-2 text-[#00bacc] font-bold'>59</p>
+                                <p className='inline pl-1 text-sm text-gray-500'>Grupos</p>
+                            </div>
+                        </div>
+                    </Grid>
+                </Grid>
+            </Card>
+        </div>
+    );
+}
\ No newline at end of file

src/app/perfil/page.js

+import UserCard from "./components/UserCard"
+
+export default function Perfil(){
+    return (
+        <UserCard />
+    );
+}
\ No newline at end of file