Skip to content

Commit

Permalink
Merge pull request #3 from SamiSpera/emily
Browse files Browse the repository at this point in the history 
Emily
  • Loading branch information
@SamiSpera
SamiSpera authored Sep 28, 2021
2 parents 9d06dfb + cdeaecc commit 3c718ed
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 60 deletions.
19 changes: 12 additions & 7 deletions components/HeaderNav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function HeaderNav() {
<div className='product-dropdown' onMouseLeave={handleProductOnHover}>
<Link href='/provider' >
<div className='box'>
<h4><img src='/images/surgeon-users.png' />Providers &gt;</h4>
<h4><img src='/images/surgeon-users.png' />Providers <img className='chevron-img' src='/images/chevron.png' /></h4>
<ul>
<li>Episode of Care</li>
<li>Prioritized Rebooking</li>
Expand All @@ -73,7 +73,7 @@ export default function HeaderNav() {
</Link>
<Link href='/medical-device'>
<div className='box'>
<h4><img src='/images/medical-device.png' />Medical Device &gt;</h4>
<h4><img src='/images/medical-device.png' />Medical Device <img className='chevron-img' src='/images/chevron.png' /></h4>
<ul>
<li>Advanced Case Notification</li>
<li>Integrated Provider Solutions</li>
Expand All @@ -91,7 +91,7 @@ export default function HeaderNav() {
<div className={router.pathname == '/company' && 'underline'}></div>
</a>
</Link>
<div className='dropdown' >
<div className='dropdown'>
<p className={contactDropdown && 'active_a'} onMouseEnter={handleContactOnHover}>
<span>Contact</span>
<div className={contactDropdown && 'underline'} ></div>
Expand Down Expand Up @@ -165,7 +165,7 @@ export default function HeaderNav() {
color: var(--blueDocspera);
}
.active_a {
.active_a, .dropdown .active_a {
color: var(--blueDocspera);
font-weight: 600;
}
Expand Down Expand Up @@ -195,7 +195,7 @@ export default function HeaderNav() {
top: 100%;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.65);
background-color: rgba(255, 255, 255, 1);
padding: 50px 0;
}
Expand All @@ -207,7 +207,7 @@ export default function HeaderNav() {
.box:hover {
filter: drop-shadow(0px 0px 0.3rem lightgrey);
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.90);
background-color: rgba(255, 255, 255, 1);
}
.box h4 {
Expand All @@ -223,6 +223,11 @@ export default function HeaderNav() {
margin-right: 10px;
}
.box .chevron-img {
height: 12px;
padding: 0 30px;
}
.box ul {
list-style-type: none;
margin: 5px 0;
Expand Down Expand Up @@ -262,7 +267,7 @@ export default function HeaderNav() {
position: absolute;
top: 100%;
left: -16%;
background-color: rgba(255, 255, 255, 0.65);
background-color: rgba(255, 255, 255, 1);
padding: 0px 10px;
color: black;
width: 130px;
Expand Down
90 changes: 80 additions & 10 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Home() {

<img id='landing-bg' src='images/hexagon_bottom.png' width={'100%'} />
{/* <Image src='images/hexagon_bottom.png' height={1200} width={2300} /> */}

<div id='logo-animation'>
<LogoAnimation />
</div>
Expand All @@ -33,7 +33,7 @@ export default function Home() {
<NumberScroll
imgSrc='images/surgeon-users.png'
number={6000}
title='Surgical Users'
title='Surgeon Users'
plus
/>
</div>
Expand All @@ -49,7 +49,10 @@ export default function Home() {
</div>

<div id='connecting-section'>

<div id='words-div'>
<h1>DocSpera Integrated Care Coordination Platform</h1>

<h2>
Connecting <b>Surgeons</b>, <br /> <b>Care Teams</b> & <b>Medical Device Co.</b>
</h2>
Expand All @@ -71,20 +74,33 @@ export default function Home() {
<img id='connecting-graphic' src='images/connecting2.png' />
</div>

<div id='container'>
<div className='box' style={{ marginRight: 30 }}>
<div className='product-section'>
<div className='box'>
<h4><img src='/images/surgeon-users.png' />Providers</h4>
<p><span>&#10140;</span> Episode of Care</p>
<p><span>&#10140;</span> Prioritized Rebooking</p>
<p><span>&#10140;</span> Data Intelligence &amp; RWD Insights</p>
<Link href='/provider' ><button>View More &nbsp; &gt;</button></Link>
<Link href='/provider'><button>View More <img className='chevron-img' src='/images/chevron.png' /></button></Link>
</div>
<div className='box'>
<h4><img src='/images/medical-device.png' />Medical Device Enterprise</h4>
<p><span>&#10140;</span> Advanced Case Notification</p>
<p><span>&#10140;</span> Integrated Provider Solutions</p>
<p><span>&#10140;</span> Data Intelligence &amp; RWD Insights</p>
<Link href='/medical-device' ><button>View More &nbsp; &gt;</button></Link>
<Link href='/medical-device' ><button>View More <img className='chevron-img' src='/images/chevron.png' /></button></Link>
</div>
</div>

<div className='collab-section'>
<h2>DocSpera works with leading health solution providers and Organizations</h2>
<div className='collaborators'>
<div>Innovaccer</div>
<div>AthenaHealth Marketplace</div>
<div>EPIC App Orchard</div>
<div>DOLBY</div>
<div>AAHKS</div>
<div>Anterior Hip Foundation</div>
<div>CMS</div>
</div>
</div>

Expand Down Expand Up @@ -158,19 +174,26 @@ export default function Home() {
font-weight: 200;
}
#container {
.product-section {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0px 0 60px 0;
}
.product-section .chevron-img {
filter: brightness(0) invert(1);
height: 10px;
margin: 0 0 0 10px;
}
.box {
width: 35%;
padding: 25px 150px;
padding: 25px 100px;
border-radius: 10px;
background-color: white;
background-color: rgba(255, 255, 255, 1);
margin: 0 15px;
}
.box:hover {
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -219,6 +242,53 @@ export default function Home() {
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
}
.collab-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 100px 0;
width: 100%;
}
.collaborators {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
justify-items: center;
align-items: center;
margin-top: 20px;
}
@media (max-width: 1024px) {
.product-section {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.box {
width: 45%;
padding: 25px 50px;
}
@media (max-width: 768px) {
.product-section {
display: flex;
flex-direction: column;
}
.box {
width: 100%;
padding: 30px;
margin-bottom: 10px;
}
}
`}</style>
</div>
)
Expand Down
Loading

0 comments on commit 3c718ed

Please sign in to comment.