Skip to content

Commit dfd5dbb

Browse files
RikthepixelRikthepixel
committed
Make the front-page
1 parent f0ada94 commit dfd5dbb

File tree

9 files changed

+212
-5
lines changed

9 files changed

+212
-5
lines changed

‎src/assets/images/brand/commit-rocket-logo.webp‎

43.1 KB
Loading

‎src/assets/images/content/missions/cross-platform.webp‎

34.7 KB
Loading

‎src/assets/images/content/missions/fast-and-feature-packed.webp‎

64.6 KB
Loading

‎src/assets/images/content/missions/modern.webp‎

36.7 KB
Loading

‎src/assets/state/missions.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { StaticImageData } from "next/image";
2+
3+
import ModernPicture from "@/assets/images/content/missions/modern.webp";
4+
import FastAndFeaturePackedPicture from "@/assets/images/content/missions/fast-and-feature-packed.webp";
5+
import CrossPlatformPicture from "@/assets/images/content/missions/cross-platform.webp";
6+
7+
interface IMission {
8+
title: string;
9+
image: StaticImageData;
10+
text: string;
11+
}
12+
13+
const missions: IMission[] = [
14+
{
15+
title: "Modern",
16+
image: ModernPicture,
17+
text: "Commit Rocket's main focus is the visual appeal of the user interface. With the goal of crafting a beginner-friendly and easy to use experience."
18+
},
19+
{
20+
title: "Fast & Feature Packed",
21+
image: FastAndFeaturePackedPicture,
22+
text: "We aim to create a modern and fast Git experience, without sacrificing any of the features you love. Making use of modern technologies like Tauri, Rust and React."
23+
},
24+
{
25+
title: "Cross-platform & Open-source",
26+
image: CrossPlatformPicture,
27+
text: "Accessibility and transparency is very important to us. That is why Commit Rocket will be open-source and be cross-platform."
28+
}
29+
];
30+
31+
export default missions;

‎src/assets/state/perks.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import NewsIcon from "@heroicons/react/24/solid/NewspaperIcon";
2+
import BeakerIcon from "@heroicons/react/24/solid/BeakerIcon";
3+
import ChatBubbleLeftRightIcon from "@heroicons/react/24/solid/ChatBubbleLeftRightIcon";
4+
5+
6+
interface IPerk {
7+
title: string;
8+
icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
9+
}
10+
11+
const perks: IPerk[] = [
12+
{
13+
title: "News Updates",
14+
icon: NewsIcon
15+
},
16+
{
17+
title: "Easly Access",
18+
icon: BeakerIcon
19+
},
20+
{
21+
title: "Surveys",
22+
icon: ChatBubbleLeftRightIcon
23+
}
24+
];
25+
26+
export default perks;

‎src/pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
4747
<Head>
4848
<title>Commit Rocket</title>
4949
</Head>
50-
<div className={"flex flex-col overflow-auto " + openSans.variable}>
50+
<div className={"flex flex-col overflow-auto scroll-smooth scroll-p-4 " + openSans.variable}>
5151
<Header />
5252

5353
<AnimatePresence mode="wait">

‎src/pages/index.tsx‎

Lines changed: 151 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,164 @@
11
import Head from "next/head";
2+
import { motion } from "framer-motion";
3+
4+
import LogoPicture from "@/assets/images/brand/commit-rocket-logo.webp";
25

36
import { Page } from "@/types/page";
47
import LinkButton from "@/components/controls/LinkButton";
8+
import Button from "@/components/controls/Button";
9+
import Link from "@/components/navigation/Link";
10+
11+
import missions from "@/assets/state/missions";
12+
import perks from "@/assets/state/perks";
513

