helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(docs) revamp landing page (#1161)

Browse source 
* Added tailwind

* Finished styling
This commit is contained in:
Alex 2022-12-22 10:31:31 -06:00 • committed by GitHub
parent da9c961fca
commit 452bd04272
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 532 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/css/custom.css
View file

@ -3,11 +3,15 @@
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Snowburst+One&display=swap");
html {
html,
button {
font-family: "Overpass", sans-serif;
}

66
docs/src/pages/index.module.css
View file

@ -1,66 +0,0 @@
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
.heroBanner {
padding: 4rem 0;
position: relative;
overflow: hidden;
text-align: center;
background: #606c88;
background: -webkit-linear-gradient(to top, #4e5362, #606c88);
background: linear-gradient(to top, #4e5362, #606c88);
color: whitesmoke;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
.buttonsRow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 4rem;
gap: 1rem;
}
.installButton {
background-color: #adcbfa;
color: #000000;
border-radius: 50px;
}
.installButton:hover {
color: #000000;
}
.introButton {
background-color: #e6ebf5;
color: #000000;
border-radius: 50px;
}
.introButton:hover {
color: #000000;
}
.demoButton {
background-color: aquamarine;
color: #000000;
border-radius: 50px;
}
.demoButton:hover {
color: #000000;
}

71
docs/src/pages/index.tsx
View file

@ -1,71 +1,54 @@
import React from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import HomepageFeatures from "@site/src/components/HomepageFeatures";
import styles from "./index.module.css";
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<div className="container">
<h1
className="hero__title"
style={{
fontFamily: "Snowburst One",
color: "#adcbfa",
}}
>
<header>
<section className="text-center m-6 p-12 border border-red-400 rounded-[50px] bg-gray-100 dark:bg-immich-dark-gray">
<h1 className="text-6xl font-bold mb-10 font-immich-title text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttonsRow}>
<div className={styles.buttons}>
<Link
className={clsx("button button--lg", styles.introButton)}
to="docs/overview/introduction"
>
Introduction
</Link>
</div>
<div className="font-thin text-2xl my-12 leading-4">
<p>SELF-HOSTED BACKUP SOLUTION </p>
<p>FOR PHOTOS AND VIDEOS</p>
<p>ON MOBILE DEVICE</p>
</div>
<div className={styles.buttons}>
<Link
className={clsx("button button--lg", styles.installButton)}
to="docs/install/requirements"
>
Installation
</Link>
</div>
<div className="flex place-items-center place-content-center mt-9 mb-16 gap-4">
<Link
className="flex place-items-center place-content-center py-3 px-8 text-lg border bg-immich-primary dark:bg-immich-dark-primary rounded-full no-underline hover:no-underline text-white hover:text-gray-50 dark:text-immich-dark-bg font-bold"
to="docs/overview/introduction"
>
GET STARTED
</Link>
<div className={styles.buttons}>
<Link
className={clsx("button button--lg", styles.demoButton)}
to="https://demo.immich.app/"
>
Demo
</Link>
</div>
<Link
className="flex place-items-center place-content-center py-3 px-8 text-lg border bg-immich-primary/10 dark:bg-gray-300 rounded-full hover:no-underline text-immich-primary dark:text-immich-dark-bg font-bold"
to="https://demo.immich.app/"
>
DEMO PORTAL
</Link>
</div>
<img src="/img/immich-screenshots.webp" alt="logo" />
</div>
</section>
</header>
);
}
export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
return (
<Layout
title={`Home`}
description="immich Self-hosted photo and video backup solution directly from your mobile phone "
noFooter={true}
>
<HomepageHeader />
<main>{/* <HomepageFeatures /> */}</main>
<div className="flex flex-col place-items-center place-content-center">
<p>This project is available under MIT license.</p>
<p className="text-xs">Privacy should not be a luxury</p>
</div>
</Layout>
);
}