Skip to content

Commit c95f062

Browse files
PrincessoPrincesso
committed
Updates toOSCA 2025 landing page
1 parent 3e627d2 commit c95f062

File tree

7 files changed

+174
-269
lines changed

7 files changed

+174
-269
lines changed

‎src/components/2024/cloudImages.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
const homeBackground = Object.freeze({
2-
background: "https://res.cloudinary.com/osca/image/upload/v1690190185/osf/2023/bpfh7czlmrrggpwv1xrp.png",
3-
logo: "https://res.cloudinary.com/osca/image/upload/q_auto,f_auto/v1576374332/osf/Logo/SVG/orange.svg",
4-
title: "https://res.cloudinary.com/osca/image/upload/v1690190205/osf/2023/vtrenxfs0ba3hoa5strv.png",
2+
background: "https://res.cloudinary.com/osca/image/upload/v1714174889/0c02a7d7-0217-4b87-b8c5-f8ab9061b2fd.png",
3+
logo: "https://res.cloudinary.com/osca/image/upload/v1576374354/osf/Logo/PNG/white.png",
4+
title: "https://res.cloudinary.com/osca/image/upload/v1714405436/28cf06a2-1a93-4cb7-bf65-d816b5cd790e.png",
55
titleLarge: "https://res.cloudinary.com/osca/image/upload/v1690190358/osf/2023/l2mwdazkcucaxwijq526.png",
6-
northeastArrow: "https://res.cloudinary.com/osca/image/upload/v1690190353/osf/2023/nnf0gztyck3lgcebm9q3.svg"
6+
northeastArrow: "https://res.cloudinary.com/osca/image/upload/v1690190353/osf/2023/nnf0gztyck3lgcebm9q3.svg",
7+
navBackground: "https://res.cloudinary.com/osca/image/upload/e_improve,w_300,h_600,c_thumb,g_auto/v1714175522/61598308-0627-4fec-96a3-62ba607267ac.png",
8+
darkNavBackground: "https://res.cloudinary.com/osca/image/upload/v1714175522/61598308-0627-4fec-96a3-62ba607267ac.png"
79
});
810

