Skip to content

Commit

Permalink
feat(issue-164): update specialist view of pfr-app web version and re…
Browse files Browse the repository at this point in the history 
…design specialist page

Merge pull request #168 from live-dev999/live-dev999/issue164
  • Loading branch information
@live-dev999
live-dev999 committed Jan 22, 2022
2 parents 8d1bd76 + ec5dc12 commit 9543975
Show file tree
Hide file tree
Showing 11 changed files with 288 additions and 31 deletions.
4 changes: 4 additions & 0 deletions src/WebApps/pfr-app/pfr-app/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
* {
margin:0;
padding:0
}
.logo{
width:180px;
height:180px;
Expand Down
5 changes: 5 additions & 0 deletions src/WebApps/pfr-app/pfr-app/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Trademarks from "./pages/Trademarks";
import TermsOfUse from "./pages/TermsOfUse";
import PrivacyStatement from "./pages/PrivacyStatement";
import SiteMap from "./pages/SiteMap";
import DetailSpecialist from "./pages/DetailSpecialist";

function App() {
return (
Expand All @@ -34,6 +35,10 @@ function App() {
<Specialists/>
<Footer/>
</Route>
<Route path="/detail-specialist">
<DetailSpecialist/>
<Footer/>
</Route>
<Route path="/about">
<About/>
<Footer/>
Expand Down
33 changes: 27 additions & 6 deletions src/WebApps/pfr-app/pfr-app/src/Components/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
import {FaBars, FaSearch, FaShoppingCart, FaUserPlus} from 'react-icons/fa'
import {Link} from "react-router-dom";
import logo from "../pfr-logo.svg";
import React from "react";

const Header = () => {
return (
<header className="flex items-center justify-between py-3">
<header className="flex items-center justify-between py-2 px-4 xl:mx-20">
<div className="flex flex-col justify-between items-center pt-2">
<div className="flex items-left justify-start">
<div>
<img src={logo} className="logo" alt="PF_R Community" style={{height: 60, width: 60}}/>
</div>
<div>
<p className="ml-2 text-2xl text-gray-700 uppercase font-bold">#PF_R Community</p>
<p className="ml-2 text-gray-500 lowercase font-semibold">Community of specialists</p>
</div>
</div>
</div>
{/*<div className="menu-btn flex">*/}
{/* <div className="mx-4">*/}
{/* <FaBars />*/}
Expand Down Expand Up @@ -35,17 +47,26 @@ const Header = () => {
{/* <li>Support</li>*/}
{/* </ul>*/}
{/*</div>*/}
<div>
<ul>
<li>
<div className="flex-col justify-end items-center">
<ul className="flex justify-end items-center mt-2">
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-pink-500">
<Link to="/"> Home</Link>
</li>
<li>
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-indigo-500">
<Link to="/specialists"> Specialists</Link>
</li>
<li>
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-green-500">
<Link to="/about"> About</Link>
</li>
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-orange-700">
<Link to="/about"> Community</Link>
</li>
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-blue-500">
<Link to="/about"> Login</Link>
</li>
<li className="px-2 text-gray-500 cursor-pointer uppercase font-bold hover:text-red-500">
<Link to="/about"> Sign up</Link>
</li>
</ul>
</div>
{/*<div className="cart flex">*/}
Expand Down
120 changes: 106 additions & 14 deletions src/WebApps/pfr-app/pfr-app/src/Components/SpecialistItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,117 @@ import React from 'react';

const SpecialistItem = (props) => {
return (
<div className="flex m-2 bg-white shadow-lg rounded-xl flex-none">
<div className="certificate__content">
<div className="flex items-start space-x-6 p-6 bg-white shadow-lg rounded-xl mt-4">
<div className="flex-none w-48 relative">
<img width="auto" height="300" src={props.specialist.avatar}
className="flex-none rounded-md bg-slate-100"></img>
<div className="text-center m-2">
<path
d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z">
</path>

<div className="p-2">
<img width="auto" height="300" src={props.specialist.avatar} className=" rounded-xl"></img>
<button
className="bg-gradient-to-br from-orange-400 to-pink-600 rounded-b-xl p-4 px-6 font-semibold text-white active:to-pink-400">
Book session
</button>

</div>
<div className="px-4"><strong>{props.specialist.fio}</strong></div>
<div className="px-4 py-2 pb-6">{props.specialist.specialnost}</div>
</div>
<div className="mt-4 text-center">
<ul>
<li className="text-3xl text-orange-300">
* * * * *</li>
</ul>
<strong>Rating</strong>
<p>{props.specialist.ratings.sessions} sessions</p>
</div>

</div>
<div className="flex-col w-1/3">
<div>
<strong className="text-2xl uppercase">{props.specialist.fio}</strong>
{
props.specialist.status == 'online' ?
<p
className="text-green-500 font-bold uppercase">
* {props.specialist.status} *

</p>
:
<p
className="text-orange-300 font-bold uppercase">
* {props.specialist.status} *

</p>
}
<p className="text-gray-400 mt-2">{props.specialist.intro}</p>
</div>
<div className="mt-4">
<strong>
Languages
</strong>
<ul className=" pl-4">
<li>Germany: <strong className="text-pink-300">|||</strong></li>
<li>English: <strong className="text-green-400">||||||</strong></li>
<li>Russian: <strong className="text-cyan-600">|||||||||||</strong></li>
</ul>
</div>
<div className="mt-4">
<strong>Tags</strong>

<ul className="flex justify-center items-center my-4">
<li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r</a></li>
<li className="px-2 text-blue-900 cursor-pointer"><a href="#">#hypnosis</a></li>
<li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r_dub</a></li>
<li className="px-2 text-blue-900 cursor-pointer"><a href="#">#pf_r_base</a></li>
<li></li></ul>
</div>
<div className="mt-4">
<strong>Rates</strong>
<ul className="flex justify-center items-center my-4">
<li className="text-gray-600 px-4">Trial (30 min): <strong>20 USD</strong></li>
<li className="px-4">Hourly Rate from: <strong>30 USD</strong></li>
</ul>
</div>

{/*<div className="post__btn">*/}
{/* <button>Удалить</button>*/}
{/*</div>*/}
<div className="mt-4">
<button
className="bg-gradient-to-br from-green-400 to-cyan-500 rounded-t-xl p-4 px-6 font-semibold text-white active:to-pink-400">
Send Message
</button>
<button
className="bg-gradient-to-br from-purple-500 to-indigo-500 rounded-t-xl p-4 px-6 font-semibold text-white active:to-pink-400">
Add Favorite
</button>
</div>
</div>
<div className="flex-col">
<ul className="flex justify-center items-center my-4">
<li className="cursor-pointer py-2 px-4 text-cyan-600 font-bold border-b-8 ">
Video
</li>
<li className="cursor-pointer py-2 px-4 text-green-400 border-b-8">Intro</li>
<li className="cursor-pointer py-2 px-4 text-gray-500 border-b-8">Calendar</li>
</ul>

{/*<strong>{props.specialist.id}</strong>*/}
<div className="bg-white p-2 text-center mx-auto border">
<iframe width="600" height="340" src="https://www.youtube.com/embed/Ks8csGiEUS8"
title="YouTube video player" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen></iframe>
</div>
</div>
{/*<div className="certificate__content">*/}

{/* <div className="p-2">*/}
{/* <img width="auto" height="300" src={props.specialist.avatar} className=" rounded-xl"></img>*/}

{/* </div>*/}
{/* <div className="px-4"><strong>{props.specialist.fio}</strong></div>*/}
{/* <div className="px-4 py-2 pb-6">{props.specialist.specialnost}</div>*/}
{/*</div>*/}
{/*<div className="flex m-2 bg-white border-2">*/}
{/* <div className="certificate__content">*/}

{/* <div>*/}
{/* <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
{/* Практикующий психолог*/}
Expand All @@ -33,7 +125,7 @@ const SpecialistItem = (props) => {
{/*</div>*/}
{/*<div className="flex m-2 bg-white border-2">*/}
{/* <div className="certificate__content">*/}

{/* <div>*/}
{/* <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
{/* Практикующий психолог*/}
Expand All @@ -46,7 +138,7 @@ const SpecialistItem = (props) => {
{/*</div>*/}
{/*<div className="flex m-2 bg-white border-2">*/}
{/* <div className="certificate__content">*/}

{/* <div>*/}
{/* <img width="auto" height="200" src="https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60"></img>*/}
{/* Практикующий психолог*/}
Expand Down
10 changes: 8 additions & 2 deletions src/WebApps/pfr-app/pfr-app/src/Components/SpecialistList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ import SpecialistItem from "./SpecialistItem";
const SpecialistList = (props) => {

return (

<>
<section>
<h2 className="text-center">{props.title}</h2>
<div className="flex items-center justify-center bg-white m-4">
<div className="flex xl:px-40 xl:pb-20 flex-col justify-center bg-gradient-to-t from-gray-50 bg-gray-100 mb-1">
<div className="flex items-center justify-start">
<h2 className="text-left mt-4 uppercase text-lg text-gray-700 font-semibold">{props.title}</h2>
<p className="mt-4 ml-8 lowercase text-sm text-gray-500 font-semibold">{props.countSpecialists} Specialists</p>
</div>

<p className="text-gray-500 font-semibold">Find the best specialist for you: choose from our experienced specialist online and get the best session.</p>
{props.specialists.map((specialist) =>
<SpecialistItem specialist={specialist} key={specialist.id}/>
)}
Expand Down
68 changes: 68 additions & 0 deletions src/WebApps/pfr-app/pfr-app/src/Data/specialists.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,89 @@
export const specialists = [
{
id: 1, fio: 'Paul Mart',
status: "online",
intro:"Do you want quality service from a certified specialist? Let's chat",
country:{
location : "Russian"
},
language:{
"english": 10,
"russian":5
},
rates:{
trial: 10,
hour: 25
},
ratings: {
sessions: 2293,
value: "5.0"
},
specialnost: 'specialist #PF_R',
avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
},
{
id: 2, fio: 'Marina Oi',
status: "online",
intro:"Certified British TEFL Teacher with over 3 years of experience",
country:{
location : "Russian"
},
language:{
"english": 10,
"russian":5
},
rates:{
trial: 10,
hour: 25
},
ratings: {
sessions: 2293,
value: "5.0"
},
specialnost: 'specialist #PF_R',
avatar: 'https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60'
},
{
id: 3, fio: 'Paul Mart',
status: "online",
intro:"Certified British TEFL Teacher with over 3 years of experience",
country:{
location : "Russian"
},
language:{
"english": 10,
"russian":5
},
rates:{
trial: 10,
hour: 25
},
ratings: {
sessions: 23,
value: "5.0"
},
specialnost: 'specialist #PF_R',
avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
},
{
id: 4, fio: 'Paul Mart',
status: "offline",
intro:"Certified British TEFL Teacher with over 3 years of experience",
country:{
location : "Russian"
},
language:{
"english": 10,
"russian":5
},
rates:{
trial: 10,
hour: 25
},
ratings: {
sessions: 213,
value: "5.0"
},
specialnost: 'specialist #PF_R',
avatar: 'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dXNlciUyMHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=300&q=60'
}
Expand Down
39 changes: 39 additions & 0 deletions src/WebApps/pfr-app/pfr-app/src/pages/DetailSpecialist.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
import Header from "../Components/Header";

const DetailSpecialist = () => {
return (
<div >
<Header />
<div className="flex xl:px-40 xl:pb-20 justify-center bg-gradient-to-t from-gray-50 bg-gray-100 mb-1">
<div className="flex flex-col items-start mt-4 w-2/3">
<div className="flex items-start space-x-6 p-6 bg-white shadow-lg rounded-xl mt-4">
<iframe width="850" height="340" src="https://www.youtube.com/embed/TIqJAHfl9SE"
title="YouTube video player" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen></iframe>
</div>
<div className="flex space-x-6 p-6 bg-white shadow-lg rounded-xl mt-4">
Test
</div>
<div className="flex items-start space-x-6 p-6 bg-white shadow-lg rounded-xl mt-4">
<div>
<iframe width="850" height="340" src="https://www.youtube.com/embed/TIqJAHfl9SE"
title="YouTube video player" frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen></iframe>
</div>
<div>

</div>
</div>
</div>

<div className="flex flex-col items-start space-x-6 p-6 ml-4 bg-white shadow-lg rounded-xl mt-4 w-1/3">
</div>
</div>
</div>
);
};

export default DetailSpecialist;
2 changes: 1 addition & 1 deletion src/WebApps/pfr-app/pfr-app/src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const Home = () => {
{/* на компьютере Mac или Windows.</p>*/}
{/* </blockquote>*/}
{/* <figcaption*/}
{/* className="flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br rounded-b-xl leading-6 font-semibold text-white from-green-400 to-cyan-500">*/}
{/* className="flex items-center space-x-4 p-6 md:px-10 md:py-6 bg-gradient-to-br from-green-400 to-cyan-500 rounded-b-xl leading-6 font-semibold text-white ">*/}

{/* <div className="flex-auto">Скачивайте приложение в магазине приложенией<br/><span*/}
{/* className="text-green-100">*/}
Expand Down
Loading

0 comments on commit 9543975

Please sign in to comment.