website branding iteration

.gitignore

@@ -29,3 +29,10 @@ coverage
 
 # dotenv environment variables file
 .env
+
+# FVM Version Cache
+.fvm/
+
+# Cursor related
+.cursor/
+cursorrules

README.md

@@ -1,6 +1,4 @@
-## Flutter AI Circle Website
-
-## Flutteristas Website
+## Flutter Community AI Circle Website
 
 The site is built with Dart utilizing the [Dart Web Platform](https://dart.dev/web) 
 with the [Web](https://pub.dev/packages/web) package.

lib/src/components/footer.dart

@@ -14,10 +14,11 @@ class Footer extends StatelessComponent {
               tag: 'div',
               classes: 'footer-grid',
               children: [
-                _footerColumn('Company', ['About', 'Careers', 'Blog', 'Press']),
-                _footerColumn('Product', ['Features', 'Pricing', 'Integrations', 'FAQ']),
-                _footerColumn('Resources', ['Documentation', 'Guides', 'Support', 'API']),
-                _footerColumn('Legal', ['Privacy', 'Terms', 'Security', 'Cookies']),
+                _footerColumn(
+                    'Community', ['About', 'Mission', 'Join the Circle', 'Start Contributing']),
+                _footerColumn('Resources', ['Docs', 'Templates', 'Survey', 'Events']),
+                _footerColumn('Channels', ['YouTube', 'Twitter', 'Forum', 'GitHub']),
+                _footerColumn('Legal', ['Privacy', 'Terms', 'Code of Conduct', 'Licensing']),
               ],
             ),
             DomComponent(
@@ -27,7 +28,7 @@ class Footer extends StatelessComponent {
                 DomComponent(
                   tag: 'small',
                   classes: 'copyright',
-                  child: Text('© 2025 Flutter Community. All rights reserved.'),
+                  child: Text('© 2025 Flutter Community AI Circle. All rights reserved.'),
                 ),
                 DomComponent(
                   tag: 'div',

lib/src/components/home_page.dart

@@ -1,5 +1,4 @@
 import 'package:jaspr/browser.dart';
-import 'package:web/web.dart' hide Text;
 
 class HomePage extends StatelessComponent {
   @override
@@ -11,6 +10,7 @@ class HomePage extends StatelessComponent {
         _heroSection(),
         _featuresSection(),
         _ctaSection(),
+        _faqSection(),
       ],
     );
   }
@@ -19,80 +19,35 @@ class HomePage extends StatelessComponent {
     return DomComponent(
       tag: 'section',
       classes: 'hero',
-      styles: Styles(raw: {
-        'padding-top': '120px',
-        'min-height': '90vh',
-        'display': 'flex',
-        'flex-direction': 'column',
-        'justify-content': 'center',
-        'background': 'radial-gradient(circle at 50% 50%, #1f1f1f, #000000)',
-        'position': 'relative',
-        'overflow': 'hidden',
-      }),
       children: [
         DomComponent(
           tag: 'div',
           classes: 'container',
-          styles: Styles(raw: {
-            'text-align': 'center',
-            'max-width': '800px',
-            'margin': '0 auto',
-          }),
           children: [
             DomComponent(
               tag: 'h1',
-              styles: Styles(raw: {
-                'font-size': '64px',
-                'margin-bottom': '20px',
-                'background': 'linear-gradient(to right, #ffffff, #ff6700)',
-                '-webkit-background-clip': 'text',
-                'background-clip': 'text',
-                'color': 'transparent',
-              }),
-              child: Text('Unleash Your Digital Potential'),
+              child: Text('Build Agentic Flutter Experiences'),
             ),
             DomComponent(
               tag: 'p',
-              styles: Styles(raw: {
-                'font-size': '20px',
-                'margin-bottom': '40px',
-                'color': 'var(--secondary-text)',
-              }),
-              child: Text('Powerful tools for modern creators. Build, launch, '
-                  'and scale your next big idea with our intuitive platform.'),
+              child: Text(
+                  'A community-powered space for developers building with AI, agentic apps, and next-gen Flutter workflows.'),
             ),
             DomComponent(
               tag: 'div',
-              styles: Styles(raw: {
-                'display': 'flex',
-                'gap': '20px',
-                'justify-content': 'center',
-              }),
+              classes: 'buttons-container',
               children: [
                 DomComponent(
                   tag: 'a',
                   classes: 'cta_button',
                   attributes: {'href': '#'},
-                  styles: Styles(raw: {
-                    'font-size': '18px',
-                  }),
-                  child: Text('Start Free Trial'),
+                  child: Text('Explore Builders'),
                 ),
                 DomComponent(
                   tag: 'a',
+                  classes: 'secondary-button',
                   attributes: {'href': '#'},
-                  styles: Styles(raw: {
-                    'display': 'inline-flex',
-                    'align-items': 'center',
-                    'gap': '8px',
-                    'padding': '12px 24px',
-                    'border': '1px solid var(--secondary-text)',
-                    'border-radius': '4px',
-                    'color': 'var(--text-color)',
-                    'font-weight': '600',
-                    'font-size': '18px',
-                  }),
-                  child: Text('Learn More'),
+                  child: Text('What is Agentic Flutter?'),
                 ),
               ],
             ),
@@ -103,41 +58,30 @@ class HomePage extends StatelessComponent {
   }
 
   Component _featuresSection() {
+    // TODO: (maybe/extra) Add scroll-based animation to reveal this section when it enters viewport
     return DomComponent(
       tag: 'section',
       id: 'features',
-      styles: Styles(raw: {
-        'padding': '100px 0',
-        'background-color': 'var(--primary-color)',
-      }),
       children: [
         DomComponent(
           tag: 'div',
           classes: 'container',
           children: [
             DomComponent(
               tag: 'h2',
-              styles: Styles(raw: {
-                'text-align': 'center',
-                'font-size': '42px',
-                'margin-bottom': '60px',
-              }),
-              child: Text('Why Choose Our Product'),
+              classes: 'section-title',
+              child: Text('Highlights from the Flutter Community AI Circle'),
             ),
             DomComponent(
               tag: 'div',
-              styles: Styles(raw: {
-                'display': 'grid',
-                'grid-template-columns': 'repeat(auto-fit, minmax(300px, 1fr))',
-                'gap': '40px',
-              }),
+              classes: 'features-grid',
               children: [
-                _featureCard('Lightning Fast',
-                    'Experience performance like never before with our optimized platform.'),
-                _featureCard('Highly Secure',
-                    'Your data is protected with enterprise-grade security measures.'),
-                _featureCard('Always Available',
-                    '99.9% uptime guarantee so you\'re always online when it counts.'),
+                // TODO: Add YouTube video embed for past livestream
+                _featureCard('Past Livestream', 'Vibe Coding a Card Game with Norbert & Friends'),
+                // TODO: Add calendar integration or dynamic content for upcoming events - can they add them to their calendar or directly go set a reminder?
+                _featureCard('Upcoming', 'Humpday Q&A: Agentic Apps Spotlight'),
+                // TODO: Add link to survey form/ or forms - maybe regular community one idk.
+                _featureCard('Survey', 'Help shape open-source tooling for AI in Flutter'),
               ],
             ),
           ],
@@ -149,91 +93,98 @@ class HomePage extends StatelessComponent {
   Component _featureCard(String title, String description) {
     return DomComponent(
       tag: 'div',
-      styles: Styles(raw: {
-        'background-color': 'rgba(255, 255, 255, 0.05)',
-        'border-radius': '8px',
-        'padding': '30px',
-        'transition': 'transform 0.3s',
-      }),
-      events: {
-        'mouseover': (event) => (event.currentTarget as HTMLDivElement) //
-            .style
-            .setProperty('transform', 'translateY(-10px)'),
-        'mouseout': (event) => (event.currentTarget as HTMLDivElement) //
-            .style
-            .setProperty('transform', 'translateY(0)'),
-      },
+      classes: 'feature-card',
       children: [
         DomComponent(
           tag: 'h3',
-          styles: Styles(raw: {
-            'font-size': '24px',
-            'margin-bottom': '15px',
-            'color': 'var(--accent-color)',
-          }),
           child: Text(title),
         ),
         DomComponent(
           tag: 'p',
-          styles: Styles(raw: {
-            'color': 'var(--secondary-text)',
-            'line-height': '1.6',
-          }),
           child: Text(description),
         ),
       ],
     );
   }
 
   Component _ctaSection() {
+    // TODO:(maybe/extra)  Add scroll-based fade-in animation for this section
     return DomComponent(
       tag: 'section',
-      styles: Styles(raw: {
-        'padding': '80px 0',
-        'background': 'linear-gradient(135deg, var(--primary-color), #330000)',
-      }),
+      classes: 'cta-section',
       children: [
         DomComponent(
           tag: 'div',
           classes: 'container',
-          styles: Styles(raw: {
-            'text-align': 'center',
-          }),
           children: [
             DomComponent(
               tag: 'h2',
-              styles: Styles(raw: {
-                'font-size': '38px',
-                'margin-bottom': '20px',
-              }),
-              child: Text('Ready to Take the Next Step?'),
+              classes: 'section-title',
+              child: Text('Your voice shapes the future of AI in Flutter.'),
             ),
             DomComponent(
               tag: 'p',
-              styles: Styles(raw: {
-                'font-size': '18px',
-                'max-width': '600px',
-                'margin': '0 auto 40px',
-                'color': 'var(--secondary-text)',
-              }),
               child: Text(
-                'Join thousands of satisfied users who have transformed '
-                'their digital presence with us.',
+                'Take our community survey and help us understand how AI is changing the way we code, collaborate, and create.',
               ),
             ),
             DomComponent(
               tag: 'a',
               classes: 'cta_button',
               attributes: {'href': '#'},
+              child: Text('Take the Survey'),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Component _faqSection() {
+    // TODO:(maybe/extra) Implement intersection observer to animate FAQ items sequentially as they come into view
+    return DomComponent(
+      tag: 'section',
+      id: 'faq',
+      children: [
+        DomComponent(
+          tag: 'div',
+          classes: 'container',
+          children: [
+            DomComponent(
+              tag: 'h2',
+              classes: 'section-title',
               styles: Styles(raw: {
-                'font-size': '18px',
-                'padding': '15px 30px',
+                'text-align': 'center',
+                'margin-bottom': 'var(--spacing-lg)',
               }),
-              child: Text('Get Started Now'),
+              child: Text('Frequently Asked Questions'),
             ),
+            _faqItem('What is the Flutter Community AI Circle?',
+                '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.'),
+            _faqItem('Who can join this community?',
+                '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.'),
+            _faqItem('How can I contribute to the Flutter Community AI Circle?',
+                '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!'),
           ],
         ),
       ],
     );
   }
+
+  Component _faqItem(String question, String answer) {
+    return DomComponent(
+      tag: 'div',
+      classes: 'faq-item',
+      children: [
+        DomComponent(
+          tag: 'h3',
+          child: Text(question),
+        ),
+        DomComponent(
+          tag: 'p',
+          child: Text(answer),
+        ),
+      ],
+    );
+  }
 }