Skip to content

Commit

Permalink
feat(docs): update marketing site header
Browse files Browse the repository at this point in the history
  • Loading branch information
cfu288 committed Apr 12, 2024
1 parent 4e84465 commit b54ab8b
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 6 deletions.
63 changes: 63 additions & 0 deletions apps/docs/src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,69 @@
animation: 1s ease-out 1.2s 1 fadeIn forwards;
}

.backgroundSlide {
background: linear-gradient(
to right,
rgba(100, 200, 200, 0),
rgba(100, 200, 200, 0)
),
linear-gradient(
to right,
rgb(9, 56, 78, 0.4),
rgb(9, 146, 200, 0.6),
#76c9ef
);
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
animation: slideUnderscore 1s 1s forwards;
}

.backgroundSlide1 {
background: linear-gradient(
to right,
rgba(100, 200, 200, 0),
rgba(100, 200, 200, 0)
),
linear-gradient(
to right,
rgb(9, 56, 78, 0.4),
rgb(9, 146, 200, 0.6),
#76c9ef
);
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
animation: slideUnderscore 1s 2s forwards;
}

.backgroundSlide2 {
background: linear-gradient(
to right,
rgba(100, 200, 200, 0),
rgba(100, 200, 200, 0)
),
linear-gradient(
to right,
rgb(9, 56, 78, 0.4),
rgb(9, 146, 200, 0.6),
#76c9ef
);
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
animation: slideUnderscore 1s 3s forwards;
}

@keyframes slideUnderscore {
100% {
background-size: 0 0.1em, 100% 0.1em;
}
}

@keyframes slideUp {
0% {
opacity: 0;
Expand Down
19 changes: 13 additions & 6 deletions apps/docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -242,15 +242,22 @@ export default function Home() {
<div className="mt-24 sm:mt-12">
<div className="mt-6 sm:max-w-xl">
<h1 className="slideUp text-primary-900 text-5xl font-bold tracking-tight sm:text-5xl">
Your Whole Medical Story.
<span className="backgroundSlide">Your</span> Whole
Medical Story.
</h1>
<h1 className="slideUp text-primary-900 text-5xl font-bold tracking-tight sm:text-5xl">
One Place.
Under <span className="backgroundSlide1">Your</span>{' '}
Control.
</h1>
<p className="slideUpDelay1 mt-6 text-xl leading-relaxed text-gray-600 opacity-0">
Mere Medical is a personal health record that helps you
organize your medical records across doctors. Free,
privacy-focused, and open-source.
<h1 className="slideUp text-primary-900 text-5xl font-bold tracking-tight sm:text-5xl">
On <span className="backgroundSlide2">Your</span> Device.
</h1>
<p className="slideUpDelay1 mb-2 mt-6 text-xl leading-relaxed text-gray-600 opacity-0">
Mere is a personal health record that aggregates your
medical records from your doctors in one place.
</p>
<p className="slideUpDelay1 text-xl leading-relaxed text-gray-600 opacity-0">
Open-source, privacy-focused, and free.
</p>
</div>
<div className="mt-5 max-w-md sm:flex sm:justify-start md:mt-8">
Expand Down

0 comments on commit b54ab8b

Please sign in to comment.