Skip to content

Commit f236879

Browse files
TanmayBansa1TanmayBansa1
authored
added flathub learnmore page (#79)
* added flathub learnmore page * changed flatpack to flathub, fixed the review shortcomings
1 parent 5f16210 commit f236879

File tree

11 files changed

+257
-7
lines changed

11 files changed

+257
-7
lines changed

public/assets/Cards/Flatpack.png renamed to public/assets/Cards/Flathub.png

File renamed without changes.

‎public/assets/FloatingSVGs/flathub-1.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎public/assets/FloatingSVGs/flathub-2.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎public/assets/TryNowImages/flathub1.png‎

20.1 KB
Loading

‎public/assets/TryNowImages/fpLogoCard2.png‎

46.9 KB
Loading

‎public/assets/TryNowImages/fpLogoCard3.png‎

23.5 KB
Loading

‎src/components/TryNow/Paragraph.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ interface ParagraphProps {
88
title: string;
99
content: string;
1010
button?: string | null;
11+
buttonLink?: string | URL;
1112
links?: { text: string; url: string }[] | null;
1213
}
1314

1415
const Paragraph: React.FC<ParagraphProps> = ({
1516
title,
1617
content,
1718
button,
19+
buttonLink,
1820
links,
1921
}) => {
2022
const contentPoints = content.includes('\n')
@@ -62,7 +64,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
6264
className="text-gray-700 mt-4"
6365
variants={paragraphAnimations.text}
6466
>
65-
<div
67+
<span
6668
dangerouslySetInnerHTML={{
6769
__html: DOMPurify.sanitize(
6870
renderContentWithLinks(content, links),
@@ -78,6 +80,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
7880
className="mt-4 bg-blue-600 text-white font-bold py-2 px-6 rounded-full shadow-lg hover:bg-blue-700 transition"
7981
whileHover="hover"
8082
variants={paragraphAnimations.button}
83+
onClick={() => window.open(buttonLink, '_blank')}
8184
>
8285
{button}
8386
</motion.button>

‎src/constants/TryCardData.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import BootableDriveImg from '/assets/Cards/BootableDrive.png';
55
import DesktopInitializationImg from '/assets/Cards/DesktopInitialization.png';
66
import TrisquelImg from '/assets/Cards/Trisquel.svg';
77
import RaspberryPiImg from '/assets/Cards/RaspberryPi.png';
8-
import FlatpackImg from '/assets/Cards/Flatpack.png';
8+
import FlatHubImg from '/assets/Cards/Flathub.png';
99
import Finance from '/assets/Cards/activity-finance.svg';
1010
import Maze from '/assets/Cards/activity-maze.svg';
1111
import Measure from '/assets/Cards/activity-measure.svg';
@@ -105,14 +105,14 @@ export const TryCardData: CardDataType[] = [
105105
gradientClass: 'bg-gradient-to-r from-red-600 to-green-500',
106106
},
107107
{
108-
title: 'Convenient installation via Flatpak',
108+
title: 'Convenient installation via Flathub',
109109
description:
110110
'Create musical code with the browser based visual programming language Music Blocks',
111-
tryNowText: 'Try Flatpack now!',
111+
tryNowText: 'Try Flathub now!',
112112
tryNowHref: 'https://flathub.org/apps/search?q=sugar%20labs',
113-
learnMoreText: 'Learn more about Flatpack',
114-
learnMoreHref: '',
115-
imagePath: FlatpackImg,
113+
learnMoreText: 'Learn more about Flathub',
114+
learnMoreHref: '/flathub',
115+
imagePath: FlatHubImg,
116116
gradientClass: 'bg-gradient-to-r from-gray-400 to-gray-900',
117117
},
118118
];

‎src/constants/TryNowData/flathubData.ts‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
export const flathubData = {
2+
title: 'Flathub for Sugar Labs',
3+
subtitle: 'Simplified Learning Platform Distribution',
4+
quote: '"Education should be accessible everywhere" – Sugar Labs',
5+
description:
6+
'Flathub enables easy installation and distribution of Sugar Labs educational activities across different Linux platforms.',
7+
images: [
8+
{
9+
src: 'assets/TryNowImages/flathub1.png',
10+
alt: 'Sugar Labs Activities Installation',
11+
},
12+
],
13+
};
14+
15+
export const flathubSections = [
16+
{
17+
title: 'Flathub and Sugar Labs',
18+
content:
19+
'Flathub provides a streamlined way to package and distribute Sugar Labs educational activities. It ensures that learning tools can be easily installed on various Linux distributions, making education more accessible.',
20+
button: 'Explore Sugar Labs Activities',
21+
buttonLink: 'https://flathub.org/apps/search?q=sugar%20labs',
22+
},
23+
];
24+
25+
export const flathubLogoCards = [
26+
{
27+
logo: 'assets/Cards/Flathub.png',
28+
title: 'Educational Activities',
29+
description: [
30+
'Access 34+ educational activities including Paint, Abacus, Music Keyboard, and Story',
31+
],
32+
buttons: [
33+
{
34+
text: 'Browse Activities',
35+
link: 'https://flathub.org/apps/collection/developer/Sugar%20Labs%20Community/1',
36+
target: '_blank',
37+
},
38+
],
39+
},
40+
{
41+
logo: 'assets/TryNowImages/fpLogoCard2.png',
42+
title: 'Easy Installation',
43+
description: [
44+
'Install Sugar Labs applications with just a few clicks on any Linux distribution',
45+
],
46+
buttons: [
47+
{
48+
text: 'Get Started',
49+
link: 'https://flathub.org/apps/search?q=sugar%20labs',
50+
target: '_blank',
51+
},
52+
],
53+
},
54+
{
55+
logo: 'assets/TryNowImages/fpLogoCard3.png',
56+
title: 'Cross-Platform Support',
57+
description: [
58+
'Compatible with multiple Linux distributions and learning environments',
59+
],
60+
buttons: [
61+
{
62+
text: 'Explore Platforms',
63+
link: 'https://flathub.org/setup',
64+
target: '_blank',
65+
},
66+
],
67+
},
68+
];
69+
70+
export const numberedCards1 = [
71+
{
72+
number: '1',
73+
title: 'Install Flathub',
74+
description: 'Add Flathub repository to your Linux system',
75+
borderColor: '#68A6F7',
76+
},
77+
{
78+
number: '2',
79+
title: 'Find Sugar Activities',
80+
description: 'Browse the collection of 34+ educational applications',
81+
borderColor: '#68A6F7',
82+
},
83+
];
84+
85+
export const numberedCards2 = [
86+
{
87+
number: '3',
88+
title: 'Install Activities',
89+
description:
90+
'Download educational tools like Paint, Abacus, and Music Keyboard',
91+
borderColor: '#F8251F',
92+
},
93+
{
94+
number: '4',
95+
title: 'Start Learning',
96+
description: 'Explore interactive educational experiences for all ages',
97+
borderColor: '#F8251F',
98+
},
99+
];

‎src/pages/TryNow/FlatHub.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { motion } from 'framer-motion';
2+
import { fadeInUpAnimation } from '@/styles/Animations.ts';
3+
import Header from '@/sections/Header';
4+
import Footer from '@/sections/Footer';
5+
import FeatureSection from '@/components/TryNow/FeatureSection';
6+
import Paragraph from '@/components/TryNow/Paragraph';
7+
import LogoCards from '@/components/TryNow/LogoCards';
8+
import NumberedCard from '@/components/TryNow/NumberedCard';
9+
import {
10+
flathubData,
11+
flathubSections,
12+
flathubLogoCards,
13+
numberedCards1,
14+
numberedCards2,
15+
} from '@/constants/TryNowData/flathubData';
16+
17+
const FlatHubPage = () => {
18+
return (
19+
<div className="relative">
20+
{/* Floating SVGs */}
21+
<motion.div
22+
className="absolute top-[10vh] md:top-[15vh] left-[5vw] md:left-[35vw] z-[-1] pointer-events-none"
23+
variants={fadeInUpAnimation}
24+
initial="initial"
25+
animate="animate"
26+
>
27+
<img
28+
src="assets/FloatingSVGs/flathub-1.svg"
29+
alt="Flathub SVG 1"
30+
className="w-[clamp(100px,10vw,150px)]"
31+
/>
32+
</motion.div>
33+
34+
<motion.div
35+
className="absolute top-[10vh] sm:top-[65vh] right-[5vw] xs:right-[50vw] z-[-1] pointer-events-none"
36+
variants={fadeInUpAnimation}
37+
initial="initial"
38+
animate="animate"
39+
>
40+
<img
41+
src="assets/FloatingSVGs/flathub-2.svg"
42+
alt="Flathub SVG 2"
43+
className="w-[clamp(40px,9vw,16px)]"
44+
/>
45+
</motion.div>
46+
47+
<Header />
48+
49+
<FeatureSection data={flathubData} />
50+
51+
{flathubSections.map((section, index) => (
52+
<Paragraph
53+
key={index}
54+
title={section.title}
55+
content={section.content}
56+
button={section.button}
57+
buttonLink={section.buttonLink}
58+
/>
59+
))}
60+
61+
<h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
62+
What can you do with <span className="text-[#68A6F7]">Flathub</span>?
63+
</h2>
64+
65+
<div className="flex justify-center">
66+
<LogoCards data={flathubLogoCards} />
67+
</div>
68+
69+
<div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 my-8">
70+
<div className="w-full md:w-1/2">
71+
<h2 className="text-2xl font-semibold mb-4 text-center font-Caveat">
72+
Getting Started
73+
</h2>
74+
<div className="grid grid-cols-1 gap-4 mt-6 p-4">
75+
{numberedCards1.map((card, index) => (
76+
<NumberedCard
77+
key={index}
78+
number={card.number}
79+
title={card.title}
80+
description={card.description}
81+
borderColor={card.borderColor}
82+
/>
83+
))}
84+
</div>
85+
</div>
86+
<div className="w-full md:w-1/2">
87+
<h2 className="text-2xl font-semibold mb-4 text-center font-[Caveat]">
88+
Next Steps
89+
</h2>
90+
<div className="grid grid-cols-1 gap-4 mt-6 p-4">
91+
{numberedCards2.map((card, index) => (
92+
<NumberedCard
93+
key={index}
94+
number={card.number}
95+
title={card.title}
96+
description={card.description}
97+
borderColor={card.borderColor}
98+
/>
99+
))}
100+
</div>
101+
</div>
102+
</div>
103+
104+
<Footer />
105+
</div>
106+
);
107+
};
108+
109+
export default FlatHubPage;

0 commit comments

Comments
 (0)