diff --git a/packages/react-app/public/profile.jpg b/packages/react-app/public/profile.jpg
new file mode 100644
index 0000000..3716955
Binary files /dev/null and b/packages/react-app/public/profile.jpg differ
diff --git a/packages/react-app/public/register-association.html b/packages/react-app/public/register-association.html
new file mode 100644
index 0000000..532824c
--- /dev/null
+++ b/packages/react-app/public/register-association.html
@@ -0,0 +1,12 @@
+
+
+
+ Register page
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/react-app/public/register-user.html b/packages/react-app/public/register-user.html
new file mode 100644
index 0000000..7bda89a
--- /dev/null
+++ b/packages/react-app/public/register-user.html
@@ -0,0 +1,11 @@
+
+
+
+ Register page
+
+
+
+
+
+
+
diff --git a/packages/react-app/src/association-card.css b/packages/react-app/src/association-card.css
new file mode 100644
index 0000000..0e9aae2
--- /dev/null
+++ b/packages/react-app/src/association-card.css
@@ -0,0 +1,175 @@
+body{
+ font-family: 'Hind Guntur', sans-serif;
+ color: #054231;
+ display: flex;
+ justify-content: center;
+ background: #49afa8;
+ background-image: url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf.png?raw=true');
+ background-repeat: no-repeat, no-repeat;
+ background-position: 200% -40%;
+ background-size: 80%;
+}
+
+.card{
+ width: 310px;
+ height: 750px;
+ padding: 15px;
+ margin-top: 40px;
+ border-radius: 25px;
+ display: flex;
+ justify-content: center;
+ box-shadow: 15px 10px 25px 0px #3fa1a9;
+ background: #fff;
+ background-image: url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf2.png?raw=true'), url('https://github.com/OlgaKoplik/CodePen/blob/master/leaf.png?raw=true');
+ background-repeat: no-repeat, no-repeat;
+ background-position: 120% -5%, 200% -40%;
+ background-size: 40%, 80%;
+ animation: open .5s;
+}
+@keyframes open {
+ 0% {background-position: 166% -25%, 220% -69%;}
+ 100%{background-position: 120% -5%, 200% -40%;}
+}
+form{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.field{
+ margin: 5px;
+ display: flex;
+ flex-direction: column;
+ }
+input[type="file"] {
+ display: none;
+}
+
+.custom-file-upload {
+ border-radius: 50%;
+ display: inline-block;
+ position: relative;
+ padding: 6px;
+ cursor: pointer;
+ background: linear-gradient(270deg, #3fa1a9, #79f1a4);
+ margin-bottom: 25px;
+}
+
+.img-wrap{
+ position: relative;
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ border-radius: 50%;
+}
+.img-upload:before{
+ content: "\f093";
+ font-size: 90px;
+ position: absolute;
+ padding-top: 80px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ color: #63d3a6;
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ opacity: 0;
+ transition: .5s ease;
+ background-color: #fff;
+}
+.img-upload:hover:before{
+ opacity: 1;
+}
+img {
+ width: auto;
+ height: 100%;
+}
+
+label{
+ text-transform: uppercase;
+ font-weight: 700;
+ color: #676767;
+}
+
+input{
+ border-radius: 15px;
+ border: 1px solid #b7b7b7;
+ padding: 5px 5px 5px 10px;
+ font-size: 18px;
+ transition: 0.2s;
+}
+input:focus{
+ outline: none;
+ border: 1px solid #64d488;
+}
+input::placeholder{
+ color: #bebebe;
+}
+.name{
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: 700;
+ color: #676767;
+ max-width: 220px;
+ overflow-wrap: break-word;
+}
+.status{
+ text-align: center;
+ max-width: 220px;
+ overflow-wrap: break-word;
+}
+button{
+ position: relative;
+ color: #054231;
+ letter-spacing: 1px;
+ margin: 20px;
+ font-size: 18px;
+ padding: 10px;
+ text-align: center;
+ transition: 0.5s;
+ border-radius: 10px;
+ cursor: pointer;
+ border-radius: 25px;
+ border: none;
+ background: #64d488;
+}
+.save{
+ font-weight: 600;
+ left: -20px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ width: 20px;
+ box-shadow: 20px 0px 40px 0px #63d3a6;
+}
+.edit{
+ color: #fff;
+ width: 180px;
+}
+button:hover{
+ left: 0;
+ color: #fff;
+ width: 180px;
+ box-shadow: 0px 0px 20px 0px #63d3a6;
+}
+button:focus{
+ outline: none;
+}
+.lds-ripple {
+ display: inline-block;
+ position: relative;
+ width: 64px;
+ height: 64px;
+}
+.lds-ripple div {
+ position: absolute;
+ border: 4px solid #fff;
+ opacity: 1;
+ border-radius: 50%;
+ animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+ animation-delay: -0.5s;
+}
\ No newline at end of file
diff --git a/packages/react-app/src/components/association-card.jsx b/packages/react-app/src/components/association-card.jsx
new file mode 100644
index 0000000..428a067
--- /dev/null
+++ b/packages/react-app/src/components/association-card.jsx
@@ -0,0 +1,248 @@
+const ImgUpload =({
+ onChange,
+ src
+})=>
+
+
+
+const Name =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+
+const Status =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+
+const Website =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+const Address =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+ const Legaladdress =({
+ onChange,
+ value
+ })=>
+
+
+
+
+
+
+const Profile =({
+ onSubmit,
+ src,
+ name,
+ website,
+ address,
+ Legaladdress,
+ status,
+})=>
+
+
+
+const Edit =({
+ onSubmit,
+ children,
+})=>
+
+
+
+
+class CardProfile extends React.Component {
+ state = {
+ file: '',
+ //imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true',
+ imagePreviewUrl: '../../public/profile.jpg',
+ name:'',
+ status:'',
+ active: 'edit'
+ }
+
+ photoUpload = e =>{
+ e.preventDefault();
+ const reader = new FileReader();
+ const file = e.target.files[0];
+ reader.onloadend = () => {
+ this.setState({
+ file: file,
+ imagePreviewUrl: reader.result
+ });
+ }
+ reader.readAsDataURL(file);
+ }
+
+ editName = e =>{
+ const name = e.target.value;
+ this.setState({
+ name,
+ });
+ }
+
+ editWebsite = e => {
+ const website = e.target.value;
+ this.setState({
+ website,
+ });
+ }
+
+ editAddress = e => {
+ const address = e.target.value;
+ this.setState({
+ address,
+ });
+ }
+
+ editLegalAddress = e =>{
+ const legaladdress = e.target.value;
+ this.setState({
+ legaladdress,
+ });
+ }
+
+ editStatus = e => {
+ const status = e.target.value;
+ this.setState({
+ status,
+ });
+ }
+
+ handleSubmit= e =>{
+ e.preventDefault();
+ let activeP = this.state.active === 'edit' ? 'profile' : 'edit';
+ this.setState({
+ active: activeP,
+ })
+ }
+
+ render() {
+ const {imagePreviewUrl,
+ name,
+ website,
+ address,
+ legaladdress,
+ status,
+ active} = this.state;
+ return (
+
+ {(active === 'edit')?(
+
+
+
+
+
+
+
+
+ ):(
+
)}
+
+
+
+
+
+
+
+const Status =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+
+const Website =({
+ onChange,
+ value
+})=>
+
+
+
+
+
+
+const Profile =({
+ onSubmit,
+ src,
+ name,
+ status,
+ website,
+})=>
+
+
+
+const Edit =({
+ onSubmit,
+ children,
+})=>
+
+
+
+
+class CardProfile extends React.Component {
+ state = {
+ file: '',
+ //imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true',
+ imagePreviewUrl: '../../public/profile.jpg',
+ name:'',
+ status:'',
+ active: 'edit'
+ }
+
+ photoUpload = e =>{
+ e.preventDefault();
+ const reader = new FileReader();
+ const file = e.target.files[0];
+ reader.onloadend = () => {
+ this.setState({
+ file: file,
+ imagePreviewUrl: reader.result
+ });
+ }
+ reader.readAsDataURL(file);
+ }
+
+ editName = e =>{
+ const name = e.target.value;
+ this.setState({
+ name,
+ });
+ }
+
+ editWebsite = e => {
+ const website = e.target.value;
+ this.setState({
+ website,
+ });
+ }
+
+ editStatus = e => {
+ const status = e.target.value;
+ this.setState({
+ status,
+ });
+ }
+
+ handleSubmit= e =>{
+ e.preventDefault();
+ let activeP = this.state.active === 'edit' ? 'profile' : 'edit';
+ this.setState({
+ active: activeP,
+ })
+ }
+
+ render() {
+ const {imagePreviewUrl,
+ name,
+ website,
+ status,
+ active} = this.state;
+ return (
+
+ {(active === 'edit')?(
+
+
+
+
+
+
+ ):(
+
)}
+
+