Skip to content

Commit 998141a

Browse files
Vaibhav701161Vaibhav701161
authored
Merge pull request #16 from addiiiti/feat/theme-toggle-support
Feat/theme toggle support
2 parents 3aff62c + d1e74ef commit 998141a

20 files changed

+692
-598
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<link rel="icon" type="image/svg+xml" href="/vite.svg" />

‎src/App.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import Header from './components/Header';
23
import Hero from './components/Hero';
34
import Features from './components/Features';
45
import HowItWorks from './components/HowItWorks';
@@ -7,21 +8,17 @@ import ForUsers from './components/ForUsers';
78
import ModelShowcase from './components/ModelShowcase';
89
import Cta from './components/Cta';
910

10-
const Home: React.FC = () => (
11-
<>
11+
const App: React.FC = () => (
12+
<div className="bg-white text-black dark:bg-[#1E2117] dark:text-white transition-colors duration-300">
13+
<Header />
1214
<Hero />
1315
<Features />
1416
<HowItWorks />
1517
<ForDevelopers />
1618
<ForUsers />
1719
<ModelShowcase />
1820
<Cta />
19-
</>
20-
);
21-
22-
const App: React.FC = () => (
23-
<Home />
21+
</div>
2422
);
2523

2624
export default App;
27-

‎src/components/Cta.tsx‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from 'react';
22
import { ArrowRight } from 'lucide-react';
33
import { Link } from 'react-router-dom';
4-
import { colors } from '../theme/colors';
54

65
const Cta: React.FC = () => {
76
return (
8-
<section className="py-20 bg-[#1E2117] relative">
7+
<section className="py-20 bg-white text-black dark:bg-[#1E2117] dark:text-white relative transition-colors duration-300">
98
{/* Grid pattern overlay */}
10-
<div className="absolute inset-0 opacity-10">
9+
<div className="absolute inset-0 opacity-10 pointer-events-none">
1110
<div
1211
className="absolute inset-0"
1312
style={{
@@ -19,41 +18,38 @@ const Cta: React.FC = () => {
1918
</div>
2019

2120
{/* Floating orbs */}
22-
<div className="absolute top-1/4 left-10 w-32 h-32 rounded-full bg-primary-500 opacity-10 blur-3xl animate-float"></div>
21+
<div className="absolute top-1/4 left-10 w-32 h-32 rounded-full bg-teal-400 dark:bg-primary-500 opacity-10 blur-3xl animate-float" />
2322
<div
24-
className="absolute bottom-1/4 right-10 w-40 h-40 rounded-full bg-accent-500 opacity-10 blur-3xl animate-float"
23+
className="absolute bottom-1/4 right-10 w-40 h-40 rounded-full bg-teal-500 dark:bg-accent-500 opacity-10 blur-3xl animate-float"
2524
style={{ animationDelay: '1s' }}
26-
></div>
25+
/>
2726

2827
<div className="container mx-auto px-4 md:px-6 relative z-10">
2928
<div className="max-w-4xl mx-auto text-center">
30-
<h2 className="font-['Space_Grotesk'] text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-white">
29+
<h2 className="font-['Space_Grotesk'] text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-black dark:text-white">
3130
Ready to Transform Your AI Journey?
3231
</h2>
33-
<p className="text-lg md:text-xl text-neutral-300 mb-12 max-w-2xl mx-auto">
32+
<p className="text-lg md:text-xl text-neutral-600 dark:text-neutral-300 mb-12 max-w-2xl mx-auto">
3433
Join our growing community of developers and users building the future of AI.
3534
Whether you're creating or implementing AI solutions, AI Studio has everything you need.
3635
</p>
3736

3837
<div className="flex flex-col sm:flex-row gap-4 justify-center">
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-
38+
<Link
39+
to="/login"
40+
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-teal-500 hover:bg-teal-600 rounded-lg transition-all duration-200"
41+
>
42+
Start Building <ArrowRight size={18} className="ml-2" />
43+
</Link>
44+
<Link
45+
to="/browse-models"
46+
className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-black dark:text-white border border-black/20 dark:border-white/30 rounded-lg hover:bg-black/5 dark:hover:bg-white/10 transition-all duration-200"
47+
>
48+
Explore AI Models <ArrowRight size={18} className="ml-2" />
49+
</Link>
50+
</div>
5551

56-
<p className="mt-8 text-neutral-400">
52+
<p className="mt-8 text-neutral-500 dark:text-neutral-400">
5753
No credit card required. Free tier available for all users.
5854
</p>
5955
</div>

‎src/components/Features.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,28 @@ interface FeatureCardProps {
1111

1212
const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description }) => {
1313
return (
14-
<motion.div
15-
whileInView={{ opacity: 1, y: 0 }}
16-
initial={{ opacity: 0, y: 50 }}
17-
transition={{ duration: 0.6, ease: 'easeOut' }}
18-
viewport={{ once: true, amount: 0.2 }}
19-
whileHover={{
20-
scale: 1.03,
21-
boxShadow: `0 4px 15px ${colors.primary[500]}40`, // 40 = 25% opacity
22-
transition: { type: 'spring', stiffness: 200, damping: 18 },
23-
}}
24-
className="bg-neutral-800 rounded-xl p-6 shadow-lg transition-all border border-neutral-700 cursor-pointer hover:backdrop-blur-md"
25-
>
26-
<div
27-
className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
28-
style={{ backgroundColor: `${colors.primary[500]}20` }}
29-
>
30-
{icon}
31-
</div>
32-
<h3 className="text-lg font-semibold mb-2 text-white">{title}</h3>
33-
<p className="text-neutral-300">{description}</p>
34-
</motion.div>
14+
<motion.div
15+
whileInView={{ opacity: 1, y: 0 }}
16+
initial={{ opacity: 0, y: 50 }}
17+
transition={{ duration: 0.6, ease: 'easeOut' }}
18+
viewport={{ once: true, amount: 0.2 }}
19+
whileHover={{
20+
scale: 1.03,
21+
boxShadow: `0 4px 15px ${colors.primary[500]}40`,
22+
transition: { type: 'spring', stiffness: 200, damping: 18 },
23+
}}
24+
className="bg-[#F3F4F6] dark:bg-neutral-800 rounded-xl p-6 shadow-lg transition-all
25+
border border-neutral-200 dark:border-neutral-700 cursor-pointer hover:backdrop-blur-md"
26+
>
27+
<div
28+
className="w-12 h-12 rounded-lg flex items-center justify-center mb-4"
29+
style={{ backgroundColor: `${colors.primary[500]}20` }}
30+
>
31+
{icon}
32+
</div>
33+
<h3 className="text-lg font-semibold mb-2 text-neutral-900 dark:text-white">{title}</h3>
34+
<p className="text-neutral-700 dark:text-neutral-300">{description}</p>
35+
</motion.div>
3536

3637
);
3738
};
@@ -71,23 +72,24 @@ const Features: React.FC = () => {
7172
];
7273

7374
return (
74-
<section id="features" className="relative py-20 bg-[#1E2117] overflow-hidden">
75+
<section id="features" className="relative py-20 bg-white dark:bg-[#1E2117] transition-colors overflow-hidden">
7576
{/* Background Grid */}
76-
<div className="absolute inset-0 z-0 opacity-10">
77-
<div
78-
className="absolute inset-0"
79-
style={{
80-
backgroundImage: 'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
77+
<div className="absolute inset-0 z-0 opacity-10 pointer-events-none">
78+
<div
79+
className="absolute inset-0"
80+
style={{
81+
backgroundImage:
82+
'linear-gradient(to right, #00B39F 1px, transparent 1px), linear-gradient(to bottom, #00B39F 1px, transparent 1px)',
8183
backgroundSize: '44px 44px'
82-
}}
84+
}}
8385
/>
8486
</div>
8587

8688
{/* Content */}
8789
<div className="relative z-10 container mx-auto px-4 md:px-6">
8890
<div className="text-center mb-16">
89-
<motion.h2
90-
className="font-['Space_Grotesk'] text-3xl md:text-4xl font-bold mb-4 text-white"
91+
<motion.h2
92+
className="font-['Space_Grotesk'] text-3xl md:text-4xl font-bold mb-4 text-neutral-900 dark:text-white"
9193
initial={{ opacity: 0, y: -30 }}
9294
whileInView={{ opacity: 1, y: 0 }}
9395
transition={{ duration: 0.5 }}
@@ -96,7 +98,7 @@ const Features: React.FC = () => {
9698
Powerful Features for AI Innovation
9799
</motion.h2>
98100
<motion.p
99-
className="text-lg text-neutral-300 max-w-2xl mx-auto"
101+
className="text-lg text-neutral-700 dark:text-neutral-300 max-w-2xl mx-auto"
100102
initial={{ opacity: 0 }}
101103
whileInView={{ opacity: 1 }}
102104
transition={{ delay: 0.2, duration: 0.5 }}
@@ -108,7 +110,7 @@ const Features: React.FC = () => {
108110

109111
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
110112
{features.map((feature, index) => (
111-
<FeatureCard
113+
<FeatureCard
112114
key={index}
113115
icon={feature.icon}
114116
title={feature.title}

‎src/components/Footer.tsx‎

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,107 @@
11
import React from 'react';
2-
import { Github, Twitter, Linkedin, Mail } from 'lucide-react';
2+
import { Github, Linkedin, Mail } from 'lucide-react';
33

44
const Footer: React.FC = () => {
55
return (
6-
<footer className="relative bg-[#1E2117] text-neutral-300 py-12 overflow-hidden">
7-
{/* Footer content */}
6+
<footer className="relative bg-white dark:bg-[#1E2117] py-12 overflow-hidden">
87
<div className="relative z-10 container mx-auto px-4 md:px-6">
98
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
109
{/* Logo and description */}
1110
<div className="lg:col-span-2">
1211
<div className="flex items-center mb-4">
13-
<img
14-
src="/iotastudiologo.png"
15-
alt="iotastudio logo"
16-
className="w-8 h-8 mr-2"
17-
/>
18-
<span className="text-2xl font-bold text-white">
12+
<img src="/iotastudiologo.png" alt="iotastudio logo" className="w-8 h-8 mr-2" />
13+
<span className="text-2xl font-bold text-gray-900 dark:text-white">
1914
iotastudio.<span className="text-[#00B39F]">ai</span>
2015
</span>
2116
</div>
22-
<p className="text-neutral-400 mb-6 max-w-md">
17+
<p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md leading-relaxed">
2318
iotastudio.ai is the premier marketplace connecting AI developers with users seeking powerful, customized AI solutions. Build, discover, and integrate cutting-edge AI models.
2419
</p>
2520
<div className="flex space-x-4">
26-
<a href="#twitter" className="text-neutral-400 hover:text-white transition-colors">
21+
<a href="#twitter" className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors">
2722
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227" fill="currentColor" className="w-5 h-5">
2823
<path d="M666.647 662.106L1074.44 182.343h-91.776L624.553 607.761 304.925 182.343H92.581L524.509 745.79 92 1227.01h91.776l385.55-457.575 337.867 457.575H1120z" />
2924
</svg>
3025
</a>
31-
32-
<a href="#github" className="text-neutral-400 hover:text-white transition-colors">
26+
<a href="#github" className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors">
3327
<Github size={20} />
3428
</a>
35-
<a href="#linkedin" className="text-neutral-400 hover:text-white transition-colors">
29+
<a href="#linkedin" className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors">
3630
<Linkedin size={20} />
3731
</a>
38-
<a href="#mail" className="text-neutral-400 hover:text-white transition-colors">
32+
<a href="#mail" className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors">
3933
<Mail size={20} />
4034
</a>
4135
</div>
4236
</div>
4337

44-
{/* Product Links */}
38+
{/* Product */}
4539
<div>
46-
<h3 className="text-white font-semibold mb-4">Product</h3>
40+
<h3 className="text-gray-900 dark:text-white font-semibold mb-4">Product</h3>
4741
<ul className="space-y-3">
48-
<li><a href="#features" className="hover:text-white transition-colors">Features</a></li>
49-
<li><a href="#marketplace" className="hover:text-white transition-colors">Marketplace</a></li>
50-
<li><a href="#enterprise" className="hover:text-white transition-colors">Enterprise</a></li>
51-
<li><a href="#case-studies" className="hover:text-white transition-colors">Case Studies</a></li>
42+
{["Features", "Marketplace", "Enterprise", "Case Studies"].map((item, i) => (
43+
<li key={i}>
44+
<a
45+
href={`#${item.toLowerCase().replace(/\s+/g, '-')}`}
46+
className="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors"
47+
>
48+
{item}
49+
</a>
50+
</li>
51+
))}
5252
</ul>
5353
</div>
5454

55-
{/* Developer Links */}
55+
{/* Developers */}
5656
<div>
57-
<h3 className="text-white font-semibold mb-4">Developers</h3>
57+
<h3 className="text-gray-900 dark:text-white font-semibold mb-4">Developers</h3>
5858
<ul className="space-y-3">
59-
<li><a href="#documentation" className="hover:text-white transition-colors">Documentation</a></li>
60-
<li><a href="#api" className="hover:text-white transition-colors">API Reference</a></li>
61-
<li><a href="#sdk" className="hover:text-white transition-colors">SDK & Tools</a></li>
62-
<li><a href="#community" className="hover:text-white transition-colors">Community</a></li>
63-
<li><a href="#status" className="hover:text-white transition-colors">Status</a></li>
59+
{["Documentation", "API Reference", "SDK & Tools", "Community", "Status"].map((item, i) => (
60+
<li key={i}>
61+
<a
62+
href={`#${item.toLowerCase().replace(/[^a-z]+/g, '-')}`}
63+
className="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors"
64+
>
65+
{item}
66+
</a>
67+
</li>
68+
))}
6469
</ul>
6570
</div>
6671

67-
{/* Company Links */}
72+
{/* Company */}
6873
<div>
69-
<h3 className="text-white font-semibold mb-4">Company</h3>
74+
<h3 className="text-gray-900 dark:text-white font-semibold mb-4">Company</h3>
7075
<ul className="space-y-3">
71-
<li><a href="#about" className="hover:text-white transition-colors">About Us</a></li>
72-
<li><a href="#blog" className="hover:text-white transition-colors">Blog</a></li>
73-
<li><a href="#careers" className="hover:text-white transition-colors">Careers</a></li>
74-
<li><a href="#contact" className="hover:text-white transition-colors">Contact</a></li>
75-
<li><a href="#legal" className="hover:text-white transition-colors">Legal</a></li>
76+
{["About Us", "Blog", "Careers", "Contact", "Legal"].map((item, i) => (
77+
<li key={i}>
78+
<a
79+
href={`#${item.toLowerCase().replace(/\s+/g, '-')}`}
80+
className="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-white transition-colors"
81+
>
82+
{item}
83+
</a>
84+
</li>
85+
))}
7686
</ul>
7787
</div>
7888
</div>
7989

80-
<div className="mt-12 pt-8 border-t border-neutral-800 flex flex-col md:flex-row justify-between items-center">
90+
{/* Bottom */}
91+
<div className="mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-700 flex flex-col md:flex-row justify-between items-center">
8192
<p className="text-neutral-500 text-sm mb-4 md:mb-0">
8293
© {new Date().getFullYear()} iotastudio.ai. All rights reserved.
8394
</p>
8495
<div className="flex space-x-6">
85-
<a href="#terms" className="text-neutral-500 hover:text-white text-sm transition-colors">Terms</a>
86-
<a href="#privacy" className="text-neutral-500 hover:text-white text-sm transition-colors">Privacy</a>
87-
<a href="#cookies" className="text-neutral-500 hover:text-white text-sm transition-colors">Cookies</a>
96+
{["Terms", "Privacy", "Cookies"].map((item, i) => (
97+
<a
98+
key={i}
99+
href={`#${item.toLowerCase()}`}
100+
className="text-neutral-500 hover:text-neutral-800 dark:text-neutral-500 dark:hover:text-white text-sm transition-colors"
101+
>
102+
{item}
103+
</a>
104+
))}
88105
</div>
89106
</div>
90107
</div>

0 commit comments

Comments
 (0)