-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from asusoda/Footer-Luan
Fixing Footer Components
- Loading branch information
Showing
10 changed files
with
236 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export default function AllRightsReserved() { | ||
| return ( | ||
| <div className="text-center items-center py-5"> | ||
| <p className="text-sm text-soda-gray"> | ||
| © {new Date().getFullYear()} Software Developers Association at ASU. | ||
| <br /> | ||
| All rights reserved. | ||
| </p> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,71 @@ | ||
| function Footer() { | ||
| import AllRightsReserved from "../components/AllRightsReserved.jsx"; | ||
| import HorizontalLine from "../components/HorizontalLine.jsx"; | ||
| import SocialMediaLinks from "./SocialMediaLinks.jsx"; | ||
|
|
||
| export default function Footer() { | ||
| return ( | ||
| <footer className=" w-full border-t-1"> | ||
| <hr className="border-gray-500 opacity-100"></hr> | ||
| <div className="grid grid-cols-3 max-md:grid-cols-2 gap-10 px-20 py-10 max-md:gap-5 max-md:px-10 max-md:py-5"> | ||
| <div className="text-soda-red text-center max-md:col-span-2 max-md:p-5"> | ||
| SoDA - Software Developer Association at ASU | ||
| </div> | ||
| <div className="grid grid-rows-3"> | ||
| <a href="#"> | ||
| <p className="text-soda-white">Organization</p> | ||
| </a> | ||
| <a href="#"> | ||
| <p className="text-soda-gray">Get Involved</p> | ||
| </a> | ||
| <a href="#"> | ||
| <p className="text-soda-gray">Projects</p> | ||
| </a> | ||
| <a href="#"> | ||
| <p className="text-soda-gray">Documentation</p> | ||
| </a> | ||
| </div> | ||
| <footer> | ||
| <HorizontalLine /> | ||
| <section className="footer-container"> | ||
| <section className="col-span-2 max-md:col-span-2 max-md:p-2"> | ||
| <div className="flex flex-col max-md:flex-row justify-between h-full"> | ||
| <div className="flex gap-3 items-center max-sm:flex-row max-sm:items-center max-sm:hidden"> | ||
| <img src="/logo/soda-logo-white.png" className="w-8" /> | ||
| <span className="text-soda-white font-semibold">Thesoda.io</span> | ||
| </div> | ||
| <SocialMediaLinks /> | ||
| </div> | ||
| </section> | ||
|
|
||
| <div className="grid grid-rows-3"> | ||
| <a href="#"> | ||
| <p className="text-slate-white">Resources</p> | ||
| </a> | ||
| <section className="grid grid-rows-3 gap-2"> | ||
| <a href="#"> | ||
| <p className="text-soda-gray">Constitution</p> | ||
| <p className="text-soda-white text-[18px]">Organization</p> | ||
| </a> | ||
| {organization.map((el, i) => ( | ||
| <a href={el.source} key={i}> | ||
| <p className="text-soda-gray text-[18px]">{el.name}</p> | ||
| </a> | ||
| ))} | ||
| </section> | ||
|
|
||
| <section className="grid grid-rows-3 gap-1"> | ||
| <a href="#"> | ||
| <p className="text-soda-gray">Privacy & Policy</p> | ||
| <p className="text-soda-white text-[18px]">Resources</p> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div className=" text-center items-center py-5"> | ||
| <p className="text-sm text-soda-gray"> | ||
| © {new Date().getFullYear()} Software Developers Association at ASU. | ||
| <br /> | ||
| All rights reserved. | ||
| </p> | ||
| </div> | ||
| {resources.map((el, i) => ( | ||
| <a href={el.source} key={i}> | ||
| <p className="text-soda-gray text-[18px]">{el.name}</p> | ||
| </a> | ||
| ))} | ||
| </section> | ||
| </section> | ||
| <AllRightsReserved /> | ||
| </footer> | ||
| ); | ||
| } | ||
|
|
||
| export default Footer; | ||
| const organization = [ | ||
| { | ||
| name: "Get Involved", | ||
| source: "/", | ||
| }, | ||
| { | ||
| name: "Projects", | ||
| source: "/", | ||
| }, | ||
| { | ||
| name: "Documentations", | ||
| source: "/", | ||
| }, | ||
| ]; | ||
|
|
||
| const resources = [ | ||
| { | ||
| name: "Constitution", | ||
| source: "/", | ||
| }, | ||
| { | ||
| name: "Privacy & Policy", | ||
| source: "/", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| function HorizontalLine() { | ||
| return <hr className="border-gray-500 opacity-100"></hr>; | ||
| } | ||
|
|
||
| export default HorizontalLine; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,34 @@ | ||
| import React, { Component } from 'react'; | ||
| import content from './InfoList'; | ||
| import {Card, Button, Divider} from 'semantic-ui-react'; | ||
| import './InfoCards.css' | ||
| import { Component } from "react"; | ||
| import content from "./InfoList"; | ||
| import { Card, Button, Divider } from "semantic-ui-react"; | ||
| import "./InfoCards.css"; | ||
|
|
||
| class InfoCards extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="infocards"> | ||
| <Divider horizontal id="title">Info</Divider><br/> | ||
|
|
||
| <div id="cards"> | ||
| {content.map(({title, content, button}) => | ||
| <Card key={title} className="Card rounded-card"> | ||
| <Card.Content className="card-content"> | ||
| <Card.Header className="card-header">{title}</Card.Header> | ||
| <Card.Description className="card-description">{content}</Card.Description> | ||
| <br/> | ||
| <Button | ||
| className="card-button" | ||
|
|
||
| > | ||
| {button} </Button> | ||
| </Card.Content> | ||
| </Card> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| render() { | ||
| return ( | ||
| <div className="infocards"> | ||
| <Divider horizontal id="title"> | ||
| Info | ||
| </Divider> | ||
| <br /> | ||
|
|
||
| <div id="cards"> | ||
| {content.map(({ title, content, button }) => ( | ||
| <Card key={title} className="Card rounded-card"> | ||
| <Card.Content className="card-content"> | ||
| <Card.Header className="card-header">{title}</Card.Header> | ||
| <Card.Description className="card-description"> | ||
| {content} | ||
| </Card.Description> | ||
| <br /> | ||
| <Button className="card-button">{button} </Button> | ||
| </Card.Content> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default InfoCards; | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.