diff --git a/suncityla/app/components/Footer.tsx b/suncityla/app/components/Footer.tsx new file mode 100644 index 0000000..58ce14a --- /dev/null +++ b/suncityla/app/components/Footer.tsx @@ -0,0 +1,74 @@ +import Link from "next/link"; + +export default function Footer(){ + return( + + ) +} \ No newline at end of file diff --git a/suncityla/app/components/Hero.tsx b/suncityla/app/components/Hero.tsx new file mode 100644 index 0000000..f54c2e8 --- /dev/null +++ b/suncityla/app/components/Hero.tsx @@ -0,0 +1,20 @@ +import Link from "next/link"; + +export default function Hero(){ + return( +
+
+
+

Join Los Angeles
Move to Solar Power!

+

We’re helping LA set up solar energy.

+

This project provides a free service where a city-hired specialist evaluates the installation and maintenance costs of solar panels.

+
+ Book Now +
+
+ +
+ + ) + +} \ No newline at end of file diff --git a/suncityla/app/components/How It Works/Card.tsx b/suncityla/app/components/How It Works/Card.tsx new file mode 100644 index 0000000..5cb7f2b --- /dev/null +++ b/suncityla/app/components/How It Works/Card.tsx @@ -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( +
+

{step}

+

{howTo}

+
solar panel
+
+ ) +} \ No newline at end of file diff --git a/suncityla/app/components/How It Works/HowItWorks.tsx b/suncityla/app/components/How It Works/HowItWorks.tsx new file mode 100644 index 0000000..ba917d8 --- /dev/null +++ b/suncityla/app/components/How It Works/HowItWorks.tsx @@ -0,0 +1,14 @@ +import Card from "./Card"; + +export default function HowItWorks(){ + return( + <> +

How It Works?

+
+ + + +
+ + ) +} \ No newline at end of file diff --git a/suncityla/app/components/Navbar.tsx b/suncityla/app/components/Navbar.tsx new file mode 100644 index 0000000..97ea9bf --- /dev/null +++ b/suncityla/app/components/Navbar.tsx @@ -0,0 +1,18 @@ +import Link from "next/link"; + +export default function Navbar() { + return( + + ) +} \ No newline at end of file diff --git a/suncityla/app/globals.css b/suncityla/app/globals.css index 6b717ad..3059168 100644 --- a/suncityla/app/globals.css +++ b/suncityla/app/globals.css @@ -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; +} \ No newline at end of file diff --git a/suncityla/app/layout.tsx b/suncityla/app/layout.tsx index 4d007ac..2c9065d 100644 --- a/suncityla/app/layout.tsx +++ b/suncityla/app/layout.tsx @@ -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", @@ -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({ @@ -26,14 +26,8 @@ export default function RootLayout({ }>) { return ( - -
- Home - Admins - Bookings -
+ + {children} diff --git a/suncityla/app/page.tsx b/suncityla/app/page.tsx index f7f83fc..57ba392 100644 --- a/suncityla/app/page.tsx +++ b/suncityla/app/page.tsx @@ -1,101 +1,17 @@ -import Image from "next/image"; +import Footer from "./components/Footer"; +import Hero from "./components/Hero"; +import HowItWorks from "./components/How It Works/HowItWorks"; export default async function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> + +
+

About

+

SunCityLA is project that provides a free service where a city-hired specialist evaluates the installation and maintenance costs of solar panels.

+
+ +