Skip to content

Commit

Permalink
Feature/aa landing page (#91)
Browse files Browse the repository at this point in the history
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
amandaalexandre authored Sep 9, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 1c90936 commit 38c9dc2
Showing 12 changed files with 10,718 additions and 5,961 deletions.
16,396 changes: 10,549 additions & 5,847 deletions package-lock.json

Large diffs are not rendered by default.

Binary file added src/assets/images/shipping.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/Card.tsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ interface CardProps {
const Card = ({ image, description, link }: CardProps) => {
return (
<Link href={link}>
<div className="bg-secondary h-[335px] w-[280px] flex flex-col items-center justify-center space-y-4 card cursor-pointer p-4">
<div className="bg-secondary h-[335px] w-[280px] flex flex-col gap-10 items-center justify-center space-y-4 card cursor-pointer p-4">
<div className="relative h-20 w-20">
<Image
src={image}
@@ -20,7 +20,7 @@ const Card = ({ image, description, link }: CardProps) => {
objectFit="contain"
/>
</div>
<p className="text-center font-bold text-white">{description}</p>
<p className="text-center text-2xl md:text-lg font-bold text-white">{description}</p>
</div>
</Link>
);
2 changes: 1 addition & 1 deletion src/components/Cards.tsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ const Cards = () => {
},
];
return (
<div className="w-full p-8 gap-8 flex flex-col justify-center items-center md:flex-row">
<div className="w-full px-20 py-8 md:gap-8 gap-3 flex flex-col justify-center items-center md:flex-row">
{cardInfo.map((card) => (
<Card
key={card.id}
60 changes: 25 additions & 35 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,50 @@
import React from 'react';
import Link from 'next/link';

const Footer = () => {
return (
<>
<footer className="bg-green p-12">
<footer className="footer p-12">
<div className="flex justify-start sm:space-x-24">
<div className="hidden sm:flex flex-col">
<h1 className="text-xl font-bold mb-4">LINKS</h1>
<p className="">
<Link href="/">Link 1</Link>
<p>
<Link href="https://docs.carboninterface.com/#/">Carbon Emissions API</Link>
</p>
<p className="">
<Link href="/">Link 2</Link>
<p>
<Link href="https://www.chingu.io">Chingu</Link>
</p>
<p className="">
<Link href="/">Link 3</Link>
<p>
<Link href="https://create.t3.gg">T3 Stack</Link>
</p>

</div>

<div className="hidden sm:flex flex-col">
<h1 className="text-xl font-bold mb-4">CREDITS</h1>
<p className="">
<Link href="/">Link 1</Link>
</p>
<p className="">
<Link href="/">Link 2</Link>
<div>
<h1 className="text-xl font-bold mb-4">OUR TEAM</h1>
<p>
<Link href="https://www.linkedin.com/in/ticia-dunn/">Ticia Dunn</Link>
</p>
<p className="">
<Link href="/">Link 3</Link>
<p>
<Link href="https://www.linkedin.com/mwlite/in/ivan-alejandre-035613156">Ivan Alejandre</Link>
</p>
</div>

<div className="">
<h1 className="text-xl font-bold mb-4">OUR TEAM</h1>
<p className="">
<Link href="/">Link 1</Link>
<p>
<Link href="https://www.linkedin.com/in/my-pham-5555b7112/">My Phan</Link>
</p>
<p className="">
<Link href="/">Link 2</Link>
<p>
<Link href="https://www.linkedin.com/in/amandavieiradev/">Amanda Vieira</Link>
</p>
<p className="">
<Link href="/">Link 3</Link>
<p>
<Link href="/">Cian</Link>
</p>
<p className="">
<Link href="/">Link 4</Link>
<p>
<Link href="https://www.linkedin.com/in/victoriacheng15/">Victoria Cheng</Link>
</p>
</div>
</div>

<p className="mt-10 text-gray-700 font-light">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda,
vero libero? Quibusdam, facere necessitatibus dolorem quisquam iusto
repellendus nostrum omnis modi! Reprehenderit sit reiciendis minima
repellendus nobis repellat id et vel officia architecto? Quaerat in
sunt at veniam eos sapiente necessitatibus delectus repudiandae
inventore mollitia.
<p className="mt-10 text-gray font-light">
CarbonCalc is a web app created by a team of volunteers from <Link href="https://chingu.io">Chingu</Link>, using the T3 Stack. <Link href="https://www.chingu.io/howItWorks">Click here to know more about how Chingu works. </Link>
</p>
</footer>
</>
61 changes: 27 additions & 34 deletions src/components/Home/Hero.tsx
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;
35 changes: 35 additions & 0 deletions src/components/Home/MainBlob.tsx
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>
)

}
4 changes: 2 additions & 2 deletions src/components/Nav.tsx
Original file line number Diff line number Diff line change
@@ -19,8 +19,8 @@ const Nav = () => {
</div>

<div className="flex">
<ul className="hidden sm:flex font-bold">
<li className="px-4">
<ul className="hidden sm:flex font-bold md:text-2xl">
<li className="px-4 ">
<Link href="/fuel">Fuel</Link>
</li>
<li className="px-4">
1 change: 1 addition & 0 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import superjson from 'superjson';
import { SessionProvider } from 'next-auth/react';
import '../styles/globals.css';
import Footer from '../components/Footer';
import '../styles/footer.css'
import Nav from '../components/Nav';
import { NextPage } from 'next';
import { ReactElement, ReactNode } from 'react';
52 changes: 21 additions & 31 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@

import type { NextPage } from 'next';
import Head from 'next/head';
import { trpc } from '../utils/trpc';
import Link from 'next/link';
import Cards from '../components/Cards';
import Hero from '../components/Home/Hero';
import { signIn } from "next-auth/react";
import { Button } from "flowbite-react";
import Hero from "../components/Home/Hero";
import MainBlob from '../components/Home/MainBlob'
import WheelchairGuy from '../assets/images/guy-wheelchair 1.png'


type TechnologyCardProps = {
name: string;
@@ -21,42 +27,26 @@ const Home: NextPage = () => {
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.png" />
</Head>
<Hero />

<nav className="flex justify-center gap-4">
<Link href="/electricity">Electricity</Link>
<Link href="/fuel">Fuel</Link>
<Link href="/travel">Travel</Link>
<Link passHref href="/auth/login">
Log in
</Link>
<Link href="/register">Register</Link>
</nav>
<MainBlob
image={WheelchairGuy}
headline={"Make an estimate based on your lifestyle."}
text={"We offer you the ability to track your emissions by your various habits, whether that be in your car, in your flights, to heat your house and give you the total estimate of how your lifestyle impacts the environment."}
/>

<Hero />
<div className='p-20 lg:w-2/4 md:w-3/4 w-4/4'>
<p className='text-4xl font-bold xl:text-5xl'>A throrough look into the carbon emissions of your life</p>
<p className='font-bold xl:text-3xl py-8'>We use latest IEA emission factor data and follow industry best practice standards.</p>
</div>

<Cards />

<p className='px-20 py-8 text-4xl font-bold'>And check your stats monthly to check on your carbon footprint evolution.</p>
</>
);
};

const TechnologyCard = ({
name,
description,
documentation,
}: TechnologyCardProps) => {
return (
<section className="flex flex-col justify-center p-6 duration-500 border-2 border-gray-500 rounded shadow-xl motion-safe:hover:scale-105">
<h2 className="text-lg text-gray-700">{name}</h2>
<p className="text-sm text-gray-600">{description}</p>
<a
className="mt-3 text-sm underline text-violet-500 decoration-dotted underline-offset-2"
href={documentation}
target="_blank"
rel="noreferrer"
>
Documentation
</a>
</section>
);
};


export default Home;
31 changes: 31 additions & 0 deletions src/styles/footer.css
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;
}

}
33 changes: 24 additions & 9 deletions src/styles/globals.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
--lime-green: #00ed5f;
--dark-grey: #1e1e1e;
@@ -15,15 +15,30 @@ body {
}

button {
background-color: var(--lime-green);
color: var(--dark-grey);
width: 170px;
height: 50px;
border-radius: 10px;
font-size: 12px;
}

.card {
border-radius: 43px;
box-shadow: 5px 5px 0px #102016, -5px -5px 0px #00ed5f;
}
border-radius: 43px;
box-shadow: 5px 5px 0px #102016, -5px -5px 0px #00ed5f;
}

.mainblob {
margin-top: -50px;
background-image: url('../assets/images/Group\ 1.svg');
background-size:cover;
background-position: center;
min-height: 880px;
padding: 40px;
}

@media screen and (min-width: 1440px) {
.mainblob {
margin-top: 50px;
background-position:right;
}
}



0 comments on commit 38c9dc2

Please sign in to comment.