Skip to content

Commit 10c60c3

Browse files
committed
minimize text for mobile 2
1 parent ad8e1d4 commit 10c60c3

File tree

3 files changed

+32
-32
lines changed

3 files changed

+32
-32
lines changed

src/components/GetInvolved.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,23 @@ const GetInvolved = ({ className }) => {
2121
{/* Main Content Column */}
2222
<div className="lg:w-2/3">
2323
{/* Section Header */}
24-
<h2 className="flex items-center text-4xl font-extrabold mb-8 text-black">
24+
<h2 className="flex items-center text-2xl sm:text-4xl font-extrabold mb-8 text-black">
2525
<FaHandsHelping className="mr-3 text-green-400" />
2626
Get Involved
2727
</h2>
28-
<p className="text-lg leading-relaxed mb-8">
28+
<p className="text-md sm:text-lg leading-relaxed mb-8">
2929
We invite developers, blockchain enthusiasts, designers, and other
3030
passionate individuals to contribute to our platform. Your
3131
participation can help us enhance the functionality and security
3232
of our ecosystem.
3333
</p>
3434

3535
{/* STAC Merkle Tree CLI Tool Explanation */}
36-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
36+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
3737
<FaTools className="mr-2 text-green-400" />
3838
STAC Merkle Tree CLI Tool
3939
</h3>
40-
<p className="text-lg leading-relaxed mb-6">
40+
<p className="text-md sm:text-lg leading-relaxed mb-6">
4141
The{" "}
4242
<code className="font-mono bg-gray-200 px-1 rounded">
4343
stac-merkle-tree-cli
@@ -48,10 +48,10 @@ const GetInvolved = ({ className }) => {
4848
for your STAC Items, Collections, and Catalogs by encoding them in
4949
a Merkle tree via hashing.
5050
</p>
51-
<p className="text-lg leading-relaxed mb-6">
51+
<p className="text-md sm:text-lg leading-relaxed mb-6">
5252
By integrating this tool into your workflow, you can:
5353
</p>
54-
<ul className="list-disc list-inside text-lg leading-relaxed space-y-2 mb-6">
54+
<ul className="list-disc list-inside text-md sm:text-lgg leading-relaxed space-y-2 mb-6">
5555
<li>
5656
<strong>Automate Integrity Checks:</strong> Streamline the
5757
process of verifying metadata integrity across your STAC
@@ -66,7 +66,7 @@ const GetInvolved = ({ className }) => {
6666
Merkle information across complex catalog structures.
6767
</li>
6868
</ul>
69-
<p className="text-lg leading-relaxed mb-6">
69+
<p className="text-md sm:text-lg leading-relaxed mb-6">
7070
For detailed documentation and usage instructions, visit the{" "}
7171
<a
7272
href="https://github.com/stacchain/stac-merkle-tree-cli"
@@ -80,11 +80,11 @@ const GetInvolved = ({ className }) => {
8080
</p>
8181

8282
{/* Merkle Tree STAC Extension Explanation */}
83-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
83+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
8484
<FaCode className="mr-2 text-green-400" />
8585
Merkle Tree STAC Extension
8686
</h3>
87-
<p className="text-lg leading-relaxed mb-6">
87+
<p className="text-md sm:text-lg leading-relaxed mb-6">
8888
The{" "}
8989
<code className="font-mono bg-gray-200 px-1 rounded">
9090
Merkle Tree STAC Extension
@@ -95,10 +95,10 @@ const GetInvolved = ({ className }) => {
9595
been tampered with, maintaining the reliability and consistency of
9696
your geospatial data.
9797
</p>
98-
<p className="text-lg leading-relaxed mb-6">
98+
<p className="text-md sm:text-lg leading-relaxed mb-6">
9999
By implementing this extension, you can:
100100
</p>
101-
<ul className="list-disc list-inside text-lg leading-relaxed space-y-2 mb-6">
101+
<ul className="list-disc list-inside text-md sm:text-lg leading-relaxed space-y-2 mb-6">
102102
<li>
103103
<strong>Verify Data Authenticity:</strong> Confirm that your
104104
geospatial data remains unaltered.
@@ -112,7 +112,7 @@ const GetInvolved = ({ className }) => {
112112
technology to enhance data integrity and security.
113113
</li>
114114
</ul>
115-
<p className="text-lg leading-relaxed mb-6">
115+
<p className="text-md sm:text-lg leading-relaxed mb-6">
116116
For detailed specifications and implementation guidelines, visit
117117
the{" "}
118118
<a
@@ -127,11 +127,11 @@ const GetInvolved = ({ className }) => {
127127
</p>
128128

129129
{/* Contributor Types */}
130-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
130+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
131131
<FaHandsHelping className="mr-2 text-green-400" />
132132
Who We’re Looking For
133133
</h3>
134-
<ul className="list-disc list-inside text-lg leading-relaxed space-y-2 mb-6">
134+
<ul className="list-disc list-inside text-md sm:text-lg leading-relaxed space-y-2 mb-6">
135135
<li>
136136
<strong>Blockchain Developers:</strong> Skilled in smart
137137
contracts and blockchain architecture to enhance our Merkle

src/components/Intro.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const ProjectIntroduction = ({ className }) => {
139139
<div className="lg:w-1/3 mt-10 lg:mt-0">
140140
{/* Diagram or Additional Information */}
141141
<div className="bg-white p-4 rounded-md shadow-md">
142-
<h3 className="flex items-center text-2xl font-bold mb-4 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-200 hover:bg-gray-300 transition-colors duration-300 shadow">
142+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-4 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-200 hover:bg-gray-300 transition-colors duration-300 shadow">
143143
<FaCode className="mr-2 text-green-400" />
144144
Understanding Merkle Trees
145145
</h3>
@@ -148,7 +148,7 @@ const ProjectIntroduction = ({ className }) => {
148148
alt="Merkle Tree Diagram"
149149
className="w-full h-auto mb-4 rounded-md"
150150
/>
151-
<p className="text-lg leading-relaxed">
151+
<p className="text-md sm:text-lg leading-relaxed">
152152
Merkle trees are a fundamental component of blockchain
153153
technology, providing a way to efficiently verify data
154154
integrity. Each leaf node represents a block of data, and parent

src/components/SmartContracts.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,20 @@ const SmartContractsSection = ({ className }) => {
2222
{/* Main Content Column */}
2323
<div className="lg:w-2/3">
2424
{/* Section Header */}
25-
<h2 className="flex items-center text-4xl font-extrabold mb-8 text-black">
25+
<h2 className="flex items-center text-2xl sm:text-4xl font-extrabold mb-8 text-black">
2626
<FaBullseye className="mr-3 text-green-400" />
2727
Smart Contracts
2828
</h2>
29-
<p className="text-lg leading-relaxed mb-8">
29+
<p className="ttxt-md sm:text-lg leading-relaxed mb-8">
3030
Enabling Secure Access and Economic Incentives
3131
</p>
3232

3333
{/* Smart Contracts Overview */}
34-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
34+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
3535
<FaCode className="mr-2 text-green-400" />
3636
Smart Contracts Overview
3737
</h3>
38-
<p className="text-lg leading-relaxed mb-6">
38+
<p className="text-md sm:text-lg leading-relaxed mb-6">
3939
Smart contracts are self-executing agreements with the terms
4040
directly written into code. In{" "}
4141
<span className="font-bold">stacchain</span>, they play a pivotal
@@ -44,28 +44,28 @@ const SmartContractsSection = ({ className }) => {
4444
</p>
4545

4646
{/* Understanding Smart Contracts */}
47-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
47+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
4848
<FaLock className="mr-2 text-green-400" />
4949
Understanding Smart Contracts
5050
</h3>
51-
<p className="text-lg leading-relaxed mb-6">
51+
<p className="text-md sm:text-lg leading-relaxed mb-6">
5252
A smart contract is a program that runs on the blockchain,
5353
automatically executing predefined actions when certain conditions
5454
are met. This eliminates the need for intermediaries, reduces
5555
costs, and increases efficiency.
5656
</p>
57-
<p className="text-lg leading-relaxed mb-6">
57+
<p className="text-md sm:text-lg leading-relaxed mb-6">
5858
In the context of <span className="font-bold">stacchain</span>,
5959
smart contracts facilitate secure data transactions, manage
6060
permissions, and distribute rewards to data contributors.
6161
</p>
6262

6363
{/* Economic Incentives */}
64-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
64+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
6565
<FaCoins className="mr-2 text-green-400" />
6666
Economic Incentives
6767
</h3>
68-
<p className="text-lg leading-relaxed mb-4">
68+
<p className="text-md sm:text-lg leading-relaxed mb-4">
6969
By integrating smart contracts,{" "}
7070
<span className="font-bold">stacchain</span> creates a token-based
7171
economy where data providers are rewarded for their contributions.
@@ -86,17 +86,17 @@ const SmartContractsSection = ({ className }) => {
8686
providers upon data access.
8787
</li>
8888
</ul>
89-
<p className="text-lg leading-relaxed mb-6">
89+
<p className="text-md sm:text-lg leading-relaxed mb-6">
9090
This system incentivizes high-quality data contributions and
9191
ensures a fair distribution of rewards.
9292
</p>
9393

9494
{/* Secure Access Control */}
95-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
95+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
9696
<FaShieldAlt className="mr-2 text-green-400" />
9797
Secure Access Control
9898
</h3>
99-
<p className="text-lg leading-relaxed mb-4">
99+
<p className="text-md sm:text-lg leading-relaxed mb-4">
100100
Smart contracts also manage access control, ensuring that only
101101
authorized users can access certain data. Features include:
102102
</p>
@@ -115,17 +115,17 @@ const SmartContractsSection = ({ className }) => {
115115
encryption, with keys managed by smart contracts.
116116
</li>
117117
</ul>
118-
<p className="text-lg leading-relaxed mb-6">
118+
<p className="text-md sm:text-lg leading-relaxed mb-6">
119119
These mechanisms enhance security and build trust between data
120120
providers and users.
121121
</p>
122122

123123
{/* Technical Implementation */}
124-
<h3 className="flex items-center text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
124+
<h3 className="flex items-center text-xl sm:text-2xl font-bold mb-6 bg-gray-100 text-black px-3 py-1 rounded-md border-1 border-gray-400 hover:bg-gray-300 transition-colors duration-300 shadow">
125125
<FaCode className="mr-2 text-green-400" />
126126
Technical Implementation
127127
</h3>
128-
<p className="text-lg leading-relaxed mb-4">
128+
<p className="text-md sm:text-lg leading-relaxed mb-4">
129129
The smart contracts in{" "}
130130
<span className="font-bold">stacchain</span> are developed using
131131
industry-standard practices and technologies:
@@ -145,7 +145,7 @@ const SmartContractsSection = ({ className }) => {
145145
audits to ensure robustness and prevent vulnerabilities.
146146
</li>
147147
</ul>
148-
<p className="text-lg leading-relaxed mb-6">
148+
<p className="text-md sm:text-lg leading-relaxed mb-6">
149149
This approach ensures compatibility, security, and scalability.
150150
</p>
151151
</div>

0 commit comments

Comments
 (0)