Skip to content

Commit

Permalink
Merge pull request #64 from chingu-voyages/feature/issue-59-landing-page
Browse files Browse the repository at this point in the history 
Feature/issue 59 landing page
  • Loading branch information
@EslemOuederni
EslemOuederni authored Nov 16, 2024
2 parents 10bb4e8 + 718aaf5 commit 3bb8342
Show file tree
Hide file tree
Showing 14 changed files with 243 additions and 123 deletions.
74 changes: 74 additions & 0 deletions suncityla/app/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import Link from "next/link";

export default function Footer(){
return(
<footer>
<p>v52-tier3-team-35 </p>
<div className=" flex flex-row justify-between gap-32 mt-4">
<div>
<div className="devs">Developers:
<div>
<p>
Isslem Ouederni #1:
<a href="https://github.com/isslemouederni" target="_blank" rel="noopener noreferrer">GitHub</a> /
<a href="https://linkedin.com/in/isslemouederni" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</p>
<p>
Mariana Farcas #2:
<a href="https://github.com/marianafarcas" target="_blank" rel="noopener noreferrer">GitHub</a> /
<a href="https://linkedin.com/in/marianafarcas" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</p>
<p>
Abdulsamad Yusuf:
<a href="https://github.com/abdulsamadyusuf" target="_blank" rel="noopener noreferrer">GitHub</a> /
<a href="https://linkedin.com/in/abdulsamadyusuf" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</p>
<p>
Anna Veselova #4:
<a href="https://github.com/annaveselova" target="_blank" rel="noopener noreferrer">GitHub</a> /
<a href="https://linkedin.com/in/annaveselova" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</p>
<p>
Albert Ngodi #5:
<a href="https://github.com/albertngodi" target="_blank" rel="noopener noreferrer">GitHub</a> /
<a href="https://linkedin.com/in/albertngodi" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</p>
<p>
Fouad Tabbara #3:
<a href="https://github.com/fouadtabbara" target="_blank" rel="noopener noreferrer">GitHub</a>
</p>
</div>
</div>
</div>
<div className="links">
<h3 className="font-bold text-lg mb-4">Useful Links</h3>
<ul className="space-y-2">
<li>
<Link href="/" className="text-blue-500 hover:underline">
Home
</Link>
</li>
<li>
<Link href="#about" className="text-blue-500 hover:underline">
About
</Link>
</li>
<li>
<Link href="/bookings" className="text-blue-500 hover:underline">
Book Now
</Link>
</li>
<li>
<Link href="/admins" className="text-blue-500 hover:underline">
Admin Login
</Link>
</li>
</ul>
</div>
</div>
<div className="mt-4">
<p>Developed for chingu</p>
</div>
</footer>
)
}
20 changes: 20 additions & 0 deletions suncityla/app/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Link from "next/link";

export default function Hero(){
return(
<div className="hero-bg">
<div className="overlay"></div>
<div className="hero-content" >
<h1 className=" text-6xl text-white font-bold">Join Los Angeles <br/>Move to Solar Power!</h1>
<h2 className=" text-3xl text-white font-bold mt-[33px]">We’re helping LA set up solar energy. </h2>
<p className=" text-xl text-white font-medium mt-[33px] w-1/2">This project provides a free service where a city-hired specialist evaluates the installation and maintenance costs of solar panels.</p>
<div className="flex justify-center pt-10 ">
<Link href="/bookings" className="px-28 py-4 rounded-lg text-white bookingBtn">Book Now</Link>
</div>
</div>

</div>

)

}
20 changes: 20 additions & 0 deletions suncityla/app/components/How It Works/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Image from 'next/image';

interface CardProps{
step: string;
howTo: string;
imageSrc:string;
}
export default function Card({
step,
howTo,
imageSrc
}: CardProps){
return(
<div className='flex flex-col card'>
<div className='mt-8 font-semibold'><p>{step}</p></div>
<div className='w-2/3 text-center font-semibold mt-3 mb-3'><p>{howTo}</p></div>
<div className="flex justify-center w-[150px] h-[150px] items-center rounded-lg overflow-hidden relative"> <Image src={imageSrc} alt="solar panel" fill={true} style={{objectFit: 'cover',}}/></div>
</div>
)
}
14 changes: 14 additions & 0 deletions suncityla/app/components/How It Works/HowItWorks.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Card from "./Card";

export default function HowItWorks(){
return(
<>
<h2 className="text-3xl font-semibold mb-6 text-center heading uppercase">How It Works?</h2>
<div className="flex justify-center items-end gap-10 mb-14">
<Card step="Step 1" howTo="Schedule a free evaluation online through our website" imageSrc="/step1.jpg"/>
<Card step="Step 2" howTo="A specialist will assess the costs and benefits for the resident’s home." imageSrc="/step2.jpg"/>
<Card step="Step 3" howTo="The resident receives an installation and maintenance plan." imageSrc="/step3.jpg"/>
</div>
</>
)
}
18 changes: 18 additions & 0 deletions suncityla/app/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Link from "next/link";

export default function Navbar() {
return(
<nav className="flex flex-row justify-between items-center mx-9 py-9">
<div>
<Link href="/" className="text-4xl font-semibold">SunCityLA</Link>
</div>
<div className="flex flex-row justify-end gap-6 font-semibold">
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/bookings">Schedule an Evaluation</Link>
<Link href="/admins">Admin Login</Link>
<Link href="/Support">Support</Link>
</div>
</nav>
)
}
82 changes: 71 additions & 11 deletions suncityla/app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,81 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');

:root {
--background: #ffffff;
--foreground: #171717;
--white: #ffffff;
--btn-background: #7F95D1;
--card-background: #F4F4F4;
--primary-color: #040403;
--secondary-color:#CBE896;
--heading-color: #16302B;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
body{
background-color: var(--white);
font-family: "Poppins", sans-serif;
}

body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
.hero-bg {
position: relative;
background-image: url("/hero.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 85vh;
display: flex;
align-items: start;
justify-content: center;
padding: 40px 20px;
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6); /* 45% black overlay */
}

.hero-content {
position: relative;
z-index: 2;
}

.hero-content h2{
color: #FFF648
}

.hero-content .bookingBtn{
background-color: var(--btn-background);
}

.heading{
color:var(--heading-color)
}

.card{
background-color: var(--card-background);
color: var(--primary-color);
width: 283px;
height: 380px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
footer{
background-color: var(--btn-background);
color: var(--white);
padding:20px 80px ;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer{
margin-top: 20px;
display: flex;
}
20 changes: 7 additions & 13 deletions suncityla/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Link from "next/link";
import { Metadata } from "next";
import localFont from "next/font/local";
import Navbar from "./components/Navbar";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
Expand All @@ -15,8 +15,8 @@ const geistMono = localFont({
});

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "SunCityLA",
description: "We\’re helping LA set up solar energy.",
};

export default function RootLayout({
Expand All @@ -26,14 +26,8 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<div className="flex gap-1 underline">
<Link href="/">Home</Link>
<Link href="/admins">Admins</Link>
<Link href="/bookings">Bookings</Link>
</div>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<Navbar />
{children}
</body>
</html>
Expand Down
Loading

0 comments on commit 3bb8342

Please sign in to comment.