Skip to content

Commit

Permalink
Merge pull request #40 from Topledger/update-website
Browse files Browse the repository at this point in the history 
update website frontpage
  • Loading branch information
@urluckyturtle01
urluckyturtle01 authored Oct 11, 2023
2 parents 5590ef3 + a3f7c61 commit df6efa7
Show file tree
Hide file tree
Showing 16 changed files with 542 additions and 153 deletions.
17 changes: 11 additions & 6 deletions components/ChainSection/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,20 @@ const ChainSection = () => {
return (
<>
<section className="weOffer">
<div className="offerMain">
<div className="offerMain chainMain">
<div className="offerImage hasPad">
<img src="assets/images/Group 217.svg" />
</div>
<div className="offerContent offerContent2">
<h1>Collate off-chain and on-chain data</h1>
<p>
Connect your private data source securely into the Top Ledger platform and combine it with on-chain Solana smart contract data.</p>
<p> Answer complex questions, strengthen decision making and finally share the enriched dashboards with your key stakeholders. </p>
</div>
<div className="offerImage hasPad">
<img src="assets/images/Group 217.svg" />
Connect your private data source securely into the Top Ledger
platform and combine it with on-chain Solana smart contract data.
</p>
<p>
Answer complex questions, strengthen decision making and finally
share the enriched dashboards with your key stakeholders.{" "}
</p>
</div>
</div>
</section>
Expand Down
69 changes: 69 additions & 0 deletions components/TrustedBySection/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import cx from "classnames";

import styles from "./index.module.scss";

const trustees = [
{
link: "https://tulip.garden/",
icon: "/assets/images/trustee-icons/solana-foundation.svg",
name: "Solana Foundation",
},
{
link: "https://www.metaplex.com/",
icon: "/assets/images/trustee-icons/metaplex.svg",
name: "Metaplex",
},
{
link: "https://tulip.garden/",
icon: "/assets/images/trustee-icons/orca.svg",
name: "Orca",
},
{
link: "https://invariant.app/",
icon: "/assets/images/trustee-icons/drift.svg",
name: "Drift",
},
{
link: "https://tulip.garden/",
icon: "/assets/images/trustee-icons/squads.svg",
name: "Squads",
},
{
link: "https://tulip.garden/",
icon: "/assets/images/trustee-icons/switchboard.svg",
name: "Switchboard",
},
{
link: "https://gari.network/",
icon: "/assets/images/trustee-icons/drip.svg",
name: "Drip",
},
{
link: "https://squads.so/",
icon: "/assets/images/trustee-icons/frakt.svg",
name: "Frakt",
},
];

const TrustedBySection = () => {
return (
<section className={cx("main-Section", styles.trustees)}>
<div className="trustedText">
<p>Trusted by</p>
</div>
<div className={styles.imagesContainer}>
<div className={styles.bottomImages}>
{trustees.map((trustee) => (
<div className="icon">
<a href={trustee.link} target="_blank" rel="noreferrer">
<img src={trustee.icon} alt={trustee.name} />
</a>
</div>
))}
</div>
</div>
</section>
);
};

export default TrustedBySection;
117 changes: 117 additions & 0 deletions components/TrustedBySection/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
@import "@/assets/styles/mixins.scss";

.trustees {
--scaling-factor: 1.3;

display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0);
backdrop-filter: blur(8px);
padding: calc(10.4rem / var(--scaling-factor))
calc(17.6rem / var(--scaling-factor)) calc(12.6rem / var(--scaling-factor));

&::before {
content: " ";
background-image: url(/assets/images/dashboard-background.png);
display: inline-flex;
position: absolute;
width: 100%;
height: calc(100% + 2rem);
left: 0;
top: 0;
opacity: 0.15;
z-index: -1;
}

:global {
.trustedText {
position: relative;
padding-bottom: 0.5rem;

&::after {
content: " ";
display: inline-block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
border-bottom: 2px solid #1a3989;
z-index: 1;
}
}
}

.imagesContainer {
display: flex;
flex-direction: column;
align-items: center;
padding: calc(5rem / var(--scaling-factor))
calc(10rem / var(--scaling-factor));
backdrop-filter: blur(20px);
--border-radius: calc(5.33rem / var(--scaling-factor));
border-radius: var(--border-radius);
@include gradient-border(var(--border-radius));
box-shadow: 0px 2px 4px rgba(255, 255, 255, 1);

@media screen and (max-width: 1200px) {
--border-radius: calc(2rem / var(--scaling-factor));
padding: calc(2rem / var(--scaling-factor));
}

&::before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: var(--border-radius);
filter: blur(20px);
background-image: url("/assets/images/clientbg.webp");
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}

.bottomImages {
width: calc(54rem / var(--scaling-factor));
padding: calc(2.66rem / var(--scaling-factor))
calc(8.66rem / var(--scaling-factor));

display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(2.33rem / var(--scaling-factor));

border-radius: calc(3.2rem / var(--scaling-factor));
border: 1px solid rgba(26, 57, 137, 0.25);
background: rgba(26, 57, 137, 0.64);
box-shadow: 0px 4px 9px 0px rgba(80, 80, 160, 0.25);

:global {
.icon {
height: calc(3rem / var(--scaling-factor));
display: inline-flex;
align-items: center;
}
}

@media screen and (max-width: 1200px) {
width: auto;
padding: calc(1rem / var(--scaling-factor));
border-radius: calc(1.5rem / var(--scaling-factor));
}
}

@media screen and (max-width: 1200px) {
margin: 0rem 1rem;
}
}

@media screen and (max-width: 1200px) {
padding: calc(2rem / var(--scaling-factor))
calc(0rem / var(--scaling-factor)) calc(2rem / var(--scaling-factor));
}
}
16 changes: 9 additions & 7 deletions components/WeOffer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ const WeOffer = () => {
<h1>Build custom dashboards using plain SQL</h1>
<p>
Create successful business strategies, generate meaningful graphs
and do powerful analysis on the decoded Solana program
data. Our backend infra pulls in raw data from the Solana
blockchain and labels and indexes them into different tables on a
daily basis.
and do powerful analysis on the decoded Solana program data. Our
backend infra pulls in raw data from the Solana blockchain and
labels and indexes them into different tables on a daily basis.
</p>
<p>
Run blazingly fast SQL queries and leave auto-scaling, replication
Expand All @@ -30,12 +29,15 @@ const WeOffer = () => {
</Link>
</div>
<div className="offerImage">
<img src="assets/images/offer.png" />
<img
style={{ border: "1px solid #D8E3FF", borderRadius: "1rem" }}
src="assets/images/offer.png"
/>
</div>
</div>
</section>

<section className="sources">
{/* <section className="sources">
<div className="sourcesMain">
<div className="sourcesImage">
<img src="assets/images/weOffer.png" />
Expand All @@ -54,7 +56,7 @@ const WeOffer = () => {
</p>
</div>
</div>
</section>
</section> */}
</>
);
};
Expand Down
7 changes: 6 additions & 1 deletion pages/home/components/SearchDashboards/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.searchDashboards {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;

.introduction {
height: 300px;
display: flex;
justify-content: flex-end;
transition: height 0.5s ease;
Expand Down
2 changes: 1 addition & 1 deletion pages/home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Home() {
<WeOffer />
<ChainSection />
{/* <Client /> */}
<CommunitySection />
{/* <CommunitySection /> */}
</main>
</div>
);
Expand Down
87 changes: 4 additions & 83 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import CommunitySection from "../components/CommunitySection";
import Hero from "./home/components/Hero";
import TrustedBySection from "@/components/TrustedBySection";
// import styles from "./index.module.css";

export default function Home() {
Expand All @@ -37,95 +38,15 @@ export default function Home() {
></meta>
</Head>

<main>
<div className="bg-blue sub-header">
<p>
Join our community of web3 data scientists and builders on
<a
title="discord"
href="https://discord.gg/q5bHa2rXmu"
target="_blank"
rel="noreferrer"
>
discord <img src="/assets/arrow-up.svg" alt="arrow-up" />
</a>
</p>
</div>
<main className="page-main">
<Hero />
<Visual />
<BackedBy />
<WeOffer />
<ChainSection />
<div className="main-Section">
<div className="trustedText">
<p>Trusted by</p>
</div>
<div className="bottomImages">
<div className="icon">
<a
href="https://www.metaplex.com/"
target="_blank"
rel="noreferrer"
>
<img src="/assets/images/metaplex-logo.svg" alt="discord" />
</a>
</div>
<div className="icon">
<a href="https://gari.network/" target="_blank" rel="noreferrer">
<img src="/assets/images/gari-logo.svg" alt="discord" />
</a>
</div>
<div className="icon">
<a href="https://squads.so/" target="_blank" rel="noreferrer">
<img src="/assets/images/squads-logo.svg" alt="discord" />
</a>
</div>

<div className="icon">
<a href="https://invariant.app/" target="_blank" rel="noreferrer">
<img src="/assets/images/invariant-logo.svg" alt="discord" />
</a>
</div>
<div className="icon">
<a href="https://tulip.garden/" target="_blank" rel="noreferrer">
<img src="/assets/images/tulip-logo.svg" alt="discord" />
</a>
</div>
</div>
{/* <div className="bottomImages">
<div className="icon">
<img src="/assets/images/Component.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
</div>
<div className="bottomImages">
<div className="icon">
<img src="/assets/images/Component.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
<div className="icon">
<img src="/assets/images/solana-lab.svg" alt="discord" />
</div>
</div> */}
</div>
<TrustedBySection />
{/* <Client /> */}
<CommunitySection />
{/* <CommunitySection /> */}
</main>
</div>
);
Expand Down
Loading

0 comments on commit df6efa7

Please sign in to comment.