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

Footer and buttons #6

Merged
merged 3 commits into from
Dec 16, 2023
Merged

Footer and buttons #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91223a2
Button Component
amir-kedis Dec 16, 2023
15ad98a
⚛️ Create Footer Component
amir-kedis Dec 16, 2023
5bf7d30
💅 Create Fancy Blobs
amir-kedis Dec 16, 2023
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
3 changes: 3 additions & 0 deletions client/src/assets/images/github-logo.svg
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.
24 changes: 24 additions & 0 deletions client/src/assets/styles/components/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.Button {
outline: none;
border: none;
padding: 12px 20px;
border-radius: 6px;

a {
color: inherit;
font-size: 19px;
font-weight: 500;
}

&--primary {
background-color: var(--primary-100);
color: var(--grey-900);
}

&--dark {
background-color: var(--primary-900);
color: var(--grey-50);
}

// TODO: Add more button styles and maybe sizes
}
113 changes: 113 additions & 0 deletions client/src/assets/styles/components/FancyBlobs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
.FancyBlobs {
width: 100vw;
height: 120vh;
overflow-x: clip;
position: absolute;
top: 20vh;
left: 0;
z-index: -1;

> * {
position: absolute;
bottom: 0;
transition: all 0.5s ease-in-out;
}

.Blob-1 {
transform: rotate(11.588deg);
fill: linear-gradient(82deg, #8900c9 38.7%, #fcf 76.51%);
filter: blur(150px);
top: -167px;
animation: BlobMove1 10s ease-in-out infinite forwards;
}

.Blob-2 {
fill: #ff29a8;
filter: blur(125px);
top: 66px;
left: -71px;
animation: BlobMove2 10s ease-in-out infinite forwards;
}

.Blob-3 {
width: 292.12px;
height: 286.919px;
border-radius: 292.12px;
background: #ff4473;
filter: blur(150px);
top: 460px;
left: 0;
animation: BlobMove3 10s ease-in-out infinite forwards;
}

.Blob-4 {
width: 420.837px;
height: 293.732px;
border-radius: 420.837px;
background: #fb0;
filter: blur(150px);
top: 503px;
left: 150px;
animation: BlobMove4 10s ease-in-out infinite forwards;
}
}

@keyframes BlobMove1 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
75% {
transform: translate(100px, 0);
}
100% {
transform: translate(0, 0);
}
}

@keyframes BlobMove2 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
75% {
transform: translate(-100px, 0);
}
100% {
transform: translate(0, 0);
}
}

@keyframes BlobMove3 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
75% {
transform: translate(100px, 0);
}
100% {
transform: translate(0, 0);
}
}

@keyframes BlobMove4 {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 50px);
}
75% {
transform: translate(-100px, 0);
}
100% {
transform: translate(0, 0);
}
}
35 changes: 35 additions & 0 deletions client/src/assets/styles/components/Footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
.Footer {
padding: 2rem 20px;
text-align: center;
position: relative;
box-sizing: content-box;

&::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #150a25;
z-index: -1;
filter: blur(100px);
}

p {
color: var(--grey-400, #9ca3af);
line-height: normal;
}

a {
padding: 5px;
background-color: var(--primary-50);
color: var(--grey-900);
font-size: 13.33px;
font-weight: 700;
display: inline-flex;
gap: 5px;
align-items: center;
}
}
21 changes: 21 additions & 0 deletions client/src/components/common/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Link } from "react-router-dom";
import { PropTypes } from "prop-types";

// Styles
import "../../assets/styles/components/Button.scss";

export default function Button(props) {
const { children, className, linkTo, ...rest } = props;

return (
<button className={`Button ${className}`} {...rest}>
{linkTo ? <Link to={linkTo}>{children}</Link> : <>{children}</>}
</button>
);
}

Button.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
linkTo: PropTypes.string,
};
25 changes: 25 additions & 0 deletions client/src/components/common/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// style
import "../../assets/styles/components/Footer.scss";

// GitHub icon
import GitHubLogo from "../../assets/images/github-logo.svg";

export default function Footer() {
return (
<footer className="Footer">
<p>
أعمال التصميم والتطوير تمت بواسطة فريق من طلاب هندسة القاهرة قسم حاسبات.
للمزيد من المعلومات
</p>

<a
target="_blank"
rel="noreferrer"
href="https://github.com/CMP26Projects/ScoutManagementSystem"
>
<img src={GitHubLogo} alt="github logo" />
<span>github</span>
</a>
</footer>
);
}
100 changes: 100 additions & 0 deletions client/src/components/landingpage/FancyBlobs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import "./../../assets/styles/components/FancyBlobs.scss";

export default function FancyBlobs() {
return (
<div className="FancyBlobs">
<svg
xmlns="http://www.w3.org/2000/svg"
width="360"
height="882"
viewBox="0 0 360 882"
fill="none"
className="Blob-1"
>
<g filter="url(#filter0_f_71_1543)">
<path
d="M28.9326 444.67C60.0433 380.541 123.206 346.94 204.633 328.13C304.305 305.105 556.184 268.938 604.43 352.549C637.644 410.111 556.454 449.215 489.196 458.174C301.06 483.234 184.43 595.077 93.8789 580.368C29.6292 569.931 -1.13528 506.649 28.9326 444.67Z"
fill="url(#paint0_linear_71_1543)"
/>
</g>
<defs>
<filter
id="filter0_f_71_1543"
x="-282.665"
y="0.232281"
width="1194.78"
height="881.463"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="150"
result="effect1_foregroundBlur_71_1543"
/>
</filter>
<linearGradient
id="paint0_linear_71_1543"
x1="68.8451"
y1="481.485"
x2="478.203"
y2="477.608"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.422952" stopColor="#8900c9" />
<stop offset="1" stopColor="#FFCCFF" />
</linearGradient>
</defs>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="360"
height="684"
viewBox="0 0 360 684"
fill="none"
className="Blob-2"
>
<g filter="url(#filter0_f_71_1544)">
<ellipse
cx="180.615"
cy="342.099"
rx="93.6478"
ry="91.6021"
fill="#FF29A8"
/>
</g>
<defs>
<filter
id="filter0_f_71_1544"
x="-163.033"
y="0.49646"
width="687.296"
height="683.204"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="125"
result="effect1_foregroundBlur_71_1544"
/>
</filter>
</defs>
</svg>
<div className="Blob-3"></div>
<div className="Blob-4"></div>
</div>
);
}
12 changes: 12 additions & 0 deletions client/src/components/landingpage/LandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
import Nav from "../common/nav";
import Button from "../common/Button";
import Footer from "../common/Footer";

import FancyBlobs from "./FancyBlobs";

export default function LandingPage() {
return (
<>
<Nav showIcons={true} />
<FancyBlobs />
<Button className="Button--primary" linkTo="/login">
تسجيل الدخول
</Button>
<Button className="Button--dark" linkTo="/signUp">
إنشاء حساب
</Button>
<Footer />
</>
);
}
Empty file removed client/src/components/module_OR_PAGE/DELETEME.txt
View file
Open in desktop
Empty file.