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

Bb/about page carousel design #66

Merged
merged 6 commits into from
Oct 10, 2024
Merged

Bb/about page carousel design #66

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
f12b4e3
adding the borders and positioning the text areas on the page
bbland1 Oct 9, 2024
84f2cb3
figuring out some spacing on thank you & creators with theme-colors set
bbland1 Oct 9, 2024
42a5d97
getting the lin icons to space evenly and the same on all of them
bbland1 Oct 9, 2024
bf62610
fixing the margins of the page for the whole about page
bbland1 Oct 9, 2024
434f3ea
getting the base of the carousel with image working
bbland1 Oct 10, 2024
a724ecb
card title on carousel card
bbland1 Oct 10, 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
0 src/icons/GithubLogo.svg → src/assets/icons/GithubLogo.svg
View file
Open in desktop
File renamed without changes
0 src/icons/LinkedInLogo.svg → src/assets/icons/LinkedInLogo.svg
View file
Open in desktop
File renamed without changes
Binary file added src/assets/images/sample.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions src/declarations.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Declare modules for image types
declare module "*.png" {
const value: string;
export default value;
}

declare module "*.jpg" {
const value: string;
export default value;
}

declare module "*.jpeg" {
const value: string;
export default value;
}

declare module "*.gif" {
const value: string;
export default value;
}

declare module "*.svg" {
const value: string;
export default value;
}

declare module "*.webp" {
const value: string;
export default value;
}
1 change: 1 addition & 0 deletions src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
$primary-beige: #f1e6cc;
$primary-blue: #3f6476;
$secondary-blue: #001f3f;
$tertiary-blue: #356481;
20 changes: 20 additions & 0 deletions src/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
@import "../styles/variables.scss";

$theme-colors: (
"primary": $primary-beige,
"secondary": $primary-blue,
"info": $tertiary-blue,
"dark": $secondary-blue,
);

$font-size-root: null;
$font-size-base: 1.13rem; // Assumes the browser default, typically `16px`

@import "~bootstrap/scss/bootstrap";