6-
const FrontPage: Page = ({ className }) => {
14+
const logoAnim = {
15+
initial: {
16+
translateX: "-2.5%",
17+
translateY: "15%",
18+
rotate: "-2deg"
19+
},
20+
animate: {
21+
translateX: "0",
22+
translateY: "0",
23+
rotate: "10deg"
24+
}
25+
} as const;
26+
27+
const FrontPage: Page = ({ }) => {
728
return (
829
<>
930
<Head>
1031
<title>Commit Rocket</title>
1132
</Head>
12-
<LinkButton href="/about" color="secondary">
13-
Keep me up to date
14-
</LinkButton>
33+
<main aria-labelledby="hero-title" className="flex flex-col flex-1 w-full gap-4 pb-8">
34+
<section aria-label="hero" className="flex flex-col-reverse items-center h-fit min-h-0 max-w-[105rem] lg:flex-row lg:min-h-[30rem] lg:h-[75dvh] lg:h-[75vh] mx-auto">
35+
<div className="relative flex flex-col items-center justify-center h-full col-span-3 gap-8 text-center lg:w-3/5">
36+
<div className="absolute w-full h-full opacity-20 aspect-square bg-gradient-radial from-primary to-transparent -z-10" aria-hidden />
37+
<h1
38+
id="hero-title"
39+
className="text-3xl font-bold lg:text-6xl text-primary"
40+
>
41+
<span className="text-secondary">Launch</span> your <span className="text-secondary">Commits</span> in a <span className="text-secondary">Modern</span> way
42+
</h1>
43+
<p className="text-lg lg:text-xl lg:max-w-xl">
44+
Experience Git in a modern and fast way with Commit Rocket, the open-source, lightweight and cross-platform Git client.
45+
</p>
46+
<LinkButton href="/#try-it-yourself" color="secondary" className="px-5 py-3 text-xl">
47+
Try it Yourself
48+
</LinkButton>
49+
</div>
50+
<div className="relative flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] lg:min-h-0 lg:h-full lg:max-h-full lg:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
51+
<div className="absolute w-full h-full opacity-50 aspect-square bg-gradient-radial from-primary to-transparent" aria-hidden />
52+
<motion.img
53+
variants={logoAnim}
54+
className="absolute max-w-full max-h-full object-contain aspect-auto w-full rotate-[10deg]"
55+
src={LogoPicture.src}
56+
width={LogoPicture.width}
57+
height={LogoPicture.height}
58+
/>
59+
</div>
60+
</section>
61+
<section
62+
aria-labelledby="mission"
63+
className="flex flex-col gap-12 mx-auto text-center max-w-[105rem] py-16"
64+
>
65+
<h2
66+
id="mission"
67+
className="text-4xl font-bold md:text-5xl text-secondary"
68+
>
69+
Mission
70+
</h2>
71+
<div className="flex flex-col flex-wrap justify-between w-full gap-12 lg:flex-row">
72+
{missions.map(({ title, image, text }, i) => (
73+
<div key={i} className="flex flex-col items-center flex-1 gap-4">
74+
<h3 className="text-2xl text-primary md:text-3xl lg:h-[5ex] 2xl:h-auto motion-safe:transition-all">
75+
{title}
76+
</h3>
77+
<img
78+
className="w-full sm:w-2/3 lg:w-full"
79+
src={image.src}
80+
width={image.width}
81+
height={image.height}
82+
/>
83+
<p className="text-lg">{text}</p>
84+
</div>
85+
))}
86+
</div>
87+
</section>
88+
<section
89+
aria-labelledby="try-it-yourself"
90+
className="flex flex-col gap-12 py-16 mx-auto text-center max-w-7xl"
91+
>
92+
<h2
93+
id="try-it-yourself"
94+
className="text-4xl font-bold md:text-5xl text-secondary"
95+
>
96+
Try it Yourself
97+
</h2>
98+
<section className="flex flex-col gap-4">
99+
<h3 className="text-2xl text-primary md:text-3xl">Commit Rocket is not out yet!</h3>
100+
<p className="text-xl">
101+
Do you want to join in on this adventure and help develop Commit Rocket?
102+
We value your input and look forward to involving you in the process of making Commit Rocket as optimal as possible.
103+
</p>
104+
</section>
105+
<section className="flex flex-col gap-4">
106+
<h3 className="text-xl font-bold md:text-2xl text-primary">Perks</h3>
107+
<p className="text-xl">
108+
Sign up to stay in the loop on our progress,
109+
get early access to beta versions, and participate in surveys that help shape the development of our open-source and cross-platform Git client.
110+
</p>
111+
<div className="flex flex-wrap justify-center w-full gap-4" aria-hidden>
112+
{perks.map(({ title, icon: Icon }, i) => (
113+
<div key={i} className="flex flex-col items-center w-32 gap-2">
114+
<Icon className="w-12 sm:w-16 text-primary" />
115+
<div className="font-bold">{title}</div>
116+
</div>
117+
))}
118+
</div>
119+
</section>
120+
<section aria-label="Sign up" className="flex flex-col items-center gap-4">
121+
<input
122+
className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary"
123+
placeholder="your@email.com"
124+
/>
125+
<Button color="secondary" className="px-5 py-3 text-lg md:text-xl w-fit">
126+
Keep me up-to-date!
127+
</Button>
128+
<p>You can always unsubscribe by going to <Link color="primary" href="/unsubscribe" underline>this link</Link></p>
129+
</section>
130+
</section>
131+
<section
132+
aria-labelledby="feedback"
133+
className="flex flex-col w-full gap-4 py-16 mx-auto text-center max-w-7xl"
134+
>
135+
<h2
136+
id="feedback"
137+
className="text-4xl font-bold md:text-5xl text-secondary"
138+
>
139+
Feedback
140+
</h2>
141+
<section aria-labelledby="anon-feedback" className="flex flex-col gap-4">
142+
<h3 id="anon-feedback" className="text-2xl text-primary md:text-3xl">Anonymous feedback</h3>
143+
<p className="text-xl">
144+
Want to help us out without signing up? You can send us feedback directly by filling in your feedback below!
145+
</p>
146+
</section>
147+
<section aria-label="feedback-inbox" className="flex flex-col items-center gap-4">
148+
<textarea
149+
className="w-full p-4 text-lg bg-white border-2 rounded-md md:text-xl border-primary h-fit"
150+
placeholder="I would like this feature!"
151+
value=""
152+
rows={5}
153+
/>
154+
<Button color="secondary" className="px-5 py-3 text-lg md:text-xl w-fit">
155+
Submit Feedback
156+
</Button>
157+
<p>Alternatively you can send an email to <Link color="primary" href="mailto:feedback@commitrocket.com" underline>feedback@commitrocket.com</Link></p>
158+
</section>
159+
</section>
160+
</main>
161+
15162
</>
16163
);
17164
};

‎tailwind.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ module.exports = {
99
],
1010
theme: {
1111
extend: {
12+
backgroundImage: {
13+
'gradient-radial': 'radial-gradient(circle closest-side, var(--tw-gradient-stops))',
14+
},
1215
colors: {
1316
primary: {
1417
DEFAULT: "#FF5C00",

0 commit comments

Comments
 (0)