Skip to content

✨ create sponsors page #8

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

Merged
merged 2 commits into from
Jun 21, 2022
Merged

✨ create sponsors page #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93e9679
✨ create sponsors page
swve Jun 21, 2022
0b965b9
✏️ fix typos
swve Jun 21, 2022
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
69 changes: 38 additions & 31 deletions components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,47 @@ import styled from "styled-components";

export default function Footer(props) {
return (
<FooterWrapper home={props.home}>
© 2022 Sweave &nbsp;&nbsp;⏤{" "}
<ul>
<li>
<Link href={`/about`}>
<a>About</a>
</Link>
</li>
<li>
<Link href={`/privacy`}>
<a>Privacy</a>
</Link>
</li>
<li>
<Link href={`https://github.com/swve/gitstorykit`}>
<a target={"_blank"}>Kit</a>
</Link>
</li>
<li>
<Link href={`https://github.com/swve/gitstorykit/blob/master/CONTRIBUTING.md`}>
<a target={"_blank"}>Contribute</a>
</Link>
</li>
<li>
<Link href={`https://forms.gle/GRacRdWYuGCjA1HZ8`}>
<a target={"_blank"}>Feedback</a>
</Link>
</li>
</ul>
</FooterWrapper>
<>
<FooterCopyright home={props.home}>
© 2022 Sweave &nbsp;&nbsp;⏤{" "}
<ul>
<li>
<Link href={`/about`}>
<a>About</a>
</Link>
</li>
<li>
<Link href={`/privacy`}>
<a>Privacy</a>
</Link>
</li>
<li>
<Link href={`https://github.com/swve/gitstorykit`}>
<a target={"_blank"}>Kit</a>
</Link>
</li>
<li>
<Link href={`https://github.com/swve/gitstory`}>
<a target={"_blank"}>GitHub</a>
</Link>
</li>
<li>
<Link href={`/sponsoring`}>
<a>Sponsoring</a>
</Link>
</li>
<li>
<Link href={`https://forms.gle/GRacRdWYuGCjA1HZ8`}>
<a target={"_blank"}>Feedback</a>
</Link>
</li>
</ul>
</FooterCopyright>
</>
);
}

const FooterWrapper: any = styled.div`
const FooterCopyright: any = styled.div`
position: relative;
display: flex;
margin: auto;
Expand Down
2 changes: 0 additions & 2 deletions components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,5 +217,3 @@ const LeftWrapper: any = styled.div`
}
`;

// Dialog CSS
const ApiDialog = styled(Dialog)``;
11 changes: 7 additions & 4 deletions pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ function About() {
<AboutElements>
<Element>
<CalendarMonthIcon sx={{ marginRight: 1, fontSize: 75 }} />
<p>Explore your favorite projects by going back in time using the reactive calendar</p>
<p>Use the Reactive calendar to go back in time</p>
</Element>
<Element>
<GitHubIcon sx={{ marginRight: 1, fontSize: 75 }} />
<p>See the list of commits by day/month/year</p>
<p>Check commits by day, month and year</p>
</Element>
<Element>
<SensorsIcon sx={{ marginRight: 1, fontSize: 75 }} />
<p>Scan for commits activity of a given month by clicking on the month button in the calendar</p>
</Element>
<Element>
<AccessTimeFilledIcon sx={{ marginRight: 1, fontSize: 75 }} />
<p>Explore "snapshots" of GitHub repositories by navigating to the exact tree of a commit </p>
<p>Explore "snapshots" of GitHub repositories by navigating to the exact commit </p>
</Element>
</AboutElements>
<MadeBy>
Expand All @@ -38,7 +38,10 @@ function About() {
<span role="img" aria-label="heart">
💜
</span>{" "}
by <a target={"_blank"} href="https://twitter.com/sw3ave"><img src="/img/sweave.png" height="12" alt="" /></a>
by{" "}
<a target={"_blank"} href="https://twitter.com/sw3ave">
<img src="/img/sweave.png" height="12" alt="" />
</a>
</p>
</MadeBy>
</AboutWrapper>
Expand Down
92 changes: 92 additions & 0 deletions pages/sponsoring.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import Footer from "@components/Footer/Footer";
import Header from "@components/Header/Header";
import React from "react";
import styled from "styled-components";

function Privacy() {
return (
<>
<GradientHeader>
<Header disable_api_usage_check title={`Sponsorships`} desc="Support GitStory"></Header>
<h1>Sponsoring</h1>
<SponsoInfo>
<h2>Sponsors ✨</h2>

<p>GitStory isn't sponsored yet.</p>
<p>
If you like GitStory and find it useful please feel free to support me & the open source project through GitHub sponsors{" "}
<a href="https://github.com/sponsors/swve" target="_blank" rel="noopener noreferrer">
here
</a>
</p>
<h2>Your Sponsorship 💓</h2>
<p>
Your sponsorship helps to maintain, improve, update and support GitStory and{" "}
<a href="https://framestack.net" target="_blank" rel="noopener noreferrer">
Framestack
</a> and future incoming open source projects.
</p>
</SponsoInfo>
<Footer></Footer>
</GradientHeader>
</>
);
}

const SponsoInfo = styled.div`
background-color: #171d21e6;
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);

padding: 50px;
padding-top: 10px;
width: fit-content;
border-radius: 6px;
overflow: clip;
font-size: 14px;
box-shadow: 0 9px 11px 2px rgb(3 8 19 / 20%);
margin-top: 50px;

top: -10px;
position: relative;

h2 {
font-size: 30px;
}

h4 {
font-size: 20px;
font-weight: bolder;
}

a {
font: bold;
text-decoration: underline;
}
`;

const GradientHeader = styled.div`
height: 380px;
padding-left: 130px;
padding-right: 130px;
padding-top: 30px;

@media (max-width: 768px) {
padding-left: 60px;
padding-right: 60px;
}
background: linear-gradient(180deg, #09090a 0%, rgba(39, 49, 55, 0.52) 100%),
linear-gradient(228.87deg, rgba(69, 80, 174, 0.54) 9.05%, rgba(227, 9, 88, 0.27) 51.25%, rgba(255, 255, 255, 0) 84.11%),
linear-gradient(243.33deg, #4c15eb 5.62%, #245aaa 36.13%, rgba(221, 50, 13, 0.71) 127.92%);

h1 {
padding-top: 20px;
font-size: 45px;
}

// media query for mobile
@media (max-width: 1500px) {
height: 650px;
}
`;
export default Privacy;