Skip to content

Commit 88ad4e0

Browse files
slightfootslightfoot
committed
feat: basic website design
1 parent 4d12b51 commit 88ad4e0

File tree

11 files changed

+655
-28
lines changed

11 files changed

+655
-28
lines changed

‎lib/ai_builders_circle.dart‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎lib/fc_ai_circle.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export 'src/components/app.dart';
2+
export 'src/site/site.dart';

‎lib/src/components/app.dart‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import 'package:jaspr/browser.dart';
2+
import 'home_page.dart';
3+
import 'navbar.dart';
4+
import 'footer.dart';
5+
6+
class App extends StatelessComponent {
7+
@override
8+
Iterable<Component> build(BuildContext context) sync* {
9+
yield DomComponent(
10+
tag: 'div',
11+
classes: 'app-wrapper',
12+
children: [
13+
Navbar(),
14+
HomePage(),
15+
Footer(),
16+
],
17+
);
18+
}
19+
}

‎lib/src/components/footer.dart‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import 'package:jaspr/browser.dart';
2+
3+
class Footer extends StatelessComponent {
4+
@override
5+
Iterable<Component> build(BuildContext context) sync* {
6+
yield DomComponent(
7+
tag: 'footer',
8+
children: [
9+
DomComponent(
10+
tag: 'div',
11+
classes: 'container',
12+
children: [
13+
DomComponent(
14+
tag: 'div',
15+
classes: 'footer-grid',
16+
children: [
17+
_footerColumn('Company', ['About', 'Careers', 'Blog', 'Press']),
18+
_footerColumn('Product', ['Features', 'Pricing', 'Integrations', 'FAQ']),
19+
_footerColumn('Resources', ['Documentation', 'Guides', 'Support', 'API']),
20+
_footerColumn('Legal', ['Privacy', 'Terms', 'Security', 'Cookies']),
21+
],
22+
),
23+
DomComponent(
24+
tag: 'div',
25+
classes: 'footer-bottom',
26+
children: [
27+
DomComponent(
28+
tag: 'small',
29+
classes: 'copyright',
30+
child: Text('© 2025 Flutter Community. All rights reserved.'),
31+
),
32+
DomComponent(
33+
tag: 'div',
34+
classes: 'social-links',
35+
children: [
36+
SocialLink(label: 'Twitter', href: '#'),
37+
SocialLink(label: 'LinkedIn', href: '#'),
38+
SocialLink(label: 'Instagram', href: '#'),
39+
SocialLink(label: 'GitHub', href: '#'),
40+
],
41+
),
42+
],
43+
),
44+
],
45+
),
46+
],
47+
);
48+
}
49+
50+
Component _footerColumn(String title, List<String> links) {
51+
return DomComponent(
52+
tag: 'div',
53+
children: [
54+
DomComponent(
55+
tag: 'h3',
56+
child: Text(title),
57+
),
58+
DomComponent(
59+
tag: 'ul',
60+
children: [
61+
for (var link in links) //
62+
DomComponent(
63+
tag: 'li',
64+
child: DomComponent(
65+
tag: 'a',
66+
attributes: {'href': '#'},
67+
child: Text(link),
68+
),
69+
),
70+
],
71+
),
72+
],
73+
);
74+
}
75+
}
76+
77+
class SocialLink extends StatelessComponent {
78+
const SocialLink({
79+
super.key,
80+
required this.href,
81+
required this.label,
82+
});
83+
84+
final String href;
85+
final String label;
86+
87+
@override
88+
Iterable<Component> build(BuildContext context) sync* {
89+
yield DomComponent(
90+
tag: 'a',
91+
attributes: {'href': href},
92+
child: Text(label),
93+
);
94+
}
95+
}

