generated from chingu-voyages/voyage-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: completed landing page - Main Blob - Added responsiveness to the Hero component - Fix responsiveness on the Footer component - Updated links and names in the Footer - Fixed CTA cards responsiveness
1 parent
1c90936
commit 38c9dc2
Showing
12 changed files
with
10,718 additions
and
5,961 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,31 @@ | ||
import Image from 'next/image'; | ||
import React from 'react'; | ||
import bikeWoman1 from '../../assets/images/bike-woman 1.png'; | ||
import Image from "next/image"; | ||
import React from "react"; | ||
import Link from "next/link"; | ||
import bikeWoman1 from "../../assets/images/bike-woman 1.png"; | ||
|
||
|
||
const Hero = () => ( | ||
<div className="flex flex-col md:flex-row justify-center items-center"> | ||
<div> | ||
<Image | ||
src={bikeWoman1} | ||
className="h-1 w-1" | ||
width={200} | ||
height={200} | ||
alt="Reduce your carbon footprint for a cleaner environment" | ||
/> | ||
</div> | ||
<div className="flex flex-col justify-center"> | ||
<blockquote className="text-xl italic font-semibold text-gray-900 dark:text-white"> | ||
<p>Estimate your carbon footprint</p> | ||
</blockquote> | ||
<div className="flex justify-center"> | ||
<button | ||
type="button" | ||
className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800" | ||
> | ||
Start here | ||
</button> | ||
<button | ||
type="button" | ||
className="object-none object-left-bottom focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800" | ||
> | ||
Login | ||
</button> | ||
</div> | ||
<div className="flex justify-center flex-col md:flex-row sm:flex-row p-10 gap-10 2xl:gap-20 xl:min-w-full"> | ||
<div className="sm:w-2/6"> | ||
<Image src={bikeWoman1} | ||
className="h-1 w-1" | ||
width={469} | ||
height={436} | ||
layout="responsive" | ||
alt="Woman riding a bike" | ||
/> | ||
</div> | ||
<div className="flex flex-col justify-center gap-5 xl:w-2/6" > | ||
|
||
<p className="text-5xl font-bold dark:text-white md:text-3xl xl:text-6xl 2xl:text-7xl">Estimate your carbon footprint</p> | ||
|
||
<div className="flex"> | ||
<Link href="/auth/login"> | ||
<button type="button" className="object-none object-left-bottom focus:outline-none text-grey font-bold bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 xl:text-xl ">Login</button> | ||
</Link> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
) | ||
|
||
export default Hero; | ||
export default Hero; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import Image, { StaticImageData } from "next/image"; | ||
import React from "react"; | ||
|
||
interface BlobProps { | ||
image: StaticImageData, | ||
headline: string, | ||
text: string | ||
} | ||
|
||
|
||
|
||
export default function MainBlob ({image, headline, text}: BlobProps) { | ||
|
||
return ( | ||
<div className="mainblob flex justify-center items-center"> | ||
<div className="md:basis-full md:w-3/6 sm:w-5/6 xl:w-2/6"> | ||
<span className="text-5xl font-bold md:text-3xl xl:text-6xl">{headline}</span> | ||
<p className="text-2xl xl:text-3xl md:text-xl 2xl:text-4xl py-8">{text}</p> | ||
</div> | ||
|
||
|
||
<div className="hidden md:inline shrink w-3/6 xl:w-2/6 px-20"> | ||
<Image src={image} | ||
alt={headline} | ||
|
||
layout="responsive" | ||
className="main-blob-image" | ||
/> | ||
</div> | ||
|
||
|
||
</div> | ||
) | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
.footer { | ||
background-image: url('../assets/images/Vector\ 4.png'); | ||
background-size: cover; | ||
min-height: 500px; | ||
padding-top: 250px; | ||
position: relative; | ||
} | ||
|
||
.footer a { | ||
color: var(--dark-grey); | ||
font-weight: 600; | ||
text-decoration: underline; | ||
} | ||
|
||
@media screen and (min-width: 441px) { | ||
.footer { | ||
background-image: url('../assets/images/Vector\ 3.png'); | ||
background-size: cover; | ||
|
||
} | ||
} | ||
|
||
@media screen and (min-width: 1601px) { | ||
.footer { | ||
background-size: cover; | ||
background-position-y: top; | ||
min-height: 800px; | ||
padding-top: 400px; | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters