Skip to content

Commit d69645b

Browse files
Vaibhav701161Vaibhav701161
authored
Merge pull request #14 from addiiiti/fix/node-modules-cleanup
fix:UI Consistency + Navigation Enhancements
2 parents 2d0601e + 61a2138 commit d69645b

File tree

13 files changed

+422
-376
lines changed

13 files changed

+422
-376
lines changed

‎.gitignore‎

4 Bytes
Binary file not shown.

‎package-lock.json‎

Lines changed: 25 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"react": "^18.3.1",
1818
"react-dom": "^18.3.1",
1919
"react-router-dom": "^7.6.1",
20+
"react-router-hash-link": "^2.4.3",
2021
"react-toastify": "^11.0.5"
2122
},
2223
"devDependencies": {

‎src/components/Cta.tsx‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,58 @@
11
import React from 'react';
22
import { ArrowRight } from 'lucide-react';
3+
import { Link } from 'react-router-dom';
34
import { colors } from '../theme/colors';
45

56
const Cta: React.FC = () => {
67
return (
78
<section className="py-20 bg-[#1E2117] relative">
89
{/* Grid pattern overlay */}
910
<div className="absolute inset-0 opacity-10">
10-
<div className="absolute inset-0" style={{
11-
backgroundImage: 'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
12-
backgroundSize: '44px 44px'
13-
}}></div>
11+
<div
12+
className="absolute inset-0"
13+
style={{
14+
backgroundImage:
15+
'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
16+
backgroundSize: '44px 44px',
17+
}}
18+
/>
1419
</div>
15-
20+
1621
{/* Floating orbs */}
1722
<div className="absolute top-1/4 left-10 w-32 h-32 rounded-full bg-primary-500 opacity-10 blur-3xl animate-float"></div>
18-
<div className="absolute bottom-1/4 right-10 w-40 h-40 rounded-full bg-accent-500 opacity-10 blur-3xl animate-float" style={{ animationDelay: '1s' }}></div>
19-
23+
<div
24+
className="absolute bottom-1/4 right-10 w-40 h-40 rounded-full bg-accent-500 opacity-10 blur-3xl animate-float"
25+
style={{ animationDelay: '1s' }}
26+
></div>
27+
2028
<div className="container mx-auto px-4 md:px-6 relative z-10">
2129
<div className="max-w-4xl mx-auto text-center">
2230
<h2 className="font-['Space_Grotesk'] text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
2331
Ready to Transform Your AI Journey?
2432
</h2>
2533
<p className="text-lg md:text-xl text-neutral-300 mb-12 max-w-2xl mx-auto">
26-
Join our growing community of developers and users building the future of AI. Whether you're creating or implementing AI solutions, AI Studio has everything you need.
34+
Join our growing community of developers and users building the future of AI.
35+
Whether you're creating or implementing AI solutions, AI Studio has everything you need.
2736
</p>
28-
37+
2938
<div className="flex flex-col sm:flex-row gap-4 justify-center">
30-
<a
31-
href="#developer-signup"
32-
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-[#00B39F] rounded-lg hover:bg-[#00a38f] hover:scale-[1.03] transition-transform duration-300"
33-
>
34-
Start Building <ArrowRight size={20} className="ml-2" />
35-
</a>
36-
<a
37-
href="#user-signup"
38-
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white border border-white/30 rounded-lg hover:bg-white/10 hover:scale-[1.03] transition-transform duration-300"
39-
>
40-
Explore AI Models
41-
</a>
42-
</div>
39+
40+
<Link
41+
to="/login"
42+
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-teal-500 rounded-lg hover:bg-teal-600 transition-all duration-200"
43+
>
44+
Start Building <ArrowRight size={18} className="ml-2" />
45+
</Link>
46+
<Link
47+
to="/browse-models"
48+
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white border border-white/30 rounded-lg hover:bg-white/10 transition-all duration-200"
49+
>
50+
Explore AI Models
51+
<ArrowRight size={18} className="ml-2" />
52+
</Link>
53+
</div>
54+
4355

44-
4556
<p className="mt-8 text-neutral-400">
4657
No credit card required. Free tier available for all users.
4758
</p>
@@ -51,4 +62,4 @@ const Cta: React.FC = () => {
5162
);
5263
};
5364

54-
export default Cta;
65+
export default Cta;

‎src/components/ForUsers.tsx‎

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from 'react';
22
import { Search, Filter, Download, ArrowRight, ChevronRight } from 'lucide-react';
33
import { colors } from '../theme/colors';
4+
import { useNavigate } from 'react-router-dom';
45

56
const ForUsers: React.FC = () => {
7+
const navigate = useNavigate();
8+
69
const models = [
710
{
811
name: "TextGenius Pro",
@@ -31,17 +34,21 @@ const ForUsers: React.FC = () => {
3134
<section id="for-users" className="py-20 bg-[#1E2117] relative">
3235
{/* Grid pattern overlay */}
3336
<div className="absolute inset-0 opacity-10">
34-
<div className="absolute inset-0" style={{
35-
backgroundImage: 'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
36-
backgroundSize: '44px 44px'
37-
}}></div>
37+
<div
38+
className="absolute inset-0"
39+
style={{
40+
backgroundImage:
41+
'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
42+
backgroundSize: '44px 44px'
43+
}}
44+
></div>
3845
</div>
3946

4047
<div className="container mx-auto px-4 md:px-6 relative z-10">
4148
<div className="flex flex-col lg:flex-row items-center gap-12">
4249
<div className="lg:w-1/2">
4350
<div className="lg:mr-6">
44-
<div
51+
<div
4552
className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium mb-4"
4653
style={{ backgroundColor: `${colors.secondary[500]}20`, color: colors.secondary[500] }}
4754
>
@@ -54,7 +61,7 @@ const ForUsers: React.FC = () => {
5461
<p className="text-lg text-neutral-300 mb-8">
5562
Browse our extensive marketplace of AI solutions created by world-class developers. Find the right tools to enhance your workflow, boost productivity, and unlock new possibilities.
5663
</p>
57-
64+
5865
<div className="space-y-4 mb-8">
5966
{[
6067
"Advanced search with filters for specific use cases",
@@ -64,80 +71,79 @@ const ForUsers: React.FC = () => {
6471
"Direct support from model creators"
6572
].map((item, index) => (
6673
<div key={index} className="flex items-start">
67-
<div
74+
<div
6875
className="w-5 h-5 rounded-full flex items-center justify-center mt-1 mr-3 flex-shrink-0"
6976
style={{ backgroundColor: `${colors.secondary[500]}20`, color: colors.secondary[500] }}
7077
>
7178
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
72-
<path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
79+
<path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
7380
</svg>
7481
</div>
7582
<p className="text-neutral-300">{item}</p>
7683
</div>
7784
))}
7885
</div>
79-
<div className="flex flex-col sm:flex-row gap-4">
80-
<a
81-
href="#browse-models"
82-
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-[#00B39F] rounded-lg hover:bg-[#00a38f] hover:scale-[1.03] transition-transform duration-300"
83-
>
84-
Browse AI Models
85-
</a>
86-
<a
87-
href="#how-it-works"
88-
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white border border-white/30 rounded-lg hover:bg-white/10 hover:scale-[1.03] transition-transform duration-300"
89-
>
90-
How It Works
91-
<ArrowRight size={16} className="ml-2" />
92-
</a>
93-
</div>
9486

95-
87+
<div className="flex flex-col sm:flex-row gap-4">
88+
<button
89+
onClick={() => navigate('/browse-models')}
90+
className="px-8 py-4 rounded-xl text-lg font-semibold text-neutral-900 dark:text-white flex items-center justify-center bg-teal-500 hover:bg-teal-600 transition-all duration-200"
91+
>
92+
Explore AI Models
93+
</button>
94+
<a
95+
href="#how-it-works"
96+
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white border border-white/30 rounded-lg hover:bg-white/10 hover:scale-[1.03] transition-transform duration-300"
97+
>
98+
How It Works
99+
<ArrowRight size={16} className="ml-2" />
100+
</a>
101+
</div>
96102
</div>
97103
</div>
98-
104+
105+
{/* Visual section */}
99106
<div className="lg:w-1/2">
100107
<div className="relative">
101-
{/* AI model marketplace mockup */}
102108
<div className="bg-neutral-900 rounded-xl p-6 shadow-lg border border-neutral-800">
103109
{/* Search bar */}
104110
<div className="flex items-center mb-6">
105111
<div className="relative flex-grow">
106-
<input
107-
type="text"
108-
placeholder="Search for AI models..."
112+
<input
113+
type="text"
114+
placeholder="Search for AI models..."
109115
className="w-full py-3 pl-10 pr-4 rounded-lg bg-neutral-800 border border-neutral-700 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
110116
/>
111117
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400" size={18} />
112118
</div>
113-
<button
119+
<button
114120
className="ml-3 p-3 rounded-lg border border-neutral-700 text-neutral-300 hover:bg-neutral-800"
115121
aria-label="Filter"
116122
>
117123
<Filter size={18} />
118124
</button>
119125
</div>
120-
126+
121127
{/* Category pills */}
122128
<div className="flex flex-wrap gap-2 mb-6">
123129
{["All Models", "Text Generation", "Image Creation", "Data Analysis", "Voice & Audio", "Code Assistant"].map((category, i) => (
124-
<div
125-
key={i}
130+
<div
131+
key={i}
126132
className={`px-3 py-1 rounded-full text-sm font-medium ${i === 0 ? 'text-white' : 'text-neutral-300 bg-neutral-800 hover:bg-neutral-700'} cursor-pointer transition-colors`}
127133
style={i === 0 ? { backgroundColor: colors.primary[500] } : {}}
128134
>
129135
{category}
130136
</div>
131137
))}
132138
</div>
133-
139+
134140
{/* Featured models */}
135141
<h3 className="text-sm font-medium text-neutral-400 mb-3">TRENDING MODELS</h3>
136142
<div className="space-y-3">
137143
{models.map((model, i) => (
138144
<div key={i} className="p-4 rounded-lg border border-neutral-800 hover:bg-neutral-800 transition-colors">
139145
<div className="flex items-start">
140-
<div
146+
<div
141147
className="w-10 h-10 rounded-lg flex items-center justify-center text-white mr-3 flex-shrink-0"
142148
style={{ backgroundColor: model.color }}
143149
>
@@ -152,21 +158,18 @@ const ForUsers: React.FC = () => {
152158
<div className="flex items-center">
153159
<span className="text-sm font-medium text-white mr-1">{model.rating}</span>
154160
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
155-
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FFD700" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
161+
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FFD700" stroke="#FFD700" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
156162
</svg>
157163
</div>
158164
</div>
159165
<div className="flex items-center justify-between mt-3">
160-
<span
166+
<span
161167
className="px-2 py-1 rounded-md text-xs font-medium"
162168
style={{ backgroundColor: `${model.color}20`, color: model.color }}
163169
>
164170
{model.category}
165171
</span>
166-
<button
167-
className="p-2 rounded-full hover:bg-neutral-700 transition-colors"
168-
aria-label="Install"
169-
>
172+
<button className="p-2 rounded-full hover:bg-neutral-700 transition-colors" aria-label="Install">
170173
<Download size={18} className="text-neutral-300" />
171174
</button>
172175
</div>
@@ -175,25 +178,26 @@ const ForUsers: React.FC = () => {
175178
</div>
176179
))}
177180
</div>
178-
181+
179182
<div className="mt-4 text-center">
180-
<a
181-
href="#view-all"
182-
className="text-sm font-medium inline-flex items-center text-primary-400 hover:text-primary-300"
183-
>
183+
<a href="#view-all" className="text-sm font-medium inline-flex items-center text-primary-400 hover:text-primary-300">
184184
View All Models
185185
<ChevronRight size={16} className="ml-1" />
186186
</a>
187187
</div>
188188
</div>
189-
189+
190190
{/* Decorative elements */}
191-
<div
191+
<div
192192
className="absolute -z-10 w-full h-full bg-gradient-to-r from-primary-500 to-secondary-500 blur-2xl opacity-10 transform -translate-x-4 translate-y-4 rounded-xl"
193193
></div>
194-
<div
194+
<div
195195
className="absolute -bottom-4 -left-4 w-20 h-20 rounded-full"
196-
style={{ background: `linear-gradient(135deg, ${colors.secondary[500]}, ${colors.accent[500]})`, opacity: 0.7, zIndex: -1 }}
196+
style={{
197+
background: `linear-gradient(135deg, ${colors.secondary[500]}, ${colors.accent[500]})`,
198+
opacity: 0.7,
199+
zIndex: -1
200+
}}
197201
></div>
198202
</div>
199203
</div>

0 commit comments

Comments
 (0)