Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix style homepage #27

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

Fix style homepage #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6cca9fc
aligned cards on homepage
May 1, 2024
4ae3ccf
added hover effect over red buttons
May 1, 2024
83a83a9
added Link around buttons and fixed some style
May 1, 2024
22b87e2
fix_style_homepage
May 12, 2024
edf77a4
adjusted text width on homepage and height of homecards
May 14, 2024
7cf89a9
uncommented code signin page
May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/components/Cards/HomeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function HomeCard({
return (
<div>
{isDesktop ? (
<div className="flex flex-col p-4 bg-[#fff] w-[90dvw] my-8 md:w-[18dvw] rounded-xl xl:shadow-lg">
<div className="flex flex-col px-2 bg-[#fff] w-[90dvw] my-8 md:w-[18dvw] md:h-[64dvh] rounded-xl xl:shadow-lg">
<h1 className="font-bold text-lg text-center mt-7">{title}</h1>

<Image
Expand All @@ -38,12 +38,12 @@ export default function HomeCard({
alt="Illustration feature"
/>

<div className="text-base text-center mb-10">
<div className="text-base text-center mb-10">
<p>{description}</p>
</div>
</div>
) : (
<div className="flex flex-col p-4 bg-[#fff] w-[90dvw] my-8 md:w-[18dvw] rounded-xl xl:shadow-lg">
<div className="flex flex-col p-4 bg-[#fff] w-[90dvw] my-8 md:w-[18dvw] rounded-xl xl:shadow-lg">
<h1 className="font-bold text-2xl text-center mt-7 mb-7">{title}</h1>

<div className="text-base text-center mb-7">
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/components/SignInForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function SignInForm() {
}}
placeholder="Adresse mail"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
/>
</div>

Expand All @@ -64,21 +64,22 @@ export default function SignInForm() {
}}
placeholder="Mot de passe"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
/>
</div>
<div className="mb-6">
<div className="mb-6 mt-2">
<RedButton
text="Connexion"
padding={"p-3"}
isBold={false}
size={"lg"}
onClick={signIn}
// onClick={signIn}
type="submit"
link={"/"}
/>
</div>
</div>
<div className="flex items-center">
<div className="flex items-center hover:underline mt-5">
<a href="/signUp">Pas de compte ? Inscrivez-vous.</a>
</div>
<div className="absolute z-[-1] bottom-20 left-20 transform rotate-[-20deg]">
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/components/SignUpForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,15 +76,15 @@ export default function SignupForm() {
className="pt-6 w-full flex flex-col flex-wrap items-center"
onSubmit={handleSubmit}
>
<h2 className="text-2xl mb-10">Créer un compte gratuitement</h2>
<h2 className="text-2xl mb-10">Créez un compte gratuitement</h2>
<div className="form-control w-full mb-6 flex justify-center">
<input
type="text"
name="pseudo"
id="pseudo"
placeholder="Nom d'utilisateur"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 placeholder:opacity-90 border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 placeholder:opacity-90 border-0 pl-6"
onChange={(e) => handleInputChange(e)}
/>
</div>
Expand All @@ -96,7 +96,7 @@ export default function SignupForm() {
id="firstname"
placeholder="Prénom"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 placeholder:opacity-90 border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 placeholder:opacity-90 border-0 pl-6"
onChange={(e) => handleInputChange(e)}
/>
</div>
Expand All @@ -108,7 +108,7 @@ export default function SignupForm() {
id="lastname"
placeholder="Nom"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
onChange={(e) => handleInputChange(e)}
/>
</div>
Expand All @@ -120,7 +120,7 @@ export default function SignupForm() {
id="email"
placeholder="Adresse mail"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
onChange={(e) => handleInputChange(e)}
/>
</div>
Expand All @@ -132,7 +132,7 @@ export default function SignupForm() {
id="password"
placeholder="Mot de passe"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
onChange={(e) => handleInputChange(e)}
/>
</div>
Expand All @@ -142,15 +142,15 @@ export default function SignupForm() {
type="password"
name="password"
id="password"
placeholder="Confirmer le mot de passe"
placeholder="Confirmez le mot de passe"
required
className="input input-bordered w-2/6 rounded-3xl bg-red-100 placeholder:text-black border-0 pl-6"
className="input input-bordered border-2 border-red-300 w-2/6 rounded-3xl bg-red-100 placeholder:text-gray-400 border-0 pl-6"
/>
</div>
{<p className="text-red-500"></p>}
<div className="mb-6">
<div className="mb-6 mt-2">
<RedButton
text="Je m'inscris !"
text="Inscription"
padding={"p-3"}
isBold={false}
size={"lg"}
Expand All @@ -159,7 +159,7 @@ export default function SignupForm() {
/>
</div>
</form>
<div className="flex items-center">
<div className="flex items-center hover:underline mt-5">
<Link href="/signIn">Déjà inscrit ? Connectez-vous.</Link>
</div>
<div className="absolute z-[-1] bottom-25 left-20 transform rotate-[-20deg]">
Expand Down
16 changes: 9 additions & 7 deletions frontend/src/components/buttons/Redbutton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import Link from "next/link";
import React from "react";

type RedButtonProps = {
text: string;
padding: string;
isBold: boolean;
size: string;
link?: string;
link: string;
type?: "submit" | "reset" | "button";
onClick?: () => void;
};
Expand All @@ -19,14 +20,15 @@ const RedButton = ({
type,
onClick,
}: RedButtonProps) => {
const buttonClasses = `${padding} ${
isBold ? "font-bold" : "font-normal"
} text-white bg-red-500 rounded-xl text-${size} w-full xl:w-[9dvw]`;
const buttonClasses = `${padding} ${isBold ? "font-bold" : "font-normal"
} text-white bg-red-500 rounded-xl text-${size} w-full xl:w-[12dvw] border hover:border-red-500 hover:bg-white hover:text-red-500 transition duration-300`;

return (
<button type={type} className={buttonClasses} onClick={onClick}>
{text}
</button>
<Link href={link}>
<button type={type} className={buttonClasses} onClick={onClick}>
{text}
</button>
</Link>
);
};

Expand Down
14 changes: 6 additions & 8 deletions frontend/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,42 +21,40 @@ export default function Home() {
<div className="xl:hidden my-7">
<Image src={preview} alt="app preview" width={600} height={200} />
</div>
<p className="xl:w-[31%] leading-[30px] my-7">
<p className="xl:w-[38%] leading-[30px] my-7">
Tout ce dont vous avez besoin pour vos modèles d'e-mails
personnalisés en une seule plateforme, prêt à l'envoi en quelques
minutes. Glissez, déposez, envoyez !
</p>
<div className="mx-auto xl:mx-0 w-1/2">
<Redbutton
text="Je m'inscris !"
padding={"p-3"}
padding={"px-4 py-3"}
isBold={false}
size={"lg"}
link={"/"}
link={"/signUp"}
type="button"
/>
</div>
</div>
<div className="hidden xl:block">
{/* <div className="hidden xl:block">
<Image src={preview} alt="app preview" width={600} height={200} />
</div>
</div> */}
</section>
<div className="flex flex-col items-center xl:flex-row justify-between mt-10">
<h2 className="xl:hidden text-center text-2xl text-[#000]">
<h2 className="xl:hidden text-center text-2xl text-[#000]">
Découvrez nos services :
</h2>
<HomeCard
title="Importez vos fichiers"
picture={mediaLibrary}
description="Importez et stockez vos fichiers dans votre médiathèque pour les réutiliser facilement dans vos templates."
/>

<HomeCard
title="Personnalisez vos templates"
picture={builder}
description="Notre interface drag & drop intuitive vous aide à créer des modèles personnalisés et attrayants en toute simplicité."
/>

<HomeCard
title="Envoyez vos mails"
picture={emailSender}
Expand Down
Loading