Skip to content

Added: Landing Page #236

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added: Landing Page #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 32 additions & 0 deletions src/apps/public/components/About.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@

.about {
background: #f9f9f9;
height: 327px;
display : flex;
align-items: center;
justify-content: center;
flex-direction: column;


&_title {
width: 306px;
height: 44px;
font-family: Termina;
font-weight: 600;
font-size: 37px;
line-height: 100%;
letter-spacing: 1%;
margin-bottom: 30px;
}

&_description {
width: 860px;
height: 153px;
font-family: Space Grotesk;
font-weight: 400;
font-size: 18px;
line-height: 160%;
letter-spacing: -0.6px;
text-align: center;
}
}
18 changes: 18 additions & 0 deletions src/apps/public/components/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import './About.scss'

export const About = () => {
return (
<section className="about" id='about'>

Check warning on line 5 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `··<section·className="about"·id='about'` with `<section·className="about"·id="about"`
<h2 className="about_title">Who Are We?</h2>

Check warning on line 6 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `··········` with `······`
<p className="about_description">

Check warning on line 7 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Delete `····`
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

Check warning on line 8 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `············Lorem·ipsum·dolor·sit·amet,·consectetur·adipiscing·elit,·sed·do⏎············eiusmod·tempor·incididunt·ut·labore·et·dolore·magna·aliqua.·Ut·enim⏎············ad·minim·veniam,·quis·nostrud·exercitation·ullamco·laboris·nisi·ut⏎············aliquip·ex·ea·commodo·consequat.·Duis·aute·irure·dolor·in⏎············reprehenderit·in·voluptate·velit·esse·cillum·dolore·eu·fugiat·nulla⏎············pariatur.·Excepteur·sint·occaecat·cupidatat·non·proident,·sunt·in⏎············culpa·qui·officia·deserunt` with `········Lorem·ipsum·dolor·sit·amet,·consectetur·adipiscing·elit,·sed·do·eiusmod⏎········tempor·incididunt·ut·labore·et·dolore·magna·aliqua.·Ut·enim·ad·minim⏎········veniam,·quis·nostrud·exercitation·ullamco·laboris·nisi·ut·aliquip·ex·ea⏎········commodo·consequat.·Duis·aute·irure·dolor·in·reprehenderit·in·voluptate⏎········velit·esse·cillum·dolore·eu·fugiat·nulla·pariatur.·Excepteur·sint⏎········occaecat·cupidatat·non·proident,·sunt·in·culpa·qui·officia·deserunt⏎·······`
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>

Check warning on line 15 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Delete `····`
</section>

Check warning on line 16 in src/apps/public/components/About.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Delete `··`
)
}
33 changes: 33 additions & 0 deletions src/apps/public/components/CTA.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.cta {
height: 539px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;

&_title{
text-align: center;
font-family: Termina;
font-weight: 600;
font-size: 37px;
line-height: 100%;
letter-spacing: 1%;
}

&_button {
display: flex;
justify-content: center;
align-items: center;
width: 178px;
height: 45px;
color: #5B2222;
border: 2px solid #5B2222;
border-radius: 50px;
font-family: Termina;
font-weight: 700;
font-size: 13px;
line-height: 100%;
letter-spacing: 2%;
}
}
10 changes: 10 additions & 0 deletions src/apps/public/components/CTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import './CTA.scss'

export const CTA = () => {
return (
<section className="cta">
<h2 className='cta_title'> Ready to get coding? <br></br>Pick a repo and get Started!</h2>

Check warning on line 6 in src/apps/public/components/CTA.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `'cta_title'>·Ready·to·get·coding?·<br></br>Pick·a·repo·and·get·Started!` with `"cta_title">⏎········{'·'}⏎········Ready·to·get·coding?·<br></br>Pick·a·repo·and·get·Started!⏎······`
<a href='#' className='cta_button'>CTA Primary</a>

Check warning on line 7 in src/apps/public/components/CTA.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `'#'·className='cta_button'>CTA·Primary` with `"#"·className="cta_button">⏎········CTA·Primary⏎······`
</section>
)
}
79 changes: 79 additions & 0 deletions src/apps/public/components/Features.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
.features {
height: 1176px;
padding: 0px 106px;
display: flex;
flex-direction: column;
align-items: center;

&_title {
align-self: start;
font-family: Termina;
font-weight: 600;
font-size: 37px;
line-height: 100%;
letter-spacing: 1%;
margin-top: 120px;
}

&_grid {
width: 1300px;
height: 826px;
margin-top: 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap:20px
}

&_card {
display: flex;
flex-direction: column;
gap: 3rem;
padding: 3rem 2rem;
position: relative;
}

&_card-icon {
width: 83px;
height: 83px;
border-radius: 83px;
background-color: #F8F8F8;
}

&_card-title {
font-family: Termina;
font-weight: 600;
font-size: 23px;
line-height: 100%;
letter-spacing: 0%;
color: #000000;
}

&_card-description {
font-family: Poppins;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 1%;
color: #000000;
width: 380px;
height: 105px;
}

&_card-link {
position: absolute;
bottom: 3rem;
left: 2rem;
color: #2F1515;
font-family: Poppins;
font-weight: 600;
font-size: 16px;
line-height: 100%;
letter-spacing: 3%;
}

&_card-colored {
background-color: #CEECF2;
border-radius: 30px;
}
}
97 changes: 97 additions & 0 deletions src/apps/public/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import './Features.scss'

export const Features = () => {
return (
<section className="features" id='f eatures'>

Check warning on line 5 in src/apps/public/components/Features.tsx

View workflow job for this annotation

GitHub Actions / eslint-check 

Replace `'f·eatures'` with `"f·eatures"`
<div className="features_container">
<h2 className="features_title">Notable Features</h2>
<div className="features_grid">
<div className="features_card-colored features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
<div className=" features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
<div className="features_card-colored features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
<div className=" features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
<div className="features_card-colored features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
<div className=" features_card">
<div className="features_card-icon"></div>
<h3 className="features_card-title">Topic Title</h3>
<p className="features_card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.{' '}
</p>
<a href="#" className="features_card-link">
{' '}
Inline CTA →
</a>
</div>
</div>
</div>
</section>
)
}
85 changes: 85 additions & 0 deletions src/apps/public/components/Hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@

.hero {
height: calc(100vh - 100px);
overflow: hidden;

&_container {
display: flex;
height: 100%;
width: 100%;
position: relative;
}

&_left {
position: absolute;
display: flex;
flex-direction: column;
margin-left: 107px;
margin-top: 229px;
z-index: 5;
gap: 10px
}

&_title {
font-family: Termina;
font-weight: 800;
font-size: 64px;
line-height: 67px;
letter-spacing: 3%;
}

&_highlight {
color: #C86649;
}

&_subtitle {
font-family: Poppins;
font-weight: 300;
font-size: 20px;
line-height: 140%;
letter-spacing: -0.6px;
color: #17233E;
width: 611px;
opacity: 0.7;
}

&_button {
display: flex;
align-self: flex-start;
align-items: center;
margin-top: 72px;
height: 45px;
position: relative;
border: 4px solid #5B2222;
border-radius: 50px;
padding: 21px 43px;
color: #5B2222;
font-family: Termina;
font-weight: 700;
font-size: 13px;
line-height: 100%;
letter-spacing: 2%;
}

&_arrow {
position: absolute;
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}

&_right {
flex: 1 1 0%;
height: 100%;
}

&_image {
position: absolute;
right: 0;
bottom: 0;
height: 100%;
transform: translate(0%, 11%);
}


}
Loading
Loading