Skip to content

Commit 6d44035

Browse files
RikthepixelRikthepixel
committed
Restructure frontpage
1 parent 850596d commit 6d44035

File tree

5 files changed

+56
-30
lines changed

5 files changed

+56
-30
lines changed

‎src/components/controls/Button.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
99
export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-full", {
1010
variants: {
1111
color: {
12+
white: "bg-neutral-200 hover:bg-neutral-50 border-2 border-neutral-400 text-neutral-900",
1213
secondary: "bg-secondary hover:bg-secondary-light border-2 border-secondary-dark text-secondary-contrast"
1314
}
1415
}
@@ -51,7 +52,7 @@ const Button = forwardRef(({ className, color, loading, children, disabled, ...p
5152
() => twMerge(style({ color }), className),
5253
[className, color]
5354
);
54-
55+
5556
return (
5657
<button ref={ref} className={computedClassName} disabled={loading || disabled} {...props}>
5758
{!loading && children}

‎src/components/navigation/Footer.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import Logo from "@/assets/images/brand/logo-200x200.webp";
44

55
const Footer = () => {
66
return (
7-
<footer className="flex items-center justify-center w-full mt-auto text-primary-contrast">
8-
<div className="flex flex-col w-full gap-4 p-8 border-2 max-w-7xl rounded-t-md bg-primary image-dots from-primary-light border-primary-light">
9-
<div className="flex flex-col items-center gap-2 p-2 rounded-md bg-white/20 sm:flex-row">
7+
<div className="flex items-center justify-center w-full pt-16 mt-auto text-primary-contrast">
8+
<footer className="flex flex-col w-full gap-4 p-8 border-2 max-w-7xl rounded-t-md bg-primary image-dots from-primary-light border-primary-light">
9+
<div className="flex flex-col items-center gap-2 p-2 rounded-md bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
1010
<div className="flex items-center gap-2">
1111
<img
1212
className="w-12 h-12"
@@ -112,8 +112,8 @@ const Footer = () => {
112112
</Link>
113113
</div>
114114
</div>
115-
</div>
116-
</footer>
115+
</footer>
116+
</div>
117117
);
118118
};
119119

‎src/components/pages/front/SectionCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const SectionCard = ({ children, headerChildren, headerId }: SectionCardProps) =
1010
return (
1111
<section
1212
aria-labelledby={headerId}
13-
className="flex flex-col flex-1 gap-4 p-4 bg-center border-2 rounded-lg image-dots bg-primary text-primary-contrast border-primary-light from-primary-light"
13+
className="flex flex-col flex-1 gap-4 p-4 bg-center border-2 rounded-lg bg-secondary/20 border-secondary/20"
1414
>
1515
<h2 id={headerId} className="text-2xl font-semibold">
1616
{headerChildren}

‎src/components/pages/front/SignupSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const SignupSection = () => {
4949
return (
5050
<section
5151
aria-labelledby="try-it-yourself"
52-
className="flex flex-col gap-12 py-16 mx-auto text-center max-w-7xl"
52+
className="flex flex-col gap-12 mx-auto text-center max-w-7xl"
5353
>
5454
<h2
5555
id="sign-up"

‎src/pages/index.tsx

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Head from "next/head";
22
import { motion } from "framer-motion";
33

44
import LogoPicture from "@/assets/images/brand/commit-rocket-logo.webp";
5+
import LogoSmall from "@/assets/images/brand/logo-200x200.webp";
56

67
import LinkButton from "@/components/controls/LinkButton";
78

@@ -31,7 +32,7 @@ const FrontPage: Page = ({ }) => {
3132
<Head>
3233
<title>Commit Rocket</title>
3334
</Head>
34-
<main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-4 pb-8 max-w-7xl">
35+
<main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-32 pb-8 max-w-7xl">
3536
<section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 xl:flex-row xl:min-h-[30rem] xl:h-[75dvh] xl:h-[75vh] mx-auto">
3637
<div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center xl:w-3/5">
3738
<h1
@@ -43,8 +44,8 @@ const FrontPage: Page = ({ }) => {
4344
<p className="text-lg lg:text-xl lg:max-w-xl">
4445
Experience Git in a modern and fast way with Commit Rocket, the open-source, lightweight and cross-platform Git client.
4546
</p>
46-
<LinkButton href="#sign-up" color="secondary" className="px-5 py-3 text-xl" scroll={false}>
47-
Sign Up!
47+
<LinkButton href="#introduction" color="secondary" className="px-5 py-3 text-xl" scroll={false}>
48+
Learn More!
4849
</LinkButton>
4950
</div>
5051
<div className="relative overflow-hidden flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] xl:min-h-0 xl:h-full xl:max-h-full xl:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
@@ -59,33 +60,57 @@ const FrontPage: Page = ({ }) => {
5960
/>
6061
</div>
6162
</section>
62-
<div className="flex flex-row gap-12 py-16 mx-auto text-center">
63-
<SectionCard
64-
headerId="our-goal"
65-
headerChildren="Our Goal"
66-
>
67-
Our main goal with Commit Rocket is to drive innovation and provide a modern and fast alternative to existing Git clients. We want to improve the user experience for developers by creating an open-source and cross-platform tool that is both feature-rich and beginner-friendly.
68-
</SectionCard>
69-
<SectionCard
70-
headerId="why-another-git-client"
71-
headerChildren="Why another Git client?"
72-
>
73-
At Commit Rocket, we believe that the current generation of Git clients is outdated and slow. We want to change that by providing a sleek and fast client that meets the needs of today's developers. Our commitment to open-source development and cross-platform compatibility sets us apart from other clients in the market.
74-
</SectionCard>
75-
</div>
63+
<section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg text-center border-2 rounded-lg xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
64+
<h2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-lg text-fill-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
65+
<span className="text-2xl">
66+
Introducing...
67+
</span>
68+
<span className="flex flex-col items-center gap-4 p-4 text-4xl font-bold break-normal text-primary-contrast md:text-6xl md:flex-row md:w-max">
69+
<img
70+
className="h-[1.5em] w-[1.5em]"
71+
alt="A Small Rocket"
72+
src={LogoSmall.src}
73+
width={LogoSmall.width}
74+
height={LogoSmall.height}
75+
/>
76+
Commit Rocket
77+
</span>
78+
</h2>
79+
<div className="flex flex-col w-full gap-4 text-lg font-semibold break-words xl:w-1/2">
80+
<p>
81+
A new and modern Git client that is currently in development.
82+
Our main focus is on creating a modern design and speed without sacrificing any of the features you love.
83+
</p>
84+
<p>
85+
"Why another Git client?" - Our aim is to improve the stale nature of current git clients that often look old, are inefficient and haven't changed in years!
86+
With Commit Rocket, we want to bring innovation to the table, with an open-source and cross-platform client.
87+
</p>
88+
<p>
89+
This means that everyone will have access to our code and anyone can contribute to make it the best it can be.
90+
Join us in bringing new life to Git!
91+
</p>
92+
<LinkButton href="/contribute" color="white">
93+
Contribute
94+
</LinkButton>
95+
</div>
96+
</section>
7697
<section
7798
aria-labelledby="mission"
78-
className="flex flex-col gap-12 py-16 mx-auto text-center"
99+
className="flex flex-col gap-12 mx-auto text-center"
79100
>
80101
<h2
81102
id="mission"
82103
className="text-4xl font-bold md:text-5xl text-secondary"
83104
>
84105
Mission
85106
</h2>
86-
<div className="flex flex-col flex-wrap justify-between w-full gap-12 lg:flex-row">
107+
<p>
108+
Our main goal with Commit Rocket is to drive innovation and provide a modern and fast alternative to existing Git clients.
109+
We want to improve the user experience for developers by creating an open-source and cross-platform tool that is both feature-rich and beginner-friendly.
110+
</p>
111+
<ul className="flex flex-col flex-wrap justify-between w-full gap-12 lg:flex-row">
87112
{missions.map(({ title, image, imageAlt, text }, i) => (
88-
<div key={i} className="flex flex-col items-center flex-1 gap-4">
113+
<li key={i} className="flex flex-col items-center flex-1 gap-4 p-8 border-2 rounded-lg border-secondary">
89114
<h3 className="text-2xl text-primary md:text-3xl lg:h-[5ex] motion-safe:transition-all">
90115
{title}
91116
</h3>
@@ -100,9 +125,9 @@ const FrontPage: Page = ({ }) => {
100125
<div aria-label="Mission description" className="text-lg">
101126
{text}
102127
</div>
103-
</div>
128+
</li>
104129
))}
105-
</div>
130+
</ul>
106131
</section>
107132
<SignupSection />
108133
</main>

0 commit comments

Comments
 (0)