-
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.
43 create and style the home page (#63)
* refactor(frontend): 🔥 replace favicon, remove unused files * feat(frontend): ✨ add a hero component to home page * fix(frontend): fix typo in hero * style(frontend): 🎨 restyle navbar header to be h1 instead of button * refactor(frontend): 💄 change darkmode icon size * build: * feat(frontend): 🚧 WIP: create home page and components * feat(frontend): 🚧 WIP homepage styling and content Added placeholder images, and text styling * fix: 💄 fix padding and text sizing * fix(frontend): 💄 move button and link to projects * fix(frontend): 🐛 Fix scrollTo behaviour bugs by using gsap * feat(frontend): ✨ add sick gsap animation to rocket --------- Co-authored-by: Thrywyn <magnus.stromseng@gmail.com>
- Loading branch information
2 people
authored and
GitHub
committed
Jan 31, 2024
1 parent
20eb5be
commit 93ab96f
Showing
16 changed files
with
285 additions
and
16 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,131 @@ | ||
| "use client"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import ColoredSection from "@/components/ui/coloredSection"; | ||
| import Hero from "@/components/ui/hero"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { gsap } from "gsap"; | ||
| import { useGSAP } from "@gsap/react"; | ||
|
|
||
| import { ScrollTrigger } from "gsap/ScrollTrigger"; | ||
| import { ScrollToPlugin } from "gsap/ScrollToPlugin"; | ||
|
|
||
| gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); | ||
|
|
||
| export default function Home() { | ||
| useGSAP(() => { | ||
| gsap.fromTo( | ||
| "#rocket", | ||
| { y: 100, rotation: 45, zIndex: 1 }, | ||
| { | ||
| y: -200, | ||
| x: 300, | ||
| opacity: 1, | ||
| duration: 1, | ||
| scrollTrigger: { | ||
| trigger: "#rocket", | ||
| start: "top center", | ||
| end: "bottom top", | ||
| scrub: true, | ||
| }, | ||
| }, | ||
| ); | ||
| }); | ||
|
|
||
| function handleClick(): void { | ||
| gsap.to(window, { duration: 1, scrollTo: "#about-us" }); | ||
| } | ||
|
|
||
| return ( | ||
| <main> | ||
| <h1>Home</h1> | ||
| <Hero | ||
| id="intro-hero" | ||
| title={"SmallSatLab"} | ||
| description={"We launch satellites 🚀"} | ||
| buttonText={"About us"} | ||
| buttonLink="" | ||
| className="min-h-[calc(100vh-72px)] flex flex-col justify-center z-10" | ||
| handleClick={handleClick} | ||
| > | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img | ||
| id="rocket" | ||
| src="/images/rocketLaunch.gif" | ||
| alt="rocket launching" | ||
| className="" | ||
| /> | ||
| </Hero> | ||
|
|
||
| <ColoredSection | ||
| id="about-us" | ||
| className="flex flex-col items-center py-12 px-8" | ||
| > | ||
| <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl"> | ||
| <h1> | ||
| Empowering Space Exploration One Satellite at a Time | ||
| </h1> | ||
|
|
||
| <div className="relative w-[300px] h-[300px]"> | ||
| <Image | ||
| alt="Satellite in orbit" | ||
| src="/images/satellite.jpg" | ||
| className="m-0 object-fill" | ||
| layout="fill" | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2"> | ||
| <div className=" self-center"> | ||
| <p> | ||
| NTNU Small Satellite Lab is an initiative to | ||
| strenghten the small satellite and space related | ||
| activities at NTNU and make them more visible. | ||
| At the lab, we have a group consisting of about | ||
| ten PhD-students, two post.docs and many | ||
| bachelor- and master students every semester. | ||
| Physically, the lab consists of a concurrent | ||
| design work space as well as an well-equiped | ||
| ESD-safe area for development and testing of | ||
| electronic and mechanical parts for payloads and | ||
| platforms. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ColoredSection> | ||
| <div className="pt-8 items-center text-center flex flex-col py-12 px-8"> | ||
| <div className="prose dark:prose-invert"> | ||
| <h1 className="">Projects</h1> | ||
| <p className=""> | ||
| The SmallSat Lab team is part of a variety of projects, | ||
| a selection listed below. The main effort is on our two | ||
| satellites; HYPSO-1 (launched January 2022) and HYPSO-2 | ||
| (expected to launch June 2024) - which you can read more | ||
| about by visiting hypso.space. Activities and research | ||
| topics include spacecraft- and systems engineering in an | ||
| university setting, development of hyperspectral camera | ||
| systems, onboard processing including autonomy and AI, | ||
| communication infrastructure for small satellites and | ||
| other satellite autonomous sensor platforms. | ||
| </p> | ||
| <Link href={"/projects"}> | ||
| <Button id="">View more</Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <ColoredSection className="flex flex-col items-center py-12 px-8"> | ||
| <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl"> | ||
| <h1 className="">Most recent picture</h1> | ||
| <div className="relative w-[300px] h-[300px]"> | ||
| <Image | ||
| alt="Satellite image of city" | ||
| src="/images/recent-image.jpg" | ||
| className="m-0" | ||
| layout="fill" | ||
| objectFit="cover" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </ColoredSection> | ||
| </main> | ||
| ); | ||
| } |
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,13 @@ | ||
| import React from "react"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const ColoredSection = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn("w-full bg-muted", className)} {...props} /> | ||
| )); | ||
|
|
||
| ColoredSection.displayName = "ColoredSection"; // Add display name | ||
|
|
||
| export default ColoredSection; |
Oops, something went wrong.