diff --git a/src/components/AlephiumLogo.tsx b/src/components/AlephiumLogo.tsx index 4544511c..9e7d45bb 100644 --- a/src/components/AlephiumLogo.tsx +++ b/src/components/AlephiumLogo.tsx @@ -37,7 +37,7 @@ const AlephiumLogo = ({ className, fill = 'white', accentFill, gradientIndex, .. diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 6ae5115b..4ddfa10e 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -10,8 +10,8 @@ import Column from './Columns/Column' import ModalTeam from './ModalTeam' import ModalContact from './ModalContact' -import Logo from '../images/svgs/logo.svg' import { graphql, useStaticQuery } from 'gatsby' +import AlephiumLogo from './AlephiumLogo' export interface FooterContentType { footer: { @@ -35,6 +35,7 @@ const Footer = ({ className }: FooterProps) => { const [isTeamModalOpen, setIsTeamModalOpen] = useState(false) const [isContactModalOpen, setIsContactModalOpen] = useState(false) const data = useStaticQuery(footerQuery) + const theme = useTheme() const content = data.footer.nodes[0].frontmatter @@ -46,7 +47,7 @@ const Footer = ({ className }: FooterProps) => {
- + @@ -111,7 +112,7 @@ export const footerQuery = graphql` export default styled(Footer)` padding: var(--spacing-12) 0; - background-color: ${({ theme }) => theme.bgTertiary}; + background-color: ${({ theme }) => theme.bgPrimary}; color: ${({ theme }) => theme.textPrimary}; font-size: var(--fontSize-18); border-top: 1px solid ${({ theme }) => theme.separator}; @@ -120,6 +121,7 @@ export default styled(Footer)` const LogosSection = styled.div` display: flex; flex-direction: column; + justify-content: flex-start; ` const Separator = styled.div` @@ -165,14 +167,7 @@ const PageSectionContainerStyled = styled(PageSectionContainer)` } ` -const LogoStyled = styled(Logo)` - max-width: var(--width-82); - - .dark { - fill: var(--color-logo-black-dark); - } - - .light { - fill: var(--color-logo-black-light); - } +const LogoStyled = styled(AlephiumLogo)` + height: auto; + max-width: 60px; ` diff --git a/src/components/TeamMember.tsx b/src/components/TeamMember.tsx index 826ac3fc..d79cc84e 100644 --- a/src/components/TeamMember.tsx +++ b/src/components/TeamMember.tsx @@ -34,6 +34,9 @@ const TeamMemberContainer = styled.div` flex-direction: column; align-items: center; text-align: center; + border: 1px solid ${({ theme }) => theme.borderPrimary}; + padding: 20px; + border-radius: 22px; ` const TeamMemberName = styled(SimpleLink)` diff --git a/src/components/pages/hackathon/HackathonInfoSection.tsx b/src/components/pages/hackathon/HackathonInfoSection.tsx index f15e3628..aafd25b4 100644 --- a/src/components/pages/hackathon/HackathonInfoSection.tsx +++ b/src/components/pages/hackathon/HackathonInfoSection.tsx @@ -3,6 +3,9 @@ import { deviceBreakPoints } from '../../../styles/global-style' import HackathonSectionContainer from './HackathonSectionContainer' import { H3, Paragraph } from './Texts' import SimpleLink from '../../SimpleLink' +import lsw3Logo from '../../../images/logos/lsw3-logo.jpg' +import cryptoXRLogo from '../../../images/logos/cryptoXR-logo.png' +import alephiumLogo from '../../../images/logos/alephium-logo.png' export type HackathonInfoSectionContentType = { participantsInfo: { @@ -51,320 +54,289 @@ interface HackathonInfoSectionProps { const HackathonInfoSection = ({ className }: HackathonInfoSectionProps) => (
- -

When & where?

- - The hackathon will happen exclusively online, from February 12th to 26th. Main communication hub for the - hackathon will be and you can - join the hackathon channels already! - - - {' '} - - This is where you can find a team, share tips & brainstorm! All of our updates will be shared here, leave your - notifications on for this one! - +

When & where?

+ + The hackathon will take place exclusively on-site at Auxerre Expo Parc (Auxerrexpo) on Friday January, 31st + and Saturday, February 1st, as part of CryptoXR. Detailed directions to the venue can be found on the official{' '} + website. + + + + All registered hackathon participants will automatically receive entry to CryptoXR, so you can enjoy the full + event experience! + + + +

Hackathon Organizers

+ + + + CryptoXR Logo + + + + Auxerre is set to become France’s Web3 capital from January 30 to February 1, 2025, as CryptoXR returns for + its third edition. With over 3,000 visitors, 70+ speakers, and a 6,000 m² exhibition space, CryptoXR is one of + the most accessible and inclusive Web3 events in France. Focused on federating and democratizing Web3 + technologies, the event brings together industry pioneers, local actors, and the broader public to celebrate + innovation, inclusivity, and decentralization. + + + + + LSW3 Logo + + + + LSW3 is rapidly becoming one of the largest professional Web3 networks in France, with nearly 100 members, + including major players like Binance, Morpho, and Vivendi, as well as representation from the French + government on its board. This growing alliance is dedicated to enhancing security across the Web3 ecosystem by + uniting industry leaders, public institutions, and innovators to share best practices and combat fraud and + scams in blockchain and cryptocurrency. Its mission is to make Web3 technologies safer, more transparent, and + widely accessible, solidifying its position as a cornerstone of the French Web3 landscape. + + + + + Alephium Logo + + + + Alephium is a next-gen Proof-of-Work Layer 1 blockchain designed to tackle scalability, security, and + sustainability, making it an ideal foundation for impactful, future-ready blockchain solutions. With BlockFlow + technology, it supports over 10,000 tps, ensuring efficiency for global applications while maintaining a + simple, single-chain experience. Its stateful UTXO model combines smart contract flexibility with UTXO + security, providing a secure environment for dApps and tokenized assets. Alephium’s Proof-of-Less-Work cuts + energy use by 87%, aligning with environmental goals without compromising decentralization. As the + second-largest PoW blockchain by TVL after Bitcoin, Alephium powers DeFi, mining, and large-scale initiatives + like the billion-dollar GIGATONS project. + + + + +

Prizes & category for teams

+ - {' '} - - This is where teams will regroup around their projects, document progress & interact in their own forum-like - post. The channel is open, but you can’t post in there yet, only when the hackathon starts! + The most functional, impactful, and innovative projects will be rewarded with the following prizes: -

What are the prizes?

- - The main prizes are tiered to recognize the top five submissions: - - Main prizes -
    -
  • - First prize is 15’000$ in ALPH -
    • -
  • - Second prize is 8’000$ in ALPH -
    • -
  • - 3rd, 4th and 5th are 4’000$ in ALPH each -
    • -
  • - 6th, 7th, 8th & 9th are 1’000$ in ALPH each -
    • -
- - - In addition to the main prizes, special partner prizes add an extra chance to get recognized & rewarded: - -

Special partner prizes

+ + Main prizes
  • - choice will receive{' '} - 2’500$ in ALPH -
    • -
  • - choice will receive{' '} - 2’500$ in ALPH + 1st Place: €3,000 in ALPH
  • - choice will receive{' '} - 2’500$ in ALPH + 2nd Place: €2,000 in ALPH
  • - choice will receive a{' '} - + 3rd Place: €1,000 in ALPH
+ - - The hackathon also features bounties and honors to encourage a wide range of contributions: - - -

Bounties

- - Up to 15’000$ in ALPH are reserved for the bounties - -

Honors

- - Up to 8’500$ in ALPH is reserved for special honors at the jury’s discretion. - - - - Notes: -
    -
  • - The distribution of prizes is subject to the discretion of the jury and may be adjusted based on the - quality of submissions received. -
    • -
  • - All prizes will be paid in $ALPH. The conversion rate for prizes will use the $ALPH price average over - the 14-days of the hackathon (12-26th of february). -
    • -
- - - - -

What can I build?

+

Evaluation Criteria

- Participants can engage in one of two primary participation methods: embarking on the main quests or tackling - side quests called bounties. + Projects will be judged on a comprehensive set of criteria to ensure fairness and reward excellence: - -

The main quests

- - Participants can participate either as teams or as solo hackers and complete projects in the following - categories: - -
    -
  • - 🪄 dApps Development: challenge your skills in decentralized application development. -
    • -
  • - 🛠️ Tooling: Innovate with new tools to enhance blockchain functionality. -
    • -
  • - 🔀 Interoperability: Explore the connection of Alephium with other blockchain systems. -
    • -
- + + + +

Functionality (30%)

+ + Assessment of the project’s technical implementation, performance, and the effectiveness of its features. + + + +

Innovation (25%)

+ Evaluation of originality and creativity in the project’s concept and execution. + + +

Design and User Experience (UI/UX) (20%)

+ + Examination of the design aesthetics, usability, and overall user-friendliness of the application. + + + +

Potential Impact (15%)

+ + Consideration of the project’s real-world applicability and its potential to address relevant challenges or + needs. + + + +

Extensibility (10%)

+ + Review of the project’s scalability and potential for future development or integration within the + ecosystem. + + + + +

Special prizes

+ + In addition to the main prizes, teams have additional opportunities to be recognized and rewarded with{' '} + €500 each for excelling in specific areas: + +
    +
  • + Most Creative Project – Celebrating exceptional creativity and originality in leveraging Alephium’s + features. +
    • +
  • + Best User Experience (UI/UX) – Recognizing projects with outstanding design, ease of use, and + accessibility. +
    • +
  • + Best Code Quality – Rewarding clean, efficient, and well-documented code that follows best practices. +
    • +
  • + Best Security Project – Honoring tools that enhance Alephium’s security, such as vulnerability + scanners, testing frameworks, or monitoring systems. +
    • +
+ - Can I join with an existing project? Those who wish to start with a pre-existing project can do so, but only - the progress made during the hackathon will be considered for evaluation and judging. Clear objectives will - need to be set at the beginning of the hackathon to facilitate this assessment. + Please note: We reserve the right to adjust the prize categories based on the final submissions received to + ensure alignment with the quality and diversity of the projects. -

Bounties

+ +

Prizes for Solo-participants

- Everyone can participate as a team or hack solo (but bounties are not eligible for the main prizes). These are - specific/smaller tasks or challenges that participants can complete for rewards. If you are a solo hacker and - want to participate in the hackathon, this is the way (teams can also do bounties!). + Total Prize Pool: €3,000 - The general goal of bounties is to provide improvements to the user/developer experience. Bounties are divided - into 4 focus areas: + Solo developers, this is your time to shine! We’ve curated a variety of challenges tailored to individual + contributors, offering flexible opportunities to showcase your skills and creativity. These challenges aim to + empower solo hackers to dive into Alephium’s ecosystem, solve puzzles, and create tools that benefit the broader + developer community. Here are some examples of potential challenges and rewards (final challenges to be + defined): - - -

Documentation

- Enhancing/creating developer documentation. (Create a PR in the relevant repo) -
    -
  • - 1 - improve the{' '} - -
    • -
  • - 2 - improve the{' '} - -
    • -
  • - 3 - improve the{' '} - -
    • -
- - -

Coding PoC

- - Creating proof-of-concepts / code examples that help to explain Alephium. (Create a PR in{' '} - - ) -
    -
  • 4 - Merkle tree proof for allowlist
    • -
  • 5 - Crowdfund platform
    • -
  • 6 - Simple price Oracle
    • -
  • 7 - Simple DAO
    • -
  • 8 - Airdrop contract
    • -
- - -

Front-End Task

- Developing a front-end feature. -
    -
  • - 9 -{' '} - -
    • -
  • - 10 -{' '} - -
    • -
  • - 11 -{' '} - {' '} - marked with the community tag. -
    • -
- - -

Community Dashboards & Calculators

- Designing a dashboard & calculators for useful information. -
    -
  • 12 - Dune analytics board for the wALPH Uniswap pool
    • -
  • 13 - ETH wALPH stats
    • -
  • 14 - dApps stats dashboard
    • -
  • 15 - Mining reward calculator
    • -
  • 16 - Burned tokens calculator
    • -
- - -

Your own idea

- If you have an idea for a bounty, propose it to us in the general chat of the hackathon! +
    +
  • + + Port a Simple Solidity Contract Up to €500 + {' '} + – Select from a predefined list of Solidity contracts and port one to Alephium’s platform. This challenge + tests your ability to adapt smart contracts to a new blockchain environment. +
    • +
  • + + Solve the Bounty Puzzle €100 (based on complexity) + {' '} + – Recognizing projects with outstanding design, ease of use, and accessibility. +
    • +
  • + + Build a Mini-Tool or Utility for Alephium Developers Up to €500 + {' '} + – Create a lightweight, functional tool to enhance the Alephium development experience. This could include + testing frameworks, debugging tools, or utilities that streamline development workflows. +
    • +
- - For submission, the process is the same as for main quests. Once you have chosen a bounty, please create a - post in the Hackathon-Projects channel with the name of the bounty as a title. You can document your progress - there or ask us for help or advice in the post. At the end of the hackathon, you will provide a link to your - work in the submission form, to be evaluated by the jury! - + Stay tuned for more challenges! If you have an idea for a challenge, propose it to us upon registration or in + person during the onboarding session on Friday January, 31st. + + + Participants can look forward to a host of surprises throughout the event! From exclusive goodies and swag to + bonus challenges and unexpected rewards, we’ve got plenty in store to make your hackathon experience + unforgettable. Whether it’s a token of appreciation or an extra boost of motivation, we’re here to ensure every + participant feels valued and inspired. -

What is the schedule?

+ + +

Timeline

+ - - - - -

January 19th

-

Announcement and team enrollment - Opening of applications

- - - - - -

January 31st

-

Opening of the special Discord Channel for team finding and general chat.

- - - - - -

February 12th - 4PM CET

-

- A one-hour kickoff {' '} - with the team. will help set - up your development environment,{' '} - recap the process,{' '} - ,{' '} - &{' '} - will be there. This will be - followed by an open office & Q&A! -

- - - - - - - -

February 16th & 20th

-

- Open Office Hours & Live Support: These one-hour sessions will allow participants to engage with the - core contributors and seek assistance or clarification on their projects. -

- - - + Friday - 16:00-20:00 + + + +

16:30 - 17:00

+

Welcome & Alephium Introduction

+ + -

February 26th

-

Submission deadline: All projects must be submitted by 11:59 PM CET.

+

17:00 - 18:00

+

Onboarding & resources sharing:

 -

First half of March

-

Winners Announcement

+

18:00-20:00

+

Open office + small Apéro

 -

How can I participate?

- - First, you need to apply! Join by completing the form{' '} - - - - For the duration of the hackathon, the main communication Hub will be the hackathon’s general channel. Ping us - there if you didn’t get the special discord role! - - - Additionally, each team will have access to a dedicated Discord sub-channel in a dedicated forum channel for - discussion, progress reporting, and collaboration. - - - At the end of the hackathon, the teams & individuals will need to submit their work through{' '} - (not yet open, check back after - the 20th of February). - - + + Saturday - 9:30 - 20:00 + + + +

9:30

+

Hackathon Start

+ + + + + +

12:30

+

Lunch

+ + + + + +

17:00-20:00

+

Review

+ + + + + +

20:00-20:30

+

Submission deadline

+ + + + + +

17:00

+

Winner announcement on the main stage

+ + + + +

How can I participate?

+ Getting involved is easy! +
    +
  • + Register: Start by completing the registration form{' '} + to secure your spot. +
    • +
  • + Prepare: Ahead of the event, we’ll send you some resources to help you get started. In the meantime, you + can already explore the to + familiarize yourself with the chain and its features. +
    • +
  • + Attend CryptoXR: Make sure to come to the CryptoXR event at Auxerrexpo, as the hackathon will take place + exclusively on-site. +
    • +
  • + Join the Onboarding Session: Don’t miss the onboarding session on Friday, January 31st, where we’ll guide you + through everything you need to know to kickstart your hackathon experience. +
    • +
+ + If you have any questions about the hackathon or need assistance, feel free to email us at info@alephium.org or + Contact@lsw3.fr —we’re here to help! +
) @@ -372,17 +344,39 @@ export default styled(HackathonInfoSection)` background-color: ${({ theme }) => theme.bgTertiary}; ` +const TimeLinesWrapper = styled.div` + display: flex; + gap: 20px; + align-items: flex-start; +` + const ScheduleItems = styled.div` display: flex; flex-direction: column; - padding-left: var(--spacing-2); + background-color: ${({ theme }) => theme.bgSecondary}; + border: 1px solid ${({ theme }) => theme.borderPrimary}; + border-radius: 22px; + overflow: hidden; +` + +const ScheduleItemsHeader = styled.div` + background-color: ${({ theme }) => theme.bgSurface}; + border-bottom: 1px solid ${({ theme }) => theme.borderPrimary}; + padding: var(--spacing-2) var(--spacing-4); + font-size: 20px; + text-align: center; ` const ScheduleItem = styled.div` display: flex; align-items: center; - padding: var(--spacing-2); + padding: 0 var(--spacing-2); border-left: 1px solid ${({ theme }) => theme.palette1}; + margin-left: var(--spacing-2); + + h4 { + margin: 10px 0 0 0 !important; + } ` const ScheduleItemDot = styled.div` @@ -402,15 +396,6 @@ const ScheduleItemDot = styled.div` const ScheduleItemText = styled.div` display: flex; flex-direction: column; - - h4 { - margin: 0; - } - - p { - margin: var(--spacing-2) 0 0 0; - opacity: 0.8; - } ` const PrizeList = styled.div`` @@ -430,28 +415,60 @@ const MainPrizesTitle = styled.h3` margin-bottom: 16px; ` -const QuestsBox = styled.div` - font-size: 18px; - padding: 16px; +const PartnersCards = styled.div` + display: flex; + gap: 20px; + + @media ${deviceBreakPoints.mobile} { + flex-direction: column; + } +` + +const PartnerCard = styled.div` + display: flex; + flex-direction: column; + gap: 20px; + padding: var(--spacing-3); + border: 1px solid ${({ theme }) => theme.borderPrimary}; background-color: ${({ theme }) => theme.bgPrimary}; - border: 1px solid ${({ theme }) => theme.palette1}; + border-radius: 22px; - h3 { - margin: 0; + @media ${deviceBreakPoints.mobile} { + padding: var(--spacing-4); + justify-content: center; + align-items: center; + text-align: center; + } +` + +const PartnerLogo = styled.div` + img { + background-color: white; + height: 100px; + width: 100px; + border-radius: 22px; + overflow: hidden; + object-fit: contain; } ` -const BountiesList = styled.div` +const PartnerName = styled(SimpleLink)` + font-size: 24px; + font-weight: 500; +` + +const PartnerDescription = styled.div` + max-width: 400px; + font-size: 15px; + color: ${({ theme }) => theme.textPrimaryVariation}; +` + +const CriteriumList = styled.div` display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; - - ul { - list-style-type: none; - padding-left: 20px; - padding-top: 10px; - } + padding-top: 20px; @media ${deviceBreakPoints.mobile} { grid-template-columns: repeat(1, 1fr); @@ -459,12 +476,22 @@ const BountiesList = styled.div` } ` -const BountiesCard = styled.div` - padding: var(--spacing-3); +const CriteriumCard = styled.div` + padding: var(--spacing-2) var(--spacing-3); border: 1px solid ${({ theme }) => theme.borderPrimary}; + border-radius: 22px; background-color: ${({ theme }) => theme.bgSecondary}; - h3 { - margin-top: 0; + h4 { + margin-top: 16px !important; + font-size: 23px !important; } ` + +const Badge = styled.div` + display: inline; + background: rgba(255, 255, 255, 0.1); + padding: 2px 4px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.1); +` diff --git a/src/components/pages/hackathon/HackathonJudgingSection.tsx b/src/components/pages/hackathon/HackathonJudgingSection.tsx index 83d2f2c5..d9f93579 100644 --- a/src/components/pages/hackathon/HackathonJudgingSection.tsx +++ b/src/components/pages/hackathon/HackathonJudgingSection.tsx @@ -6,233 +6,61 @@ import { H3, Paragraph } from './Texts' import SimpleLink from '../../SimpleLink' const HackathonJudgingSection = () => ( - -

Who’s in the Jury?

- - We’ve assembled a knowledgeable, exigent but amicable & engaged jury composed of core contributors. This jury will - distribute the main prizes, bounties rewards & honorable mentions: - +
+

Jury

+ We are excited to announce our panel of judges for the hackathon: - - - - - - - - - - Partners will have their own juries & will choose the partner prizes independently: - Partner jury — Bitmain - Partner jury — Blockflow DAO - Partner jury — Cetacean Capital DAO - Partner jury — Dappnode - -

What will be the jury’s criteria?

- Participants are encouraged to be creative and propose projects that resonate with their interests, as long as - they align with Alephium’s framework and fit into one of the proposed categories. Here is how the jury will - evaluate your project: + With their diverse backgrounds and expertise, our jury is well-equipped to evaluate the creativity, functionality, + and impact of your projects. Stay tuned for more exciting announcements as we reveal additional members of our + judging panel! - - -

Implementation

- Does the interaction with Alephium demonstrate quality software development? - - -

From idea to finish

- Does the idea/intention announced at the beginning match with the output at the end? - - -

UX/Design

- Is the user experience and design of the project well thought out? - - -

Potential Impact

- How big of an impact could the project have on the Alephium ecosystem? - - -

Quality of the Idea

- How creative and unique is the project? - - -

What are the rules?

- -
    -
  • - Age and Legal Requirements: Participants must be at least 18 years old, or have reached the age of - majority in their jurisdiction, whichever is greater. Compliance with the terms and conditions outlined{' '} - - is mandatory. -
    • -
  • - Adherence to Themes: Projects should align with the hackathon’s themes and categories. Creativity is - encouraged, but relevance to Alephium’s ecosystem is essential. -
    • -
  • - Progress and Development: Projects can build upon existing work, but only advancements made during the - hackathon will be considered for judging. -
    • -
  • - Where will the teams submit their projects: The submissions must include links to code repositories. - You can also include text, video, or audio with relevant graphics and links to webapps you may find relevant. -
    • -
- We’ve assembled a knowledgeable, exigent but amicable & engaged jury composed of core contributors. This jury will - distribute the main prizes, bounties rewards & honorable mentions: - + To ensure a fair and exciting competition, all participants must follow the Hackathon rules: +
    +
  • Participants must be at least 18 years old (or the age of majority in their jurisdiction).
    • +
  • Teams can have up to 5 members, and solo participation is also welcome.
    • +
  • Submissions must be completed and submitted before the deadline.
    • +
  • All projects must comply with applicable laws and intellectual property requirements.
    • +
  • Prizes will be awarded at the full discretion of the jury.
    • +
-

What happens after the hackathon?

- Participating projects can subsequently apply to Alephium’s grant program. - {' '} - “is dedicated to supporting standout projects that align with their criteria in the upcoming Hackathon, providing - investment/seed funding ranging from $50.000 to $1.000.000”. + For full details on eligibility, team formation, submission guidelines, judging criteria, and more, check out the + complete Hackathon rules{' '} + . - - The Blockflow DAO also expressed interest in helping quality projects develop further after the hackathon. - - -

Hackathon Partners

- - - - Bitmain Logo - - - is a global leader in digital currency - mining servers and is committed to creating a better digital world. With cutting-edge hash-rate efficiency - technologies, they drive secure, stable hashrate infrastructure, fueling innovation in the web 3.0 era. - - - - - Blockflow DAO Logo - - - is Alephium’s first - ever community DAO, dedicated to boosting adoption & usage, expanding the community, nurturing development & - promoting the Alephium ecosystem. - - - - - Cetacean Capital Logo - - - aims to be DeFi’s most loved, - efficient, and profitable Investment DAO. As individuals, its members have incredible skills, experience - knowledge and contacts, in the crypto-space for many years. - - - - - Dappnode Logo - - - is the self-owned infrastructure layer for a - human-centric, data-sovereign, private-by-design internet. Dappnode lowers the barrier of entry for non - tech-savvy participants. - - - - +
) export default HackathonJudgingSection -const CriteriumList = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 20px; - - @media ${deviceBreakPoints.mobile} { - grid-template-columns: repeat(1, 1fr); - grid-template-rows: repeat(1, 1fr); - } -` - -const CriteriumCard = styled.div` - padding: var(--spacing-4); - border: 1px solid ${({ theme }) => theme.borderPrimary}; - background-color: ${({ theme }) => theme.bgPrimary}; - - h3 { - margin-top: var(--spacing-2); - } -` - const Jury = styled.div` display: flex; gap: 25px; @@ -246,45 +74,10 @@ const Jury = styled.div` const PersonCard = styled.div` padding-bottom: var(--spacing-2); text-align: center; - max-width: 170px; + max-width: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; ` - -const PartnersCards = styled.div` - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr); - gap: 20px; - - @media ${deviceBreakPoints.mobile} { - grid-template-columns: repeat(1, 1fr); - grid-template-rows: repeat(1, 1fr); - } -` - -const PartnerCard = styled.div` - display: flex; - padding: var(--spacing-3); - border: 1px solid ${({ theme }) => theme.borderPrimary}; - background-color: ${({ theme }) => theme.bgPrimary}; -` - -const PartnerLogo = styled.div` - display: flex; - align-items: center; - justify-content: center; - margin-right: 25px; - - img { - height: 100px; - width: 100px; - border-radius: 50%; - overflow: hidden; - } -` - -const PartnerDescription = styled.div`` diff --git a/src/components/pages/hackathon/HackathonLandingSection.tsx b/src/components/pages/hackathon/HackathonLandingSection.tsx index a7d4b3da..402f4938 100644 --- a/src/components/pages/hackathon/HackathonLandingSection.tsx +++ b/src/components/pages/hackathon/HackathonLandingSection.tsx @@ -2,38 +2,41 @@ import { colord } from 'colord' import styled from 'styled-components' import { deviceBreakPoints } from '../../../styles/global-style' import HackathonSectionContainer from './HackathonSectionContainer' -import headerImage from '../../../images/alephium-hackathon-lake.png' +import headerImage from '../../../images/crypto-xr-gradient.png' +import cryptoXRIllustration from '../../../images/crypto-xr-cyberpunk.png' import SimpleLink from '../../SimpleLink' const HackathonLandingSection = () => ( + - Hackathon #1 - Pioneers - 12th - 26th February 2024 + CryptoXR Hackathon + BUIDL with Alephium & LSW3 + 31.01 - 01.02.2025 + In person - TL;DR - Up to $50’000 $70’000 in ALPH tokens, sponsored by Alephium, the{' '} - ,{' '} - and{' '} - and{' '} - . + €15,000 in ALPH is up for grabs at the first-ever in-person Alephium hackathon, hosted by France’s most + beloved crypto event, , and{' '} + ! - It will reward teams building across 3 main categories (dApps, tooling & interoperability) as well as - offering bounties for solo hackers! + This 1-day on-site hackathon welcomes both teams and solo developers to buidl. Don’t miss the chance to dive + into Alephium’s innovative blockchain technology, showcase your skills, and connect with the vibrant + CryptoXR community. - Apply now! + Register now! @@ -57,11 +60,13 @@ const SectionWrapper = styled.div` const ContentContainer = styled(HackathonSectionContainer)` flex: 1; display: flex; - align-items: center; height: auto; + padding-top: 8%; ` const Content = styled.div` + display: flex; + flex-direction: column; overflow: hidden; max-width: 600px; ` @@ -72,6 +77,7 @@ const FirstContentBox = styled.div` backdrop-filter: blur(24px); line-height: 40px; margin-bottom: 10px; + border-radius: 22px; @media ${deviceBreakPoints.mobile} { padding: 20px; @@ -88,6 +94,7 @@ const SecondContentBox = styled.div` backdrop-filter: blur(24px); padding: 2vh 3vw; line-height: 30px; + border-radius: 22px; ` const TagLine = styled.h2` @@ -109,10 +116,29 @@ const Title = styled.h1` margin-top: 10px; font-weight: 500; ` -const Date = styled.h1` +const SurTitle1 = styled.h1` color: ${({ theme }) => theme.palette2}; - font-size: 30px; + font-size: 42rpx; font-weight: 500; + margin: 0; +` + +const SurTitle2 = styled.h1` + color: ${({ theme }) => theme.textSecondary}; + font-size: 26px; + font-weight: 400; + margin: 0; +` + +const SubTitle = styled.div` + display: inline-block; + padding: 0px 16px; + background: ${({ theme }) => theme.palette2}; + border-radius: 12px; + + @media ${deviceBreakPoints.mobile} { + margin-top: 20px; + } ` const ActionLink = styled.a` @@ -123,10 +149,27 @@ const ActionLink = styled.a` const ActionButton = styled.div` padding: 20px; text-align: center; - background-color: ${({ theme }) => theme.palette3}; + background-color: white; + color: black; + font-weight: 500; + border-radius: 100px; + margin-top: 20px; + font-size: 18px; &:hover { - background-color: ${({ theme }) => theme.palette2}; + background-color: ${({ theme }) => theme.palette1}; cursor: pointer; } ` + +const CryptoXRIllustration = styled.div` + position: absolute; + bottom: 0; + right: 100px; + background-image: url(${cryptoXRIllustration}); + background-size: cover; + background-position: center; + height: 400px; + width: 400px; + transform: scaleX(-1); +` diff --git a/src/components/pages/hackathon/HackathonSectionContainer.tsx b/src/components/pages/hackathon/HackathonSectionContainer.tsx index bf2a6292..378692b6 100644 --- a/src/components/pages/hackathon/HackathonSectionContainer.tsx +++ b/src/components/pages/hackathon/HackathonSectionContainer.tsx @@ -3,7 +3,7 @@ import PageSectionContainer from '../../PageSectionContainer' import { deviceBreakPoints } from '../../../styles/global-style' export default styled(PageSectionContainer)` - padding: var(--spacing-10); + padding: var(--spacing-6) 0; @media ${deviceBreakPoints.mobile} { padding: var(--spacing-12) var(--spacing-4); diff --git a/src/components/pages/hackathon/Texts.tsx b/src/components/pages/hackathon/Texts.tsx index 498f8d6d..ae2fb259 100644 --- a/src/components/pages/hackathon/Texts.tsx +++ b/src/components/pages/hackathon/Texts.tsx @@ -1,22 +1,20 @@ import styled, { css } from 'styled-components' export const Paragraph = styled.p` - opacity: 0.8; white-space: pre-line; line-height: 1.6; ` export const H3 = styled.h3<{ divider?: boolean }>` margin-top: var(--spacing-10); - font-size: 28px !important; + font-size: 32px !important; line-height: 1.2; font-weight: 400; ${({ divider }) => divider && css` - font-size: 32px !important; - padding-bottom: var(--spacing-2); - border-bottom: 1px solid ${({ theme }) => theme.textTertiary}; + font-size: 34px !important; + padding-top: var(--spacing-2); `} ` diff --git a/src/content/hackathon.md b/src/content/cryptoXR.md similarity index 100% rename from src/content/hackathon.md rename to src/content/cryptoXR.md diff --git a/src/images/crypto-xr-cyberpunk.png b/src/images/crypto-xr-cyberpunk.png new file mode 100644 index 00000000..9b69c4ff Binary files /dev/null and b/src/images/crypto-xr-cyberpunk.png differ diff --git a/src/images/crypto-xr-gradient.png b/src/images/crypto-xr-gradient.png new file mode 100644 index 00000000..6369cdd5 Binary files /dev/null and b/src/images/crypto-xr-gradient.png differ diff --git a/src/images/logos/alephium-logo.png b/src/images/logos/alephium-logo.png new file mode 100644 index 00000000..730a1374 Binary files /dev/null and b/src/images/logos/alephium-logo.png differ diff --git a/src/images/logos/cryptoXR-logo.png b/src/images/logos/cryptoXR-logo.png new file mode 100644 index 00000000..dc1ba7c9 Binary files /dev/null and b/src/images/logos/cryptoXR-logo.png differ diff --git a/src/images/logos/lsw3-logo.jpg b/src/images/logos/lsw3-logo.jpg new file mode 100644 index 00000000..aa71653b Binary files /dev/null and b/src/images/logos/lsw3-logo.jpg differ diff --git a/src/pages/hackathon.tsx b/src/pages/crypto-xr.tsx similarity index 82% rename from src/pages/hackathon.tsx rename to src/pages/crypto-xr.tsx index 4f47f224..9e2e1fed 100644 --- a/src/pages/hackathon.tsx +++ b/src/pages/crypto-xr.tsx @@ -6,7 +6,6 @@ import { hackathonTheme, lightTheme } from '../styles/themes' import Seo from '../components/Seo' import HackathonLandingSection from '../components/pages/hackathon/HackathonLandingSection' -import SectionDivider from '../components/SectionDivider' import HackathonInfoSection, { HackathonInfoSectionContentType } from '../components/pages/hackathon/HackathonInfoSection' @@ -16,10 +15,11 @@ import GettingStartedSection, { } from '../components/pages/hackathon/GettingStartedSection' import NavigationMenu from '../components/NavigationMenu' import Footer from '../components/Footer' +import HackathonSectionContainer from '../components/pages/hackathon/HackathonSectionContainer' interface HackathonPageProps extends PageProps { data: { - hackathon: { + cryptoXR: { nodes: { frontmatter: { hackathonInfo: HackathonInfoSectionContentType @@ -32,7 +32,7 @@ interface HackathonPageProps extends PageProps { } const IndexPage = (props: HackathonPageProps) => { - const pageContent = props.data.hackathon.nodes[0].frontmatter + const pageContent = props.data.cryptoXR.nodes[0].frontmatter return ( <> @@ -42,17 +42,11 @@ const IndexPage = (props: HackathonPageProps) => { - - - - - - + + + + - -