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

Asad/feed page #22

Merged
merged 2 commits into from
Apr 19, 2024
Merged

Asad/feed page #22

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebd5247
updated page theme
am5815 Apr 17, 2024
f2c78e5
prettier fix
am5815 Apr 17, 2024
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
56 changes: 25 additions & 31 deletions src/pages/Discover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,35 +102,29 @@ const Discover: React.FC = () => {
};
return (
<>
<div className="pt-12">
<div
className="pt-48"
style={{
background:
"linear-gradient(180deg, #FFF 26.5%, #FD9390 87.5%, #FB4B45 100%)",
}}
>
<div>
<section className="z-[-1]">
<div>
<div className="pt-24">
<div className="p-12 z-50">
<IonText color="dark">
<h1 className="text-3xl font-bold font-sans mb-4 md:mb-6 md:text-4xl">
Informative Mental Health
</h1>
</IonText>
<div className="max-w-lg">
<IonText
color="dark"
style={{
fontSize: 18,
fontWeight: 500,
}}
>
Explore our collection of informative mental health
resources designed to help teens navigate their emotional
well-being and find support.
</IonText>
</div>
</div>
</div>
<div className="flex flex-col justify-center items-center px-12 md:px-0">
<div className="p-4 max-w-4xl w-full">
<h1 className="text-[#101066] font-bold text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-none mb-4">
Informative Mental Health
</h1>
<br />
<p className="text-[#101066] font-semibold text-base sm:text-lg md:text-xl lg:text-xl tracking-tight leading-tight mb-8">
Explore our collection of informative mental health resources
designed to help teens navigate their emotional well-being and
find support.
</p>
</div>
<div className="curve z-[-1]" />
</section>
</div>
<div className="curve z-[-1]" />

<div className="md:ml-24 my-4">
<div
style={{
Expand Down Expand Up @@ -178,8 +172,8 @@ const Discover: React.FC = () => {
</IonChip>
</IonCardContent>
</IonCard>
<div className="h-6" />
<IonSearchbar
{/* <div className="h-6" /> */}
{/* <IonSearchbar
onInput={(event: any) => {
console.log(event.target.value);
setSearchText(event.target.value);
Expand All @@ -193,7 +187,7 @@ const Discover: React.FC = () => {
maxWidth: 600,
margin: "auto",
}}
></IonSearchbar>
></IonSearchbar> */}
</div>
<div className="mt-12 text-center">
<div
Expand All @@ -203,7 +197,7 @@ const Discover: React.FC = () => {
maxWidth: 1000,
}}
>
<IonText>Select your reading voice</IonText>
<IonText>Select your voice</IonText>
<IonButton size="small" color="warning" shape="round">
<IonIcon icon={informationCircleOutline} />
</IonButton>
Expand Down
Loading