body {
Expand All @@ -8,3 +19,12 @@ body {
font-style: normal;
background-color: $primary-beige;
}

button {
border: none;
background-color: $primary-blue !important;
color: $primary-beige !important;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
282 changes: 172 additions & 110 deletions src/views/unauthenticated/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,184 @@
import React from "react";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import LinkedInLogo from "../../icons/LinkedInLogo.svg?react";
import GithubLogo from "../../icons/GithubLogo.svg?react";
import LinkedInLogo from "../../assets/icons/LinkedInLogo.svg?react";
import GithubLogo from "../../assets/icons/GithubLogo.svg?react";
import { SignInButton } from "../../api";
import Card from "react-bootstrap/Card";
import Carousel from "react-bootstrap/Carousel";
import Image from "react-bootstrap/Image";
import SampleImage from "../../assets/images/sample.png";

export function About() {
const [stepIndex, setStepIndex] = useState(0);

const handleStepIndexChoice = (selectedIndex: number) => {
setStepIndex(selectedIndex);
};

return (
<div>
<section>
<h2>How it works</h2>
<SignInButton isSignIn={false} />
<ul>
<li>
Create a list for different stores or different grouping of items.
</li>
<li>Select a list that you&apos;d like to add items on.</li>
<li>
Open the list manager, to start adding items and choosing when you
will need to restock next.
</li>
<li>
Now that your new list has items you can start checking off items as
you shop!
<ul>
<li>
<div className="d-flex flex-wrap mx-lg-5 my-3 align-items-center justify-content-center gap-2">
<Card className="border border-solid rounded-2 border-dark border-3 bg-primary text-info shadow">
<Card.Title>How it works</Card.Title>
<Carousel activeIndex={stepIndex} onSelect={handleStepIndexChoice}>
<Carousel.Item>
<Image src={SampleImage} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>
Create a list for different stores or different grouping of
items.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image src={SampleImage} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>Select a list that you&apos;d like to add items on.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image src={SampleImage} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>
Open the list manager, to start adding items and choosing when
you will need to restock next.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image src={SampleImage} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>
Now that your new list has items you can start checking off
items as you shop!
</p>
<p>
Each time an item is marked purchase the application evaluates
your shopping habits! Supporting you by adjusting your next
purchase predictions base on when your previous shopping
history!
</li>
</ul>
</li>
<li>
If someone else needs to be let into to the shopping time you can
easily share specific lists with with in the list manager so they
can see and mark items as purchased too!
</li>
</ul>
</section>
<section>
<h2>Creators</h2>
<div>
<span>Maha Ahmed</span>
<Link to="https://www.linkedin.com/in/maha-ahmed3/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/eternalmaha" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div>
<span>Brianna Bland</span>
<Link to="https://www.linkedin.com/in/bbland1/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/bbland1" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div>
<span>Falak Zahra</span>
<Link to="https://www.linkedin.com/in/falak-zahra/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/zahrafalak" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div>
<span>Ross Clettenberg</span>
<Link
to="https://www.linkedin.com/in/ross-clettenberg/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/RossaMania" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
</section>
<section>
<h2>Thank you</h2>
<p>Mentors:</p>
<div>
<span>Alex D.</span>
<Link to="https://www.linkedin.com/in/dantonioa/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/alex-andria" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div>
<span>Aditya Dalal</span>
<Link to="https://www.linkedin.com/in/adityadalal/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/adidalal" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div>
<span>Tanner Gill</span>
<Link to="https://www.linkedin.com/in/tanner-gill/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<Link to="https://github.com/tannaurus" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<p>
The entire{" "}
<a href="https://the-collab-lab.codes/developers/" target="_blank">
The Collab Lab
</a>
.
</p>
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image src={SampleImage} fluid />
<Carousel.Caption>
<h3>First slide label</h3>
<p>
If someone else needs to be let into to the shopping time you
can easily share specific lists with with in the list manager so
they can see and mark items as purchased too!
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<SignInButton isSignIn={false} />
</Card>
<section className="d-flex flex-wrap align-items-center justify-content-center gap-2 w-100">
<Card className="border border-solid rounded-2 border-dark border-3 shadow flex-grow-1 p-2 my-2 bg-primary text-info">
<Card.Body>
<Card.Title>Creators</Card.Title>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2 align-items-center">
<Link
to="https://www.linkedin.com/in/maha-ahmed3/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<span>Maha Ahmed</span>
<Link to="https://github.com/eternalmaha" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link to="https://www.linkedin.com/in/bbland1/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<span>Brianna Bland</span>
<Link to="https://github.com/bbland1" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link
to="https://www.linkedin.com/in/falak-zahra/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<span>Falak Zahra</span>
<Link to="https://github.com/zahrafalak" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link
to="https://www.linkedin.com/in/ross-clettenberg/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<span>Ross Clettenberg</span>
<Link to="https://github.com/RossaMania" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
</Card.Body>
</Card>
<Card className="border border-solid rounded-2 border-dark border-3 shadow flex-grow-1 p-2 my-2 bg-primary text-info">
<Card.Body>
<Card.Title>Thank you</Card.Title>
<Card.Text className="text-center">
To our amazing mentors:
</Card.Text>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link to="https://www.linkedin.com/in/dantonioa/" target="_blank">
<LinkedInLogo width="25" height="25" />
</Link>
<span>Alex D.</span>
<Link to="https://github.com/alex-andria" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link
to="https://www.linkedin.com/in/adityadalal/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<span>Aditya Dalal</span>
<Link to="https://github.com/adidalal" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<div className="text-primary bg-info d-flex flex-row justify-content-between p-2 rounded-1 m-2">
<Link
to="https://www.linkedin.com/in/tanner-gill/"
target="_blank"
>
<LinkedInLogo width="25" height="25" />
</Link>
<span>Tanner Gill</span>
<Link to="https://github.com/tannaurus" target="_blank">
<GithubLogo width="25" height="25" />
</Link>
</div>
<p className="text-center">
The entire{" "}
<a
href="https://the-collab-lab.codes/developers/"
target="_blank"
>
The Collab Lab
</a>
for the opportunity!
</p>
</Card.Body>
</Card>
</section>
</div>
);
Expand Down