Dev

lib/app/core/responsive/breakpoints.dart

@@ -0,0 +1,6 @@
+class Breakpoints {
+  static const mobileBreakpoint = 650;
+  static const tabletMedium = 1000;
+  static const showOnlyLearn = 320;
+  static const showFlutterButton = 500;
+}

lib/app/core/theme/app_themes.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+import 'tokens/app_colors.dart';
+
+class AppThemes {
+  static final primary = ThemeData(
+    primarySwatch: AppColors.blue,
+    scaffoldBackgroundColor: AppColors.vampireBlack,
+  );
+}

lib/app/core/theme/tokens/app_colors.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+// Get color name from: https://www.color-name.com/hex/
+class AppColors {
+  static const lotion = Color(0XFFFAFAFA);
+  static const cultured = Color(0XFFF5F5F5);
+  static const grayX11 = Color(0XFFBDBDBD);
+  static const graniteGray = Color(0XFF616161);
+  static const buttonBlue = Color(0xFF2196F3);
+  static const vampireBlack = Color(0XFF0A0A0A);
+  static const black87 = Color(0XDD000000);
+  static const sonicSilver = Color(0XFF757575);
+  static const white = Color(0XFFFFFFFF);
+
+  // Flutter Config for `Colors.blue` and use `AppColors.blue`
+  static const int _bluePrimaryValue = 0xFF2196F3;
+  static const MaterialColor blue = MaterialColor(
+    _bluePrimaryValue,
+    <int, Color>{
+      50: Color(0xFFE3F2FD),
+      100: Color(0xFFBBDEFB),
+      200: Color(0xFF90CAF9),
+      300: Color(0xFF64B5F6),
+      400: Color(0xFF42A5F5),
+      500: Color(_bluePrimaryValue),
+      600: Color(0xFF1E88E5),
+      700: Color(0xFF1976D2),
+      800: Color(0xFF1565C0),
+      900: Color(0xFF0D47A1),
+    },
+  );
+}

lib/app/core/values/app_assets.dart

@@ -0,0 +1,5 @@
+class AppAssets {
+  static const logo = 'assets/fu.png';
+  static const course = 'assets/app.jpg';
+  static const app = 'assets/app.jpg';
+}

lib/app/core/values/app_texts.dart

@@ -0,0 +1,26 @@
+class AppTexts {
+  static const app = 'FLUdemy | Courses';
+  static const fludemy = 'FLUdemy';
+  static const learn = 'Learn';
+  static const flutter = 'Flutter';
+  static const loginSpaced = '  Log in  ';
+  static const signUpSpaced = '  Sign up  ';
+  static const responsivenessInTheFlutterPlatforms =
+      'Responsiveness in the Flutter | '
+      'Mobile, Tablet, Web and Desktop';
+  static const responsiveness = 'Responsiveness';
+  static const danielCiolfiAndFelipeSales = 'Daniel Ciolfi and Felipe Sales';
+  static const price22dot90 = 'R\$22,90';
+  static const letsLearnFlutterWithTheseCourses =
+      'Let\'s learn Flutter with these courses';
+  static const theFlutterIsAmazing = 'The Flutter is amazing! '
+      'Create amazing things with the Flutter Framework.';
+  static const typeSomeSearchHere = 'Type some search here';
+  static const searchForAnythingSpaced = ' Search for anything... ';
+  static const moreThan100kDevelopers = '+100.000 developers';
+  static const awesomeExclamation = 'Awesome!';
+  static const certificateOfComplete = 'Certificate of Complete';
+  static const sensationalExclamation = 'Sensational!';
+  static const fullAccess = 'Full Access';
+  static const anywhereExclamation = 'Anywhere!';
+}

lib/app/fludemy_app.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+import 'package:device_preview/device_preview.dart';
+
+import 'package:fludemy/app/core/theme/app_themes.dart';
+import 'package:fludemy/app/core/values/app_texts.dart';
+import 'package:fludemy/app/pages/home/home_page.dart';
+
+class FludemyApp extends StatelessWidget {
+  const FludemyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: AppTexts.app,
+      debugShowCheckedModeBanner: false,
+      theme: AppThemes.primary,
+      builder: DevicePreview.appBuilder,
+      locale: DevicePreview.locale(context),
+      home: const HomePage(),
+    );
+  }
+}

lib/pages/home/home_page.dart → lib/app/pages/home/home_page.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 
-import '../../breakpoints.dart';
+import 'package:fludemy/app/core/responsive/breakpoints.dart';
+
 import 'widgets/appbar/mobile_app_bar.dart';
 import 'widgets/appbar/web_app_bar.dart';
-import 'widgets/sections/advantages_section.dart';
+import 'widgets/sections/advantages_section/advantages_section.dart';
 import 'widgets/sections/course_section.dart';
 import 'widgets/sections/top_section.dart';
 
