Skip to content

Commit 1c3a351

Browse files
slightfootesrakadahStef-GMS
authored
feat: initial website design and branding structure for Flutter AI Circle #2
* Update .gitignore * Fix navbar unnecessary import * Ignore cursor rules * First update of colors to purple look * Introduce gradient to background & main title * Update some wording * Move leftover styling from home page to styles.css * Move navbar styling to styles.css - and improve the button animation * Rename items in navbar * Footer updates * Add faq & its styling * Finalizing, and leaving notes for later * Update naming * Removed reference to Flutteristas website * Added Community to have Flutter Community AI Circle --------- Co-authored-by: Esra Kadah <[email protected]> Co-authored-by: Stef-GMS <[email protected]>
1 parent 88ad4e0 commit 1c3a351

File tree

6 files changed

+312
-204
lines changed

6 files changed

+312
-204
lines changed

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,10 @@ coverage
2929

3030
# dotenv environment variables file
3131
.env
32+
33+
# FVM Version Cache
34+
.fvm/
35+
36+
# Cursor related
37+
.cursor/
38+
cursorrules

‎README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
## Flutter AI Circle Website
2-
3-
## Flutteristas Website
1+
## Flutter Community AI Circle Website
42

53
The site is built with Dart utilizing the [Dart Web Platform](https://dart.dev/web)
64
with the [Web](https://pub.dev/packages/web) package.

‎lib/src/components/footer.dart‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ class Footer extends StatelessComponent {
1414
tag: 'div',
1515
classes: 'footer-grid',
1616
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']),
17+
_footerColumn(
18+
'Community', ['About', 'Mission', 'Join the Circle', 'Start Contributing']),
19+
_footerColumn('Resources', ['Docs', 'Templates', 'Survey', 'Events']),
20+
_footerColumn('Channels', ['YouTube', 'Twitter', 'Forum', 'GitHub']),
21+
_footerColumn('Legal', ['Privacy', 'Terms', 'Code of Conduct', 'Licensing']),
2122
],
2223
),
2324
DomComponent(
@@ -27,7 +28,7 @@ class Footer extends StatelessComponent {
2728
DomComponent(
2829
tag: 'small',
2930
classes: 'copyright',
30-
child: Text('© 2025 Flutter Community. All rights reserved.'),
31+
child: Text('© 2025 Flutter Community AI Circle. All rights reserved.'),
3132
),
3233
DomComponent(
3334
tag: 'div',

‎lib/src/components/home_page.dart‎

Lines changed: 71 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import 'package:jaspr/browser.dart';
2-
import 'package:web/web.dart' hide Text;
32

43
class HomePage extends StatelessComponent {
54
@override
@@ -11,6 +10,7 @@ class HomePage extends StatelessComponent {
1110
_heroSection(),
1211
_featuresSection(),
1312
_ctaSection(),
13+
_faqSection(),
1414
],
1515
);
1616
}
@@ -19,80 +19,35 @@ class HomePage extends StatelessComponent {
1919
return DomComponent(
2020
tag: 'section',
2121
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-
}),
3222
children: [
3323
DomComponent(
3424
tag: 'div',
3525
classes: 'container',
36-
styles: Styles(raw: {
37-
'text-align': 'center',
38-
'max-width': '800px',
39-
'margin': '0 auto',
40-
}),
4126
children: [
4227
DomComponent(
4328
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'),
29+
child: Text('Build Agentic Flutter Experiences'),
5330
),
5431
DomComponent(
5532
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.'),
33+
child: Text(
34+
'A community-powered space for developers building with AI, agentic apps, and next-gen Flutter workflows.'),
6335
),
6436
DomComponent(
6537
tag: 'div',
66-
styles: Styles(raw: {
67-
'display': 'flex',
68-
'gap': '20px',
69-
'justify-content': 'center',
70-
}),
38+
classes: 'buttons-container',
7139
children: [
7240
DomComponent(
7341
tag: 'a',
7442
classes: 'cta_button',
7543
attributes: {'href': '#'},
76-
styles: Styles(raw: {
77-
'font-size': '18px',
78-
}),
79-
child: Text('Start Free Trial'),
44+
child: Text('Explore Builders'),
8045
),
8146
DomComponent(
8247
tag: 'a',
48+
classes: 'secondary-button',
8349
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'),
50+
child: Text('What is Agentic Flutter?'),
9651
),
9752
],
9853
),
@@ -103,41 +58,30 @@ class HomePage extends StatelessComponent {
10358
}
10459

10560
Component _featuresSection() {
61+
// TODO: (maybe/extra) Add scroll-based animation to reveal this section when it enters viewport
10662
return DomComponent(
10763
tag: 'section',
10864
id: 'features',
109-
styles: Styles(raw: {
110-
'padding': '100px 0',
111-
'background-color': 'var(--primary-color)',
112-
}),
11365
children: [
11466
DomComponent(
11567
tag: 'div',
11668
classes: 'container',
11769
children: [
11870
DomComponent(
11971
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'),
72+
classes: 'section-title',
73+
child: Text('Highlights from the Flutter Community AI Circle'),
12674
),
12775
DomComponent(
12876
tag: 'div',
129-
styles: Styles(raw: {
130-
'display': 'grid',
131-
'grid-template-columns': 'repeat(auto-fit, minmax(300px, 1fr))',
132-
'gap': '40px',
133-
}),
77+
classes: 'features-grid',
13478
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.'),
79+
// TODO: Add YouTube video embed for past livestream
80+
_featureCard('Past Livestream', 'Vibe Coding a Card Game with Norbert & Friends'),
81+
// TODO: Add calendar integration or dynamic content for upcoming events - can they add them to their calendar or directly go set a reminder?
82+
_featureCard('Upcoming', 'Humpday Q&A: Agentic Apps Spotlight'),
83+
// TODO: Add link to survey form/ or forms - maybe regular community one idk.
84+
_featureCard('Survey', 'Help shape open-source tooling for AI in Flutter'),
14185
],
14286
),
14387
],
@@ -149,91 +93,98 @@ class HomePage extends StatelessComponent {
14993
Component _featureCard(String title, String description) {
15094
return DomComponent(
15195
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-
},
96+
classes: 'feature-card',
16697
children: [
16798
DomComponent(
16899
tag: 'h3',
169-
styles: Styles(raw: {
170-
'font-size': '24px',
171-
'margin-bottom': '15px',
172-
'color': 'var(--accent-color)',
173-
}),
174100
child: Text(title),
175101
),
176102
DomComponent(
177103
tag: 'p',
178-
styles: Styles(raw: {
179-
'color': 'var(--secondary-text)',
180-
'line-height': '1.6',
181-
}),
182104
child: Text(description),
183105
),
184106
],
185107
);
186108
}
187109

188110
Component _ctaSection() {
111+
// TODO:(maybe/extra) Add scroll-based fade-in animation for this section
189112
return DomComponent(
190113
tag: 'section',
191-
styles: Styles(raw: {
192-
'padding': '80px 0',
193-
'background': 'linear-gradient(135deg, var(--primary-color), #330000)',
194-
}),
114+
classes: 'cta-section',
195115
children: [
196116
DomComponent(
197117
tag: 'div',
198118
classes: 'container',
199-
styles: Styles(raw: {
200-
'text-align': 'center',
201-
}),
202119
children: [
203120
DomComponent(
204121
tag: 'h2',
205-
styles: Styles(raw: {
206-
'font-size': '38px',
207-
'margin-bottom': '20px',
208-
}),
209-
child: Text('Ready to Take the Next Step?'),
122+
classes: 'section-title',
123+
child: Text('Your voice shapes the future of AI in Flutter.'),
210124
),
211125
DomComponent(
212126
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-
}),
219127
child: Text(
220-
'Join thousands of satisfied users who have transformed '
221-
'their digital presence with us.',
128+
'Take our community survey and help us understand how AI is changing the way we code, collaborate, and create.',
222129
),
223130
),
224131
DomComponent(
225132
tag: 'a',
226133
classes: 'cta_button',
227134
attributes: {'href': '#'},
135+
child: Text('Take the Survey'),
136+
),
137+
],
138+
),
139+
],
140+
);
141+
}
142+
143+
Component _faqSection() {
144+
// TODO:(maybe/extra) Implement intersection observer to animate FAQ items sequentially as they come into view
145+
return DomComponent(
146+
tag: 'section',
147+
id: 'faq',
148+
children: [
149+
DomComponent(
150+
tag: 'div',
151+
classes: 'container',
152+
children: [
153+
DomComponent(
154+
tag: 'h2',
155+
classes: 'section-title',
228156
styles: Styles(raw: {
229-
'font-size': '18px',
230-
'padding': '15px 30px',
157+
'text-align': 'center',
158+
'margin-bottom': 'var(--spacing-lg)',
231159
}),
232-
child: Text('Get Started Now'),
160+
child: Text('Frequently Asked Questions'),
233161
),
162+
_faqItem('What is the Flutter Community AI Circle?',
163+
'The Flutter Community AI Circle is a community initiative focused on exploring and developing AI-powered capabilities within Flutter apps. We bring together developers interested in building agentic experiences, leveraging AI models, and advancing Flutter\'s potential in this space.'),
164+
_faqItem('Who can join this community?',
165+
'Anyone interested in the intersection of Flutter and AI is welcome! Whether you\'re a beginner curious about AI capabilities or an experienced developer working on complex agentic apps, this community is for you. We value diverse perspectives and experience levels.'),
166+
_faqItem('How can I contribute to the Flutter Community AI Circle?',
167+
'There are many ways to contribute: participate in our surveys, join live coding sessions, share your projects in our forums, contribute to open-source repositories, or help document best practices. Reach out through any of our channels to get involved!'),
234168
],
235169
),
236170
],
237171
);
238172
}
173+
174+
Component _faqItem(String question, String answer) {
175+
return DomComponent(
176+
tag: 'div',
177+
classes: 'faq-item',
178+
children: [
179+
DomComponent(
180+
tag: 'h3',
181+
child: Text(question),
182+
),
183+
DomComponent(
184+
tag: 'p',
185+
child: Text(answer),
186+
),
187+
],
188+
);
189+
}
239190
}

0 commit comments

Comments
 (0)