Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes: Improve UI of the Cards #16

Closed
wants to merge 2 commits into from
Closed

Fixes: Improve UI of the Cards #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ae6092
Added styles for Card Component
warmachine028 Oct 6, 2022
62a2f06
Added Fixes for #11
warmachine028 Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 62 additions & 97 deletions src/pages/DashboardContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import "../styles/CardStyles.css"
import FeelingBlue from "../Vectors/Feeling Blue-bro.svg";
import TrueFriends from "../Vectors/Solidarity-cuate.png";
// import Conversation from "../Vectors/Conversation-pana.png";
Expand Down Expand Up @@ -282,103 +283,67 @@ function DashboardContent(props) {
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 grid-rows-3 lg:grid-rows-1 gap-4 mb-20">
<div className="bg-white rounded-lg flex flex-col container px-5 py-8 mx-auto items-center">
<h4 className="text-2xl font-semibold text-tertiary hover:underline cursor-pointer">
OUR THERAPISTS
</h4>
<br />
<p className="text-lg text-center text-gray-700">
Together, we will find the life-balance you have been looking for.
We are passionate about helping others improve their mental and
emotional wellness. We will help you develop coping skills and tools
so you can change your thoughts, emotions, and behaviors.
</p>
<br />
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-10 w-10 mt-2 text-tertiary animate-bounce"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg flex flex-col container px-5 py-8 mx-auto items-center">
<h4
className="text-2xl font-semibold text-tertiary hover:underline text-center cursor-pointer"
onClick={()=>handleTab(6)}
>
PEN DOWN YOUR THOUGHTS
</h4>
<br />
<p className="text-lg text-center text-gray-700">
Writing about your struggles and your share of ups and down will
not only give you perspective but also inspire and motivate others
out there that may be going through the same struggles day in and
day out without knowing that it will get better.
</p>
<br />
<svg
onClick={()=>handleTab(6)}
xmlns="http://www.w3.org/2000/svg"
className="h-10 w-10 mt-2 text-tertiary animate-bounce"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
<div className="bg-white rounded-lg">
<div className="bg-white rounded-lg flex flex-col container px-5 py-8 mx-auto items-center">
<h4
className="text-2xl font-semibold text-tertiary hover:underline text-center cursor-pointer"
onClick={()=>handleTab(3)}
>
CHECK YOUR EMOTIONAL CURVE
</h4>
<br />
<p className="text-lg text-center text-gray-700">
Emotional Curve is our ability to recognize, understand, and
regulate our emotions and to respond to those emotions in
constructive ways that allow us to communicate, empathize with
others, and overcome challenges. In other words, it is being tuned
into our emotional world and honing the ability to manage our
emotions before our emotions manage us.
</p>
<br />
<svg
onClick={()=>handleTab(3)}
xmlns="http://www.w3.org/2000/svg"
className="h-10 w-10 mt-2 text-tertiary animate-bounce"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
</div>
</div>
<div className="wrapper">
<div className="card">
<img src={Chat} alt="Our Therapists" />
<div className="info rounded-lg flex flex-col container px-5 py-8 mx-auto items-center top-0 left-0 w-100%">
<h4 className="text-2xl font-semibold text-tertiary hover:underline cursor-pointer">OUR THERAPISTS</h4>
<br />
<p className="text-lg text-left text-black">
Together, we will find the life-balance you have been looking for. We are passionate about helping others improve their mental and emotional wellness. We will help you
develop coping skills and tools so you can change your thoughts, emotions, and behaviors.
</p>
<br />
<button href="/userdashboard" className="btn bg-tertiary flex justify-center items-center gap-2 h-11">
Read More
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 mt-2 text-white animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
<div className="card">
<img src={CassettePlayer} alt="Pen Down Your Thoughts" />
<div className="info rounded-lg flex flex-col container px-5 py-8 mx-auto items-center top-0 left-0 w-100%">
<h4 className="text-2xl font-semibold text-tertiary hover:underline cursor-pointer" onClick={() => handleTab(6)}>
PEN DOWN YOUR THOUGHTS
</h4>
<br />
<p className="text-lg text-left text-black">
Writing about your struggles and your share of ups and down will not only give you perspective but also inspire and motivate others out there that may be going through the
same struggles day in and day out without knowing that it will get better.
</p>
<br />
<button href="/userdashboard" className="btn bg-tertiary flex justify-center items-center gap-2 h-11 text-white" onClick={() => handleTab(6)}>
Read More
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 mt-2 text-white animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
<div className="card">
<img src={TrueFriends} alt="Check your emotional curve" />
<div className="info rounded-lg flex flex-col container px-5 py-8 mx-auto items-center top-0 left-0 w-100%">
<h4 className="text-2xl font-semibold text-tertiary hover:underline cursor-pointer" onClick={() => handleTab(3)}>
CHECK YOUR EMOTIONAL CURVE
</h4>
<br />
<p className="text-lg text-left text-black">
Emotional Curve is our ability to recognize, understand, and regulate our emotions and to respond to those emotions in constructive ways that allow us to communicate,
empathize with others, and overcome challenges. In other words, it is being tuned into our emotional world and honing the ability to manage our emotions before our emotions
manage us.
</p>
<br />
<button href="/userdashboard" className="btn bg-tertiary flex justify-center items-center gap-2 h-11" onClick={() => handleTab(3)}>
Read More
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 mt-2 text-white animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
);
}
Expand Down
107 changes: 107 additions & 0 deletions src/styles/CardStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
.wrapper {
display: flex;
justify-content: space-between;
}

.card {
border-radius: 10px;
width: 531px;
height: 360px;
padding: 2rem 1rem;
background: #fff;
position: relative;
align-items: flex-end;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
transition: 0.5s ease-in-out;
}

.card:hover {
transform: translateY(-20px);
}

.card:before {
border-radius: 10px;
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
/* background: linear-gradient(to bottom, rgba(0, 176, 155, 0.5), rgba(150, 201, 61, 1)); */
background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(0, 176, 155, 0.5));
z-index: 2;
transition: 0.5s all;
opacity: 0;
}

.card:hover:before {
opacity: 1;
}

.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.card .info {
position: absolute;
z-index: 3;
color: #fff;
opacity: 0;
bottom: 25px;
transform: translateY(30px);
transition: 0.5s all;

}

.card:hover .info {
opacity: 1;
transform: translateY(0px);
}

.card .info h1 {
margin: 0;
}

.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
margin-bottom: 20px;
}

.card .info .btn {
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease-in-out;
}

.card .info .btn:hover {
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 1300px) {
.wrapper {
flex-direction: column;
align-items: center;
gap: 25px;
}

.card {
width: 100%;
height: 510px;
}

.card h4 {
text-align: center;
}
}