@@ -15,7 +16,7 @@ class HomePage extends StatelessWidget {
     return LayoutBuilder(
       builder: (context, constraints) {
         return Scaffold(
-          appBar: constraints.maxWidth < mobileBreakpoint
+          appBar: constraints.maxWidth < Breakpoints.mobileBreakpoint
               ? const PreferredSize(
                   preferredSize: Size(double.infinity, 56),
                   child: MobileAppBar(),
@@ -24,8 +25,9 @@ class HomePage extends StatelessWidget {
                   preferredSize: Size(double.infinity, 80),
                   child: WebAppBar(),
                 ),
-          drawer:
-              constraints.maxWidth < mobileBreakpoint ? const Drawer() : null,
+          drawer: constraints.maxWidth < Breakpoints.mobileBreakpoint
+              ? const Drawer()
+              : null,
           body: Align(
             alignment: Alignment.topCenter,
             child: ConstrainedBox(

lib/pages/home/widgets/appbar/mobile_app_bar.dart → lib/app/pages/home/widgets/appbar/mobile_app_bar.dart

@@ -1,18 +1,21 @@
 import 'package:flutter/material.dart';
 
+import 'package:fludemy/app/core/theme/tokens/app_colors.dart';
+import 'package:fludemy/app/core/values/app_assets.dart';
+
 class MobileAppBar extends StatelessWidget {
   const MobileAppBar({super.key});
 
   @override
   Widget build(BuildContext context) {
     return AppBar(
       title: Image.asset(
-        'assets/fu.png',
+        AppAssets.logo,
         height: 50,
         width: 50,
       ),
       centerTitle: true,
-      backgroundColor: Colors.black,
+      backgroundColor: AppColors.black87,
       actions: [
         IconButton(
           icon: const Icon(Icons.search),

lib/pages/home/widgets/appbar/web_app_bar.dart → lib/app/pages/home/widgets/appbar/web_app_bar.dart

@@ -1,5 +1,9 @@
 import 'package:flutter/material.dart';
 
+import 'package:fludemy/app/core/theme/tokens/app_colors.dart';
+import 'package:fludemy/app/core/values/app_assets.dart';
+import 'package:fludemy/app/core/values/app_texts.dart';
+
 import 'web_app_bar_responsive_content.dart';
 
 class WebAppBar extends StatelessWidget {
@@ -8,17 +12,17 @@ class WebAppBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AppBar(
-      backgroundColor: Colors.black,
+      backgroundColor: AppColors.black87,
       toolbarHeight: 80,
       title: Row(
         children: [
           Image.asset(
-            'assets/fu.png',
+            AppAssets.logo,
             height: 40,
             width: 40,
           ),
           const Text(
-            'FLUdemy',
+            AppTexts.fludemy,
             style: TextStyle(fontWeight: FontWeight.w800),
           ),
           const SizedBox(width: 24),
@@ -37,17 +41,17 @@ class WebAppBar extends StatelessWidget {
                 side: MaterialStateProperty.resolveWith<BorderSide>(
                   (states) {
                     return const BorderSide(
-                      color: Colors.white,
+                      color: AppColors.white,
                       width: 1.5,
                     );
                   },
                 ),
               ),
               child: const Text(
-                '  Log in  ',
+                AppTexts.loginSpaced,
                 style: TextStyle(
                   fontWeight: FontWeight.w600,
-                  color: Colors.white,
+                  color: AppColors.white,
                 ),
               ),
             ),
@@ -58,11 +62,11 @@ class WebAppBar extends StatelessWidget {
             child: ElevatedButton(
               onPressed: () {},
               style: ElevatedButton.styleFrom(
-                foregroundColor: Colors.black,
-                backgroundColor: Colors.white,
+                foregroundColor: AppColors.black87,
+                backgroundColor: AppColors.white,
               ),
               child: const Text(
-                '  Sign up  ',
+                AppTexts.signUpSpaced,
                 style: TextStyle(fontWeight: FontWeight.w800),
               ),
             ),

lib/pages/home/widgets/appbar/web_app_bar_responsive_content.dart → lib/app/pages/home/widgets/appbar/web_app_bar_responsive_content.dart

@@ -1,5 +1,9 @@
 import 'package:flutter/material.dart';
 
+import 'package:fludemy/app/core/responsive/breakpoints.dart';
+import 'package:fludemy/app/core/theme/tokens/app_colors.dart';
+import 'package:fludemy/app/core/values/app_texts.dart';
+
 class WebAppBarResponsiveContent extends StatelessWidget {
   const WebAppBarResponsiveContent({super.key});
 
@@ -14,26 +18,26 @@ class WebAppBarResponsiveContent extends StatelessWidget {
                 child: Container(
                   height: 45,
                   decoration: BoxDecoration(
-                    color: Colors.grey[100],
+                    color: AppColors.cultured,
                     border: Border.all(
-                      color: Colors.grey[600]!,
+                      color: AppColors.sonicSilver,
                     ),
                   ),
                   child: Row(
                     children: [
                       const SizedBox(width: 8),
                       IconButton(
-                        icon: Icon(
+                        icon: const Icon(
                           Icons.search,
-                          color: Colors.grey[700],
+                          color: AppColors.graniteGray,
                         ),
                         onPressed: () {},
                       ),
                       const Expanded(
                         child: TextField(
                           decoration: InputDecoration(
                             border: InputBorder.none,
-                            hintText: ' Search for anything... ',
+                            hintText: AppTexts.searchForAnythingSpaced,
                             isCollapsed: true,
                           ),
                         ),
@@ -42,29 +46,29 @@ class WebAppBarResponsiveContent extends StatelessWidget {
                   ),
                 ),
               ),
-              if (constraints.maxWidth >= 320) ...[
+              if (constraints.maxWidth >= Breakpoints.showOnlyLearn) ...[
                 const SizedBox(width: 24),
                 TextButton(
                   onPressed: () {},
-                  child: Text(
-                    'Learn',
+                  child: const Text(
+                    AppTexts.learn,
                     style: TextStyle(
                       fontWeight: FontWeight.w600,
-                      color: Colors.grey[100],
+                      color: AppColors.cultured,
                       letterSpacing: 1.1,
                     ),
                   ),
                 ),
               ],
-              if (constraints.maxWidth >= 500) ...[
+              if (constraints.maxWidth >= Breakpoints.showFlutterButton) ...[
                 const SizedBox(width: 8),
                 TextButton(
                   onPressed: () {},
-                  child: Text(
-                    'Flutter',
+                  child: const Text(
+                    AppTexts.flutter,
                     style: TextStyle(
                       fontWeight: FontWeight.w600,
-                      color: Colors.grey[100],
+                      color: AppColors.cultured,
                       letterSpacing: 1.1,
                     ),
                   ),

lib/app/pages/home/widgets/sections/advantages_section/advantages_section.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+
+import 'package:fludemy/app/core/responsive/breakpoints.dart';
+import 'package:fludemy/app/core/theme/tokens/app_colors.dart';
+import 'package:fludemy/app/core/values/app_texts.dart';
+
+import 'advantages_section_horizontal.dart';
+import 'advantages_section_vertical.dart';
+
+class AdvantagesSection extends StatelessWidget {
+  const AdvantagesSection({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        if (constraints.maxWidth >= Breakpoints.mobileBreakpoint) {
+          return Container(
+            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+            decoration: const BoxDecoration(
+              border: Border(
+                bottom: BorderSide(color: AppColors.graniteGray),
+              ),
+            ),
+            child: Wrap(
+              alignment: WrapAlignment.spaceEvenly,
+              runSpacing: 16,
+              spacing: 16,
+              children: const [
+                AdvantagesSectionHorizontal(
+                  iconData: Icons.connect_without_contact,
+                  title: AppTexts.moreThan100kDevelopers,
+                  subtitle: AppTexts.awesomeExclamation,
+                ),
+                AdvantagesSectionHorizontal(
+                  iconData: Icons.card_membership,
+                  title: AppTexts.certificateOfComplete,
+                  subtitle: AppTexts.sensationalExclamation,
+                ),
+                AdvantagesSectionHorizontal(
+                  iconData: Icons.verified,
+                  title: AppTexts.sensationalExclamation,
+                  subtitle: AppTexts.anywhereExclamation,
+                ),
+              ],
+            ),
+          );
+        }
+        return Container(
+          padding: const EdgeInsets.symmetric(
+            vertical: 20,
+            horizontal: 16,
+          ),
+          decoration: const BoxDecoration(
+            border: Border(
+              bottom: BorderSide(color: AppColors.graniteGray),
+            ),
+          ),
+          child: Wrap(
+            alignment: WrapAlignment.spaceEvenly,
+            runSpacing: 16,
+            spacing: 32,
+            children: const [
+              AdvantagesSectionVertical(
+                iconData: Icons.connect_without_contact,
+                title: AppTexts.moreThan100kDevelopers,
+                subtitle: AppTexts.awesomeExclamation,
+              ),
+              AdvantagesSectionVertical(
+                iconData: Icons.card_membership,
+                title: AppTexts.certificateOfComplete,
+                subtitle: AppTexts.sensationalExclamation,
+              ),
+              AdvantagesSectionVertical(
+                iconData: Icons.verified,
+                title: AppTexts.sensationalExclamation,
+                subtitle: AppTexts.anywhereExclamation,
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}