From db149dac0d1ab161fdca0d5a4b3905e50c2906c8 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:20:49 +0200 Subject: [PATCH 01/15] Update .gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index dedf483..7a42d4a 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,6 @@ coverage # dotenv environment variables file .env + +# FVM Version Cache +.fvm/ \ No newline at end of file From 1446ab0d71b3a659ad30ae5d11fbfc3b2c3e8d85 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:20:59 +0200 Subject: [PATCH 02/15] Fix navbar unnecessary import --- lib/src/components/navbar.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/components/navbar.dart b/lib/src/components/navbar.dart index f5df5a6..ee8b5e0 100644 --- a/lib/src/components/navbar.dart +++ b/lib/src/components/navbar.dart @@ -1,5 +1,4 @@ import 'package:jaspr/browser.dart'; -import 'package:web/web.dart' hide Text; class Navbar extends StatelessComponent { @override From aafbcaca1f3ba307a9286b00aa565d395a3219c5 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:22:31 +0200 Subject: [PATCH 03/15] Ignore cursor rules --- .gitignore | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 7a42d4a..af0a69b 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,8 @@ coverage .env # FVM Version Cache -.fvm/ \ No newline at end of file +.fvm/ + +# Cursor related +.cursor/ +cursorrules \ No newline at end of file From 85a30feba88604249f285150454cdb6c372cf13d Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:33:22 +0200 Subject: [PATCH 04/15] First update of colors to purple look --- web/styles.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/web/styles.css b/web/styles.css index a6004c7..94b6a24 100644 --- a/web/styles.css +++ b/web/styles.css @@ -18,11 +18,12 @@ body > * { } :root { - --primary-color: #0f0f0f; - --accent-color: #ff6700; - --text-color: #ffffff; - --secondary-text: #b3b3b3; - --background: #000000; + --primary-color: #181822; + --accent-color: #ab57ff; + --accent-gradient: linear-gradient(90deg, #ab57ff, #4e9fff); + --text-color: #e6e6f2; + --secondary-text: #8888aa; + --background: #0a0a0f; } body { @@ -89,7 +90,7 @@ a:hover { .hero h1 { font-size: 64px; margin-bottom: 20px; - background: linear-gradient(to right, #ffffff, #ff6700); + background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; @@ -144,7 +145,7 @@ a:hover { /* Footer styles */ footer { - background-color: #0a0a0a; + background-color: #11111a; padding: 60px 0 30px; } From 3e054afa6eb9ffbb9fba8104fc807655f4ed8b04 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:36:56 +0200 Subject: [PATCH 05/15] Introduce gradient to background & main title --- lib/src/components/home_page.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index 975e128..04d705b 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -25,7 +25,7 @@ class HomePage extends StatelessComponent { 'display': 'flex', 'flex-direction': 'column', 'justify-content': 'center', - 'background': 'radial-gradient(circle at 50% 50%, #1f1f1f, #000000)', + 'background': 'radial-gradient(circle at 50% 50%, #1f1f2e, #0a0a0f)', 'position': 'relative', 'overflow': 'hidden', }), @@ -44,7 +44,7 @@ class HomePage extends StatelessComponent { styles: Styles(raw: { 'font-size': '64px', 'margin-bottom': '20px', - 'background': 'linear-gradient(to right, #ffffff, #ff6700)', + 'background': 'var(--accent-gradient)', '-webkit-background-clip': 'text', 'background-clip': 'text', 'color': 'transparent', @@ -190,7 +190,7 @@ class HomePage extends StatelessComponent { tag: 'section', styles: Styles(raw: { 'padding': '80px 0', - 'background': 'linear-gradient(135deg, var(--primary-color), #330000)', + 'background': 'linear-gradient(135deg, #1f1f2e, #32164f)', }), children: [ DomComponent( From 4a8e00654990914684cfec9cbbec2b7afc939057 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:45:58 +0200 Subject: [PATCH 06/15] Update some wording --- lib/src/components/home_page.dart | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index 04d705b..bbeacac 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -49,7 +49,7 @@ class HomePage extends StatelessComponent { 'background-clip': 'text', 'color': 'transparent', }), - child: Text('Unleash Your Digital Potential'), + child: Text('Build Agentic Flutter Experiences'), ), DomComponent( tag: 'p', @@ -58,8 +58,8 @@ class HomePage extends StatelessComponent { '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', @@ -76,7 +76,7 @@ class HomePage extends StatelessComponent { styles: Styles(raw: { 'font-size': '18px', }), - child: Text('Start Free Trial'), + child: Text('Explore Builders'), ), DomComponent( tag: 'a', @@ -92,7 +92,7 @@ class HomePage extends StatelessComponent { 'font-weight': '600', 'font-size': '18px', }), - child: Text('Learn More'), + child: Text('What is Agentic Flutter?'), ), ], ), From e7b9f6498bee2f04857695a3f5029c9195df7e9b Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 01:49:06 +0200 Subject: [PATCH 07/15] Move leftover styling from home page to styles.css --- lib/src/components/home_page.dart | 110 ++---------------------- web/styles.css | 138 ++++++++++++++++++++++-------- 2 files changed, 109 insertions(+), 139 deletions(-) diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index bbeacac..f4ea462 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -19,79 +19,34 @@ 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%, #1f1f2e, #0a0a0f)', - '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': 'var(--accent-gradient)', - '-webkit-background-clip': 'text', - 'background-clip': 'text', - 'color': 'transparent', - }), child: Text('Build Agentic Flutter Experiences'), ), DomComponent( tag: 'p', - styles: Styles(raw: { - 'font-size': '20px', - 'margin-bottom': '40px', - 'color': 'var(--secondary-text)', - }), 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('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('What is Agentic Flutter?'), ), ], @@ -106,10 +61,6 @@ class HomePage extends StatelessComponent { return DomComponent( tag: 'section', id: 'features', - styles: Styles(raw: { - 'padding': '100px 0', - 'background-color': 'var(--primary-color)', - }), children: [ DomComponent( tag: 'div', @@ -117,20 +68,11 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', - styles: Styles(raw: { - 'text-align': 'center', - 'font-size': '42px', - 'margin-bottom': '60px', - }), child: Text('Why Choose Our Product'), ), 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.'), @@ -149,36 +91,14 @@ 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), ), ], @@ -188,34 +108,18 @@ class HomePage extends StatelessComponent { Component _ctaSection() { return DomComponent( tag: 'section', - styles: Styles(raw: { - 'padding': '80px 0', - 'background': 'linear-gradient(135deg, #1f1f2e, #32164f)', - }), + 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?'), ), 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.', @@ -225,10 +129,6 @@ class HomePage extends StatelessComponent { tag: 'a', classes: 'cta_button', attributes: {'href': '#'}, - styles: Styles(raw: { - 'font-size': '18px', - 'padding': '15px 30px', - }), child: Text('Get Started Now'), ), ], diff --git a/web/styles.css b/web/styles.css index 94b6a24..5878c7f 100644 --- a/web/styles.css +++ b/web/styles.css @@ -24,6 +24,14 @@ body > * { --text-color: #e6e6f2; --secondary-text: #8888aa; --background: #0a0a0f; + --card-bg: rgba(255, 255, 255, 0.05); + --shadow-color: rgba(171, 87, 255, 0.3); + --border-radius: 4px; + --spacing-sm: 8px; + --spacing-md: 20px; + --spacing-lg: 40px; + --spacing-xl: 60px; + --transition-speed: 0.3s; } body { @@ -36,37 +44,62 @@ body { .container { max-width: 1200px; margin: 0 auto; - padding: 0 20px; + padding: 0 var(--spacing-md); } a { color: var(--text-color); text-decoration: none; - transition: color 0.3s; + transition: color var(--transition-speed); } a:hover { color: var(--accent-color); } +/* Button styles */ .cta_button { display: inline-block; background-color: var(--accent-color); color: var(--text-color); padding: 12px 24px; - border-radius: 4px; + border-radius: var(--border-radius); font-weight: 600; - transition: background-color 0.3s; + transition: all var(--transition-speed); + border: 1px solid transparent; } .cta_button:hover { - background-color: var(--text-color); - color: var(--accent-color) + background-color: transparent; + color: var(--accent-color); + border-color: var(--accent-color); + box-shadow: 0 0 15px var(--shadow-color); + transform: translateY(-2px); +} + +.secondary-button { + display: inline-flex; + align-items: center; + gap: var(--spacing-sm); + padding: 12px 24px; + border: 1px solid var(--secondary-text); + border-radius: var(--border-radius); + color: var(--text-color); + font-weight: 600; + font-size: 18px; + transition: all var(--transition-speed); +} + +.secondary-button:hover { + border-color: var(--accent-color); + color: var(--accent-color); + box-shadow: 0 0 10px rgba(171, 87, 255, 0.2); + transform: translateY(-2px); } /* Home page styles */ .home-page { - /* No specific styles in the snippet */ + width: 100%; } /* Hero section */ @@ -76,7 +109,7 @@ a:hover { display: flex; flex-direction: column; justify-content: center; - background: radial-gradient(circle at 50% 50%, #1f1f1f, #000000); + background: radial-gradient(circle at 50% 50%, var(--primary-color), var(--background)); position: relative; overflow: hidden; } @@ -89,7 +122,7 @@ a:hover { .hero h1 { font-size: 64px; - margin-bottom: 20px; + margin-bottom: var(--spacing-md); background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; @@ -98,13 +131,13 @@ a:hover { .hero p { font-size: 20px; - margin-bottom: 40px; + margin-bottom: var(--spacing-lg); color: var(--secondary-text); } .hero .buttons-container { display: flex; - gap: 20px; + gap: var(--spacing-md); justify-content: center; } @@ -112,38 +145,75 @@ a:hover { font-size: 18px; } -.hero .secondary-button { - 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; -} - /* Features section */ #features { - padding: 100px 0; + padding: var(--spacing-xl) 0; background-color: var(--primary-color); } #features h2 { text-align: center; font-size: 42px; - margin-bottom: 60px; + margin-bottom: var(--spacing-xl); } -#features .features-grid { +.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 40px; + gap: var(--spacing-lg); } -/* Footer styles */ +.feature-card { + background-color: var(--card-bg); + border-radius: 8px; + padding: 30px; + transition: all var(--transition-speed); + border: 1px solid transparent; +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); + border-color: var(--accent-color); + box-shadow: 0 0 20px var(--shadow-color); +} + +.feature-card h3 { + font-size: 24px; + margin-bottom: 15px; + color: var(--accent-color); +} + +.feature-card p { + color: var(--secondary-text); + line-height: 1.6; +} +/* CTA section */ +.cta-section { + padding: 80px 0; + background: linear-gradient(135deg, var(--primary-color), #32164f); + text-align: center; +} + +.cta-section h2 { + font-size: 38px; + margin-bottom: var(--spacing-md); +} + +.cta-section p { + font-size: 18px; + max-width: 600px; + margin: 0 auto var(--spacing-lg); + color: var(--secondary-text); +} + +.cta-section .cta_button { + font-size: 18px; + padding: 15px 30px; +} + +/* Footer styles */ footer { background-color: #11111a; padding: 60px 0 30px; @@ -152,8 +222,8 @@ footer { footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 40px; - margin-bottom: 40px; + gap: var(--spacing-lg); + margin-bottom: var(--spacing-lg); } footer .footer-bottom { @@ -163,7 +233,7 @@ footer .footer-bottom { justify-content: space-between; align-items: center; flex-wrap: wrap; - gap: 20px; + gap: var(--spacing-md); } footer .copyright { @@ -173,12 +243,12 @@ footer .copyright { footer .social-links { display: flex; - gap: 20px; + gap: var(--spacing-md); } footer h3 { font-size: 18px; - margin-bottom: 20px; + margin-bottom: var(--spacing-md); color: var(--text-color); } @@ -194,7 +264,7 @@ footer li { footer a { color: var(--secondary-text); - transition: color 0.3s; + transition: color var(--transition-speed); } footer a:hover { From 9ddcdb8e0b2f755bdf484a8757dd9c3c9cd197a4 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:02:33 +0200 Subject: [PATCH 08/15] Move navbar styling to styles.css - and improve the button animation --- lib/src/components/home_page.dart | 1 - lib/src/components/navbar.dart | 30 ++----------- web/styles.css | 71 +++++++++++++++++++++++++++---- 3 files changed, 66 insertions(+), 36 deletions(-) diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index f4ea462..5f09164 100644 --- a/lib/src/components/home_page.dart +++ b/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 diff --git a/lib/src/components/navbar.dart b/lib/src/components/navbar.dart index ee8b5e0..3ae4ac0 100644 --- a/lib/src/components/navbar.dart +++ b/lib/src/components/navbar.dart @@ -5,43 +5,21 @@ class Navbar extends StatelessComponent { Iterable build(BuildContext context) sync* { yield DomComponent( tag: 'nav', - styles: Styles(raw: { - 'position': 'fixed', - 'top': '0', - 'left': '0', - 'right': '0', - 'z-index': '100', - 'padding': '20px 0', - 'background-color': 'rgba(0, 0, 0, 0.8)', - 'backdrop-filter': 'blur(10px)', - }), + classes: 'navbar', children: [ DomComponent( tag: 'div', classes: 'container', - styles: Styles(raw: { - 'display': 'flex', - 'justify-content': 'space-between', - 'align-items': 'center', - }), children: [ DomComponent( tag: 'a', attributes: {'href': '#'}, - styles: Styles(raw: { - 'font-size': '24px', - 'font-weight': 'bold', - 'color': 'var(--accent-color)', - }), + classes: 'navbar-brand', child: RawText('Flutter Community
AI Circle'), ), DomComponent( tag: 'div', classes: 'nav-links', - styles: Styles(raw: { - 'display': 'flex', - 'gap': '30px', - }), children: [ _navLink('Home', '#'), _navLink('Features', '#features'), @@ -66,9 +44,7 @@ class Navbar extends StatelessComponent { return DomComponent( tag: 'a', attributes: {'href': href}, - styles: Styles(raw: { - 'font-weight': '500', - }), + classes: 'nav-link', child: Text(text), ); } diff --git a/web/styles.css b/web/styles.css index 5878c7f..e8f63b0 100644 --- a/web/styles.css +++ b/web/styles.css @@ -60,22 +60,28 @@ a:hover { /* Button styles */ .cta_button { display: inline-block; - background-color: var(--accent-color); - color: var(--text-color); + background: var(--accent-gradient); + color: #fff; /* High readability */ padding: 12px 24px; border-radius: var(--border-radius); font-weight: 600; transition: all var(--transition-speed); - border: 1px solid transparent; + position: relative; + border: none; + box-shadow: 0 0 8px var(--shadow-color); + text-align: center; } .cta_button:hover { - background-color: transparent; - color: var(--accent-color); - border-color: var(--accent-color); - box-shadow: 0 0 15px var(--shadow-color); - transform: translateY(-2px); + background: var(--accent-gradient); + color: #fff; + box-shadow: 0 0 12px var(--shadow-color), 0 0 2px var(--accent-color); + transform: translateY(-2px) scale(1.03); + filter: brightness(1.1); } + + + .secondary-button { display: inline-flex; @@ -270,3 +276,52 @@ footer a { footer a:hover { color: var(--accent-color); } + +/* Navbar styles */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + padding: 20px 0; + background-color: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(10px); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar-brand { + font-size: 24px; + font-weight: bold; + color: var(--accent-color); +} + +.nav-links { + display: flex; + gap: 30px; +} + +.nav-link { + font-weight: 500; + position: relative; +} + +.nav-link::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + bottom: -4px; + left: 0; + background: var(--accent-gradient); + transition: width var(--transition-speed); +} + +.nav-link:hover::after { + width: 100%; +} From e4ae36cf46675e73bab8d9e0beb39a6ad21af9c6 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:23:59 +0200 Subject: [PATCH 09/15] Rename items in navbar --- lib/src/components/navbar.dart | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/src/components/navbar.dart b/lib/src/components/navbar.dart index 3ae4ac0..aa64c59 100644 --- a/lib/src/components/navbar.dart +++ b/lib/src/components/navbar.dart @@ -22,17 +22,17 @@ class Navbar extends StatelessComponent { classes: 'nav-links', children: [ _navLink('Home', '#'), - _navLink('Features', '#features'), - _navLink('Pricing', '#pricing'), - _navLink('About', '#about'), - _navLink('Contact', '#contact'), + _navLink('Forum', '#forum'), + _navLink('YouTube', '#youtube'), + _navLink('GitHub', '#github'), + _navLink('Docs', '#docs'), ], ), DomComponent( tag: 'a', classes: 'cta_button', attributes: {'href': '#'}, - child: Text('Join the Circle'), + child: Text('Take the Survey'), ), ], ), From 32b330ee5a8a2be955f8a0c41322174d3fb08df6 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:24:06 +0200 Subject: [PATCH 10/15] Footer updates --- lib/src/components/footer.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/components/footer.dart b/lib/src/components/footer.dart index 4eb3d20..b357477 100644 --- a/lib/src/components/footer.dart +++ b/lib/src/components/footer.dart @@ -14,10 +14,10 @@ class Footer extends StatelessComponent { tag: 'div', classes: 'footer-grid', children: [ - _footerColumn('Company', ['About', 'Careers', 'Blog', 'Press']), - _footerColumn('Product', ['Features', 'Pricing', 'Integrations', 'FAQ']), + _footerColumn('Community', ['About', 'Careers', 'Blog', 'Press']), _footerColumn('Resources', ['Documentation', 'Guides', 'Support', 'API']), - _footerColumn('Legal', ['Privacy', 'Terms', 'Security', 'Cookies']), + _footerColumn('Channels', ['Discord', 'Twitter', 'YouTube', 'GitHub']), + _footerColumn('About', ['Team', 'Partners', 'Privacy', 'Terms']), ], ), DomComponent( From 31128e4bf97ad9fac460744a35e71c62652035c5 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:24:24 +0200 Subject: [PATCH 11/15] Add faq & its styling --- lib/src/components/home_page.dart | 68 ++++++++++++++++++++++++++----- web/styles.css | 32 +++++++++++++++ 2 files changed, 89 insertions(+), 11 deletions(-) diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index 5f09164..56a983d 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -10,6 +10,7 @@ class HomePage extends StatelessComponent { _heroSection(), _featuresSection(), _ctaSection(), + _faqSection(), ], ); } @@ -67,18 +68,18 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', - child: Text('Why Choose Our Product'), + child: Text('Highlights from the Flutter AI Circle'), ), DomComponent( tag: 'div', 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 + _featureCard('Upcoming', 'Humpday Q&A: Agentic Apps Spotlight'), + // TODO: Add link to survey form + _featureCard('Survey', 'Help shape open-source tooling for AI in Flutter'), ], ), ], @@ -115,24 +116,69 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', - child: Text('Ready to Take the Next Step?'), + child: Text('Your voice shapes the future of AI in Flutter.'), ), DomComponent( tag: 'p', 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('Get Started Now'), + child: Text('Take the Survey'), ), ], ), ], ); } + + Component _faqSection() { + return DomComponent( + tag: 'section', + id: 'faq', + children: [ + DomComponent( + tag: 'div', + classes: 'container', + children: [ + DomComponent( + tag: 'h2', + styles: Styles(raw: { + 'text-align': 'center', + 'margin-bottom': 'var(--spacing-lg)', + }), + child: Text('Frequently Asked Questions'), + ), + _faqItem('What is the Flutter AI Circle?', + 'The Flutter 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 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), + ), + ], + ); + } } diff --git a/web/styles.css b/web/styles.css index e8f63b0..93c95d5 100644 --- a/web/styles.css +++ b/web/styles.css @@ -325,3 +325,35 @@ footer a:hover { .nav-link:hover::after { width: 100%; } + +/* FAQ Section */ +#faq { + padding: var(--spacing-xl) 0; + background-color: var(--background); +} + +.faq-item { + margin-bottom: var(--spacing-md); + padding: var(--spacing-md); + background-color: rgba(255, 255, 255, 0.03); + border-radius: var(--border-radius); + border-left: 2px solid var(--accent-color); + transition: all var(--transition-speed); +} + +.faq-item:hover { + transform: translateX(5px); + box-shadow: 0 0 10px rgba(171, 87, 255, 0.1); +} + +.faq-item h3 { + margin-bottom: var(--spacing-sm); + color: var(--accent-color); + font-size: 20px; +} + +.faq-item p { + color: var(--secondary-text); + line-height: 1.6; + margin: 0; +} From 7565909b1b47c8b44d9e3967742860066053c2e7 Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:28:52 +0200 Subject: [PATCH 12/15] Finalizing, and leaving notes for later --- lib/src/components/footer.dart | 9 +++++---- lib/src/components/home_page.dart | 10 ++++++++-- web/styles.css | 22 ++++++++++++++++++++-- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/lib/src/components/footer.dart b/lib/src/components/footer.dart index b357477..2101a1a 100644 --- a/lib/src/components/footer.dart +++ b/lib/src/components/footer.dart @@ -14,10 +14,11 @@ class Footer extends StatelessComponent { tag: 'div', classes: 'footer-grid', children: [ - _footerColumn('Community', ['About', 'Careers', 'Blog', 'Press']), - _footerColumn('Resources', ['Documentation', 'Guides', 'Support', 'API']), - _footerColumn('Channels', ['Discord', 'Twitter', 'YouTube', 'GitHub']), - _footerColumn('About', ['Team', 'Partners', 'Privacy', 'Terms']), + _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( diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index 56a983d..d8708cb 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -58,6 +58,7 @@ 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', @@ -68,6 +69,7 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', + classes: 'section-title', child: Text('Highlights from the Flutter AI Circle'), ), DomComponent( @@ -76,9 +78,9 @@ class HomePage extends StatelessComponent { children: [ // 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 + // 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 + // TODO: Add link to survey form/ or forms - maybe regular community one idk. _featureCard('Survey', 'Help shape open-source tooling for AI in Flutter'), ], ), @@ -106,6 +108,7 @@ class HomePage extends StatelessComponent { } Component _ctaSection() { + // TODO:(maybe/extra) Add scroll-based fade-in animation for this section return DomComponent( tag: 'section', classes: 'cta-section', @@ -116,6 +119,7 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', + classes: 'section-title', child: Text('Your voice shapes the future of AI in Flutter.'), ), DomComponent( @@ -137,6 +141,7 @@ class HomePage extends StatelessComponent { } Component _faqSection() { + // TODO:(maybe/extra) Implement intersection observer to animate FAQ items sequentially as they come into view return DomComponent( tag: 'section', id: 'faq', @@ -147,6 +152,7 @@ class HomePage extends StatelessComponent { children: [ DomComponent( tag: 'h2', + classes: 'section-title', styles: Styles(raw: { 'text-align': 'center', 'margin-bottom': 'var(--spacing-lg)', diff --git a/web/styles.css b/web/styles.css index 93c95d5..07de524 100644 --- a/web/styles.css +++ b/web/styles.css @@ -333,17 +333,23 @@ footer a:hover { } .faq-item { - margin-bottom: var(--spacing-md); + margin-bottom: var(--spacing-lg); padding: var(--spacing-md); background-color: rgba(255, 255, 255, 0.03); border-radius: var(--border-radius); border-left: 2px solid var(--accent-color); transition: all var(--transition-speed); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .faq-item:hover { transform: translateX(5px); - box-shadow: 0 0 10px rgba(171, 87, 255, 0.1); + box-shadow: 0 0 15px rgba(171, 87, 255, 0.15); + border-left: 4px solid var(--accent-color); +} + +.faq-item:last-child { + margin-bottom: 0; } .faq-item h3 { @@ -357,3 +363,15 @@ footer a:hover { line-height: 1.6; margin: 0; } + +/* Animation Hints - for future implementation */ +.section-title { + /* + TODO: Implement scroll-based animations + Add fade-in and slide-up animation when section comes into viewport + Example: + .section-title.visible { + animation: fadeSlideUp 0.8s ease forwards; + } + */ +} From 8137f9437cf7b08f632ea4c8f7cbf70eb40faaac Mon Sep 17 00:00:00 2001 From: Esra Kadah <87121319+esrakadah@users.noreply.github.com> Date: Tue, 22 Apr 2025 02:57:24 +0200 Subject: [PATCH 13/15] Update naming --- lib/src/components/footer.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/components/footer.dart b/lib/src/components/footer.dart index 2101a1a..f753ce8 100644 --- a/lib/src/components/footer.dart +++ b/lib/src/components/footer.dart @@ -28,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', From eaccafe229462eef51ced277c42fb9aca3c87f20 Mon Sep 17 00:00:00 2001 From: Stef-GMS Date: Mon, 21 Apr 2025 19:22:16 -0700 Subject: [PATCH 14/15] Removed reference to Flutteristas website --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 8b09365..d79242c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ ## Flutter AI Circle Website -## Flutteristas 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. From f714ac59df5d8953217714fb1bc1499137309dce Mon Sep 17 00:00:00 2001 From: Stef-GMS Date: Mon, 21 Apr 2025 19:23:08 -0700 Subject: [PATCH 15/15] Added Community to have Flutter Community AI Circle --- README.md | 3 +-- lib/src/components/home_page.dart | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d79242c..b290f19 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -## Flutter AI Circle 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. diff --git a/lib/src/components/home_page.dart b/lib/src/components/home_page.dart index d8708cb..bc5b67f 100644 --- a/lib/src/components/home_page.dart +++ b/lib/src/components/home_page.dart @@ -70,7 +70,7 @@ class HomePage extends StatelessComponent { DomComponent( tag: 'h2', classes: 'section-title', - child: Text('Highlights from the Flutter AI Circle'), + child: Text('Highlights from the Flutter Community AI Circle'), ), DomComponent( tag: 'div', @@ -159,11 +159,11 @@ class HomePage extends StatelessComponent { }), child: Text('Frequently Asked Questions'), ), - _faqItem('What is the Flutter AI Circle?', - 'The Flutter 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('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 AI Circle?', + _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!'), ], ),