911
const aboutus = Object.freeze({

‎src/components/2024/footer.js

+28-93
Original file line numberDiff line numberDiff line change
@@ -23,104 +23,39 @@ config.autoAddCss = false;
2323

2424
function Footer(props) {
2525
return (
26-
<footer className="bg-white">
27-
<div className="container mx-auto px-5 md:px-0 lg:px-0 py-10 lg:py-20 mt-20 lg:mt-16">
28-
<div className="flex sm:flex-row flex-col z-15 justify-between text-sm mb-10 lg:mb-20 text-center md:text-left">
29-
<h1 className="font-humane font-black h-20 lg:h-full text-sship2 md:text-[15rem] lg:text-[25rem] md:mt-24 lg:mt-[155px] uppercase tracking-wide">
30-
Thank You<span className="text-[#F7931E]">.</span>
31-
</h1>
32-
<div className="lg:basis-1/4">
33-
<h1 className="font-clashDisplay font-black p-1 text-xl lg:text-3xl uppercase">🧡 from the osca team</h1>
34-
<div className="z-10 mt-8">
35-
{[
36-
{
37-
route: "https://docs.oscafrica.org/about/community-code-of-conduct",
38-
title: "Code of Conduct"
39-
},
40-
{
41-
route: "/gallery",
42-
title: "Gallery"
43-
},
44-
{
45-
route: "https://oscafrica.org/community",
46-
title: "Community"
47-
},
48-
{
49-
route: "https://opencollective.com/osca",
50-
title: "Open Collective"
51-
},
52-
{
53-
route: "https://blog.oscafrica.org",
54-
title: "Blog"
55-
}
56-
].map((link) => (
57-
<ul className="group m-0 p-0" key={link.title}>
58-
<li className="lg:pr-8 pb-2">
59-
<a
60-
className="group-hover:text-[#F7931E] font-clashDisplay no-underline text-black text-lg"
61-
href={link.route}
62-
>
63-
{link.title}
64-
</a>
65-
</li>
66-
</ul>
67-
))}
68-
</div>
69-
<div className="z-10 mt-8">
70-
{[
71-
{
72-
key: 0,
73-
label: "Email",
74-
faIcon: ["fa", "envelope"],
75-
href: "mailto:[email protected]"
76-
},
77-
{
78-
key: 1,
79-
label: "Twitter",
80-
faIcon: ["fab", "twitter"],
81-
href: "https://twitter.com/oscafest"
82-
},
83-
{
84-
key: 2,
85-
label: "Facebook",
86-
faIcon: ["fab", "facebook-square"],
87-
href: "https://facebook.com/opensourcecommunityafrica"
88-
},
89-
{
90-
key: 3,
91-
label: "Instagram",
92-
faIcon: ["fab", "instagram"],
93-
href: "https://www.instagram.com/oscafrica"
94-
},
95-
{
96-
key: 4,
97-
label: "GitHub",
98-
faIcon: ["fab", "github"],
99-
href: "https://github.com/oscafrica"
100-
},
101-
{
102-
key: 5,
103-
label: "Discord",
104-
faIcon: ["fab", "discord"],
105-
href: "https://discord.gg/open-source-community-africa-676252299093475348"
106-
}
107-
].map((icon) => (
26+
<footer className="w-screen bg-white">
27+
<div className=" bottom-0 z-40 w-full items-center justify-center">
28+
<div className="container flex flex-row justify-between mx-auto text-lg items-center justify-center p-5">
29+
<text className="font-clashDisplay font-extrabold">Oscafest@2025</text>
30+
<div className=" flex justify-between">
31+
<text className="font-clashDisplay font-extrabold p-2 m-2">Connect:</text>
32+
<a
33+
href="https://www.linkedin.com/company/oscafrica/"
34+
className="font-clashDisplay text-gray p-2 m-2"
35+
>
36+
LinkedIn &nbsp;
37+
</a>
38+
<a
39+
href="https://twitter.com/oscafest"
40+
className="font-clashDisplay text-gray p-2 m-2"
41+
>
42+
Twitter &nbsp;
43+
</a>
44+
<a
45+
href="https://www.instagram.com/oscafrica/"
46+
className="font-clashDisplay text-gray p-2 m-2"
47+
>
48+
Instagram &nbsp;
49+
</a>
10850
<a
109-
key={icon.key}
110-
aria-label={icon.label}
111-
className="group p-2 no-underline text-black text-lg border mr-3"
112-
href={icon.href}
51+
href="https://www.youtube.com/@OpenSourceCommunityAfrica"
52+
className="font-clashDisplay text-gray p-2 m-2"
11353
>
114-
<i>
115-
<FontAwesomeIcon icon={icon.faIcon} className="group-hover:text-[#F7931E]" />
116-
</i>
54+
Youtube &nbsp;
11755
</a>
118-
))}
56+
</div>
11957
</div>
12058
</div>
121-
</div>
122-
{props.showGallery ? <Gallery /> : null}
123-
</div>
12459
</footer>
12560
);
12661
}

‎src/components/2024/header.js

+25-62
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { homeBackground } from "./cloudImages";
3+
import { Link } from "gatsby";
34

45
function Register() {
56
return (
@@ -54,76 +55,38 @@ function Register() {
5455
function Header() {
5556
const bgWrapperStyles = {
5657
backgroundImage: `url(${homeBackground.background})`,
57-
backgroundSize: "contain"
58+
backgroundSize: "cover"
5859
};
60+
const navbgWrapperStyles = {
61+
backgroundImage: `url(${homeBackground.navBackground})`,
62+
}
63+
5964
return (
60-
<section id="header">
61-
<div className="center overflow-hidden flex flex-col w-screen object-cover lg:pt-10">
65+
<section id="home">
66+
<div className="center flex flex-col flex-1 w-screen object-cover bg-no-repeat">
6267
<div
63-
className="px-5 md:px-10 lg:px-0 flex flex-col z-30 left-0 w-full min-h-screen lg:pt-16 relative"
6468
style={bgWrapperStyles}
69+
className="flex flex-col z-30 left-0 w-full min-h-screen lg:pt-16 overflow-hidden"
6570
>
66-
<span
67-
className="lg:block w-[400px] lg:w-[600px] h-[400px] lg:h-[600px] z-5 absolute blur-[54px] right-[-170px] top-[-76.95px] lg:top-[-181.36px]" /* left-[175.64px] lg:left-[850.81px] top-[-96.95px] lg:top-[-181.36px] */
68-
style={{
69-
background:
70-
"radial-gradient(34.85% 34.85% at 50% 50%, rgba(245, 185, 255, 0.5) 0%, rgba(121, 255, 191, 0.125) 50.52%, rgba(187, 251, 255, 0.02) 100%)"
71-
}}
72-
></span>
73-
<div className="container mt-10 lg:mt-20 mx-auto lg:px-14 flex justify-between sm:flex-row flex-col mb-6 lg:mb-10 lg:items-center">
74-
<h1 className="font-humane text-white text-4xl lg:text-6xl m-0 uppercase">
75-
OPEN SOURCE FESTIVAL 2023 + SUSTAIN
76-
</h1>
77-
<div className="hidden lg:block">
78-
<Register />
79-
</div>
80-
</div>
81-
<div className="z-10 flex flex-wrap items-center">
82-
<div className="w-full h-full mx-auto container text-white flex flex-col items-center">
83-
<div>
84-
<span
85-
className="lg:block w-[400px] lg:w-[600px] h-[400px] lg:h-[600px] z-10 absolute blur-[100px] left-[-252.98px] lg:left-[-48px] top-[289.83px] lg:top-[477px]"
86-
style={{
87-
background:
88-
"radial-gradient(50% 50% at 50% 50%, rgba(255, 0, 26, 0.41) 0%, rgba(255, 2, 230, 0.27) 50.52%, rgba(212, 0, 255, 0) 100%)"
89-
}}
90-
></span>
91-
<img
92-
alt="OSCAFest Title 2023 Sustainability For Growth"
93-
src={homeBackground.titleLarge}
94-
className="mb-10"
95-
/>
96-
<div className="flex flex-col mb-14 lg:mb-8 uppercase text-right lg:-mt-48 lg:-mr-32">
97-
<div className="font-clashDisplay text-xs md:text-lg lg:text-base tracking-widest m-0 mb-3 text-right">
98-
<h3>June 15TH -</h3>
99-
<h3>17TH.</h3>
100-
</div>
101-
<div className="font-humane font-wide text-4xl md:text-5xl lg:text-5xl m-0 tracking-wider">
102-
<h2>Landmark Event Center,</h2>
103-
<h2>Lagos, Nigeria.</h2>
104-
</div>
105-
</div>
71+
<div className="z-20 flex flex-wrap m-auto items-center">
72+
<div className="w-full h-full sm:mt-36 sm:m-auto sm:my-24 lg:mt-16 m-auto lg:w-7/12 text-white flex flex-col items-center">
73+
<img Alt="OSCAFest Title 2025" src={homeBackground.title} className="mb-5 lg:px-7" />
74+
<div className="flex flex-col w-full ">
75+
<text className="font-clashDisplay text-6xl text-center justify-center tracking-widest text-white0 w-full"> MAY 30TH - JUNE 1ST</text>
10676
</div>
107-
108-
<div className="flex flex-col items-center">
109-
<div className="block lg:hidden w-full mx-auto mb-3">
110-
<Register />
111-
</div>
112-
<div className="mb-20">
77+
<div className="lg:mx-5">
78+
<div className="flex sm:flex-row flex-col mt-5 sm:mb-16 md:mb-10 lg:mb-0 lg:p-0">
79+
<a
80+
href="https://opencollective.com/osca/events/open-source-festival-2023-e17954c1"
81+
className="font-clashDisplay font-bold bg-white p-6 m-4 text-lg text-black tracking-wider mx-5 w-fit flex items-center"
82+
>
83+
Become a Sponsor &nbsp;
84+
</a>
11385
<a
114-
href="/2022"
115-
className="font-clashDisplay font-semibold bg-transparent text-white border-2 border-solid border-white-400 uppercase p-3 text-l tracking-wider w-fit flex items-center"
86+
href="/"
87+
className="font-clashDisplay font-bold bg-yellow-500 m-4 p-6 w-fit flex items-center text-black tracking-wider text-lg mx-5"
11688
>
117-
View Past Events &nbsp; | &nbsp;
118-
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
119-
<path
120-
d="M0.75 13.75L13.25 1.25M13.25 1.25H3.875M13.25 1.25V10.625"
121-
stroke="white"
122-
strokeWidth="1.5"
123-
strokeLinecap="round"
124-
strokeLinejoin="round"
125-
/>
126-
</svg>
89+
Become a Speaker &nbsp;
12790
</a>
12891
</div>
12992
</div>

0 commit comments

Comments
 (0)