Skip to content

Commit bb8cca4

Browse files
fix(ui): enhance the how it works section layout.
1 parent 40186d3 commit bb8cca4

File tree

3 files changed

+21
-9
lines changed

3 files changed

+21
-9
lines changed

package-lock.json

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/app/dashboard/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ const AcademicHub = () => {
327327
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
328328
{stats.map((stat, index) => (
329329
<div key={index} className="text-center">
330-
<div className="text-4xl lg:text-5xl font-bold text-white mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
330+
<div className="text-4xl lg:text-5xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
331331
{stat.number}
332332
</div>
333333
<div className="text-slate-400 font-medium">{stat.label}</div>

src/app/page.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,37 +132,37 @@ export default function BackgroundBoxesDemo() {
132132
</div>
133133
{/* 3 Steps Section */}
134134
<section className="relative z-20 flex flex-col items-center justify-center w-full py-16 bg-transparent">
135-
<div className="mb-2 text-center text-sm font-mono text-red-500 tracking-widest">HOW IT WORKS</div>
135+
<div className="mb-2 text-center text-sm font-mono text-green-500 tracking-widest">HOW IT WORKS</div>
136136
<h2 className="text-3xl sm:text-5xl font-bold text-white dark:text-white mb-12 text-center">Just 3 steps to get started</h2>
137-
<div className="flex flex-col md:flex-row gap-10 md:gap-20 max-w-5xl mx-auto w-full justify-center items-start">
137+
<div className="w-[90%] lg:w-[75%] mx-auto grid grid-col-1 lg:grid-cols-3 gap-10">
138138
{/* Step 1 */}
139-
<div className="flex flex-row items-start gap-4 w-full md:w-1/3">
139+
<div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
140140
<span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
141141
<UploadCloud size={36} />
142142
</span>
143143
<div>
144144
<h3 className="text-lg font-bold text-white dark:text-white mb-1">1. Upload Your Data</h3>
145-
<p className="text-gray-600 dark:text-gray-300 text-base">Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems.</p>
145+
<p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems.</p>
146146
</div>
147147
</div>
148148
{/* Step 2 */}
149-
<div className="flex flex-row items-start gap-4 w-full md:w-1/3">
149+
<div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
150150
<span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
151151
<FileText size={36} />
152152
</span>
153153
<div>
154154
<h3 className="text-lg font-bold text-white dark:text-white mb-1">2. Click Start</h3>
155-
<p className="text-gray-600 dark:text-gray-300 text-base">Our advanced AI algorithms automatically process and analyze your data, extracting valuable insights and patterns that would be difficult to identify manually.</p>
155+
<p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Our advanced AI algorithms automatically process and analyze your data, extracting valuable insights and patterns that would be difficult to identify manually.</p>
156156
</div>
157157
</div>
158158
{/* Step 3 */}
159-
<div className="flex flex-row items-start gap-4 w-full md:w-1/3">
159+
<div className="flex flex-row items-start gap-4 w-full p-4 group hover:bg-gray-50/5 focus-within:bg-gray-50/5 rounded-lg transition-all duration-300">
160160
<span className="flex items-center justify-center w-16 h-16 rounded-full bg-red-50 text-red-500 text-3xl shrink-0">
161161
<CreditCard size={36} />
162162
</span>
163163
<div>
164164
<h3 className="text-lg font-bold text-white dark:text-white mb-1">3. Get Actionable Insights</h3>
165-
<p className="text-gray-600 dark:text-gray-300 text-base">Receive clear, actionable insights and recommendations based on the AI analysis. Use these insights to make data-driven decisions and improve your business strategies.</p>
165+
<p className="text-gray-500 group-hover:text-gray-400 dark:text-gray-300 text-base">Receive clear, actionable insights and recommendations based on the AI analysis. Use these insights to make data-driven decisions and improve your business strategies.</p>
166166
</div>
167167
</div>
168168
</div>

0 commit comments

Comments
 (0)