‎lib/src/components/home_page.dart‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import 'package:jaspr/browser.dart';
2+
import 'package:web/web.dart' hide Text;
3+
4+
class HomePage extends StatelessComponent {
5+
@override
6+
Iterable<Component> build(BuildContext context) sync* {
7+
yield DomComponent(
8+
tag: 'div',
9+
classes: 'home-page',
10+
children: [
11+
_heroSection(),
12+
_featuresSection(),
13+
_ctaSection(),
14+
],
15+
);
16+
}
17+
18+
Component _heroSection() {
19+
return DomComponent(
20+
tag: 'section',
21+
classes: 'hero',
22+
styles: Styles(raw: {
23+
'padding-top': '120px',
24+
'min-height': '90vh',
25+
'display': 'flex',
26+
'flex-direction': 'column',
27+
'justify-content': 'center',
28+
'background': 'radial-gradient(circle at 50% 50%, #1f1f1f, #000000)',
29+
'position': 'relative',
30+
'overflow': 'hidden',
31+
}),
32+
children: [
33+
DomComponent(
34+
tag: 'div',
35+
classes: 'container',
36+
styles: Styles(raw: {
37+
'text-align': 'center',
38+
'max-width': '800px',
39+
'margin': '0 auto',
40+
}),
41+
children: [
42+
DomComponent(
43+
tag: 'h1',
44+
styles: Styles(raw: {
45+
'font-size': '64px',
46+
'margin-bottom': '20px',
47+
'background': 'linear-gradient(to right, #ffffff, #ff6700)',
48+
'-webkit-background-clip': 'text',
49+
'background-clip': 'text',
50+
'color': 'transparent',
51+
}),
52+
child: Text('Unleash Your Digital Potential'),
53+
),
54+
DomComponent(
55+
tag: 'p',
56+
styles: Styles(raw: {
57+
'font-size': '20px',
58+
'margin-bottom': '40px',
59+
'color': 'var(--secondary-text)',
60+
}),
61+
child: Text('Powerful tools for modern creators. Build, launch, '
62+
'and scale your next big idea with our intuitive platform.'),
63+
),
64+
DomComponent(
65+
tag: 'div',
66+
styles: Styles(raw: {
67+
'display': 'flex',
68+
'gap': '20px',
69+
'justify-content': 'center',
70+
}),
71+
children: [
72+
DomComponent(
73+
tag: 'a',
74+
classes: 'cta_button',
75+
attributes: {'href': '#'},
76+
styles: Styles(raw: {
77+
'font-size': '18px',
78+
}),
79+
child: Text('Start Free Trial'),
80+
),
81+
DomComponent(
82+
tag: 'a',
83+
attributes: {'href': '#'},
84+
styles: Styles(raw: {
85+
'display': 'inline-flex',
86+
'align-items': 'center',
87+
'gap': '8px',
88+
'padding': '12px 24px',
89+
'border': '1px solid var(--secondary-text)',
90+
'border-radius': '4px',
91+
'color': 'var(--text-color)',
92+
'font-weight': '600',
93+
'font-size': '18px',
94+
}),
95+
child: Text('Learn More'),
96+
),
97+
],
98+
),
99+
],
100+
),
101+
],
102+
);
103+
}
104+
105+
Component _featuresSection() {
106+
return DomComponent(
107+
tag: 'section',
108+
id: 'features',
109+
styles: Styles(raw: {
110+
'padding': '100px 0',
111+
'background-color': 'var(--primary-color)',
112+
}),
113+
children: [
114+
DomComponent(
115+
tag: 'div',
116+
classes: 'container',
117+
children: [
118+
DomComponent(
119+
tag: 'h2',
120+
styles: Styles(raw: {
121+
'text-align': 'center',
122+
'font-size': '42px',
123+
'margin-bottom': '60px',
124+
}),
125+
child: Text('Why Choose Our Product'),
126+
),
127+
DomComponent(
128+
tag: 'div',
129+
styles: Styles(raw: {
130+
'display': 'grid',
131+
'grid-template-columns': 'repeat(auto-fit, minmax(300px, 1fr))',
132+
'gap': '40px',
133+
}),
134+
children: [
135+
_featureCard('Lightning Fast',
136+
'Experience performance like never before with our optimized platform.'),
137+
_featureCard('Highly Secure',
138+
'Your data is protected with enterprise-grade security measures.'),
139+
_featureCard('Always Available',
140+
'99.9% uptime guarantee so you\'re always online when it counts.'),
141+
],
142+
),
143+
],
144+
),
145+
],
146+
);
147+
}
148+
149+
Component _featureCard(String title, String description) {
150+
return DomComponent(
151+
tag: 'div',
152+
styles: Styles(raw: {
153+
'background-color': 'rgba(255, 255, 255, 0.05)',
154+
'border-radius': '8px',
155+
'padding': '30px',
156+
'transition': 'transform 0.3s',
157+
}),
158+
events: {
159+
'mouseover': (event) => (event.currentTarget as HTMLDivElement) //
160+
.style
161+
.setProperty('transform', 'translateY(-10px)'),
162+
'mouseout': (event) => (event.currentTarget as HTMLDivElement) //
163+
.style
164+
.setProperty('transform', 'translateY(0)'),
165+
},
166+
children: [
167+
DomComponent(
168+
tag: 'h3',
169+
styles: Styles(raw: {
170+
'font-size': '24px',
171+
'margin-bottom': '15px',
172+
'color': 'var(--accent-color)',
173+
}),
174+
child: Text(title),
175+
),
176+
DomComponent(
177+
tag: 'p',
178+
styles: Styles(raw: {
179+
'color': 'var(--secondary-text)',
180+
'line-height': '1.6',
181+
}),
182+
child: Text(description),
183+
),
184+
],
185+
);
186+
}
187+
188+
Component _ctaSection() {
189+
return DomComponent(
190+
tag: 'section',
191+
styles: Styles(raw: {
192+
'padding': '80px 0',
193+
'background': 'linear-gradient(135deg, var(--primary-color), #330000)',
194+
}),
195+
children: [
196+
DomComponent(
197+
tag: 'div',
198+
classes: 'container',
199+
styles: Styles(raw: {
200+
'text-align': 'center',
201+
}),
202+
children: [
203+
DomComponent(
204+
tag: 'h2',
205+
styles: Styles(raw: {
206+
'font-size': '38px',
207+
'margin-bottom': '20px',
208+
}),
209+
child: Text('Ready to Take the Next Step?'),
210+
),
211+
DomComponent(
212+
tag: 'p',
213+
styles: Styles(raw: {
214+
'font-size': '18px',
215+
'max-width': '600px',
216+
'margin': '0 auto 40px',
217+
'color': 'var(--secondary-text)',
218+
}),
219+
child: Text(
220+
'Join thousands of satisfied users who have transformed '
221+
'their digital presence with us.',
222+
),
223+
),
224+
DomComponent(
225+
tag: 'a',
226+
classes: 'cta_button',
227+
attributes: {'href': '#'},
228+
styles: Styles(raw: {
229+
'font-size': '18px',
230+
'padding': '15px 30px',
231+
}),
232+
child: Text('Get Started Now'),
233+
),
234+
],
235+
),
236+
],
237+
);
238+
}
239+
}

0 commit comments

Comments
 (0)