Merge pull request #1 from AbdulrahmanAbusnena/dev2

.gitignore

@@ -41,3 +41,7 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+
+
+
+

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

lib/Components/card.dart

@@ -31,7 +31,7 @@ class _ReCardsState extends State<ReCards> {
               height: 250, // Match image height to card height
               width: 190, // Match image width to card width
               fit: BoxFit.cover,
-            ),
+            ), 
           ),
           Positioned(
             // Position text on top of the image

lib/Components/cards2.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class Cards extends StatefulWidget {
+  final String image;
+  final String locationName; 
+  const Cards({super.key, required this.locationName, required this.image});
+
+  @override
+  State<Cards> createState() => _CardsState();
+}
+
+class _CardsState extends State<Cards> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 250, 
+      width: 200,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(54.0),
+        // Round corners for the card
+      ),
+      child: Stack(
+        // Use Stack to overlay elements
+        children: [
+          ClipRRect(
+            // Rounded image clip
+            borderRadius: BorderRadius.circular(20),
+            child: Image.asset(
+              widget.image,
+              height: 250, // Match image height to card height
+              width: 190, // Match image width to card width
+              fit: BoxFit.cover,
+            ), 
+          ),
+          Positioned(
+            // Position text on top of the image
+            bottom: 10.0, // Adjust vertical position from bottom
+            left: 10.0, // Adjust horizontal position from left
+            child: Container(
+              // Container for text styling
+
+              padding: const EdgeInsets.all(8.0),
+              child: Text(
+                widget.locationName,
+                style: GoogleFonts.montserrat(
+                  fontSize: 20,
+                  fontWeight: FontWeight.w800,
+                  color: Colors.white, // Text color for visibility
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/Components/search_homepage.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class SearchHomepage extends StatefulWidget {
+  const SearchHomepage({super.key});
+
+  @override
+  State<SearchHomepage> createState() => _SearchHomepageState();
+}
+
+class _SearchHomepageState extends State<SearchHomepage> {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      //padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 15),
+      padding: const EdgeInsets.all(25),
+      child: Container(
+        margin: const EdgeInsets.only(
+          top: 15,
+        ),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(40),
+          boxShadow: const [
+            BoxShadow(
+              color: Color(0xff4b4b4b),
+              //   blurRadius: 10,
+              spreadRadius: 0.0,
+            ),
+          ],
+        ),
+        child: TextField(
+          decoration: InputDecoration(
+            hintText: 'Enter your desired location or serivce',
+            hintStyle: GoogleFonts.montserrat(
+              fontSize: 15,
+              fontWeight: FontWeight.w700,
+            ),
+            prefixIcon: const Icon(Icons.search_rounded, size: 35),
+            filled: true,
+            fillColor: Colors.white,
+            hoverColor: Colors.black,
+            border: InputBorder.none,
+            contentPadding: const EdgeInsets.symmetric(
+              vertical: 15,
+              horizontal: 20,
+            ),
+            enabledBorder: OutlineInputBorder(
+              borderSide: BorderSide.none,
+              borderRadius: BorderRadius.circular(30),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderSide: const BorderSide(
+                width: 2,
+                // fotni
+                color: Color(0xff000000),
+              ),
+              borderRadius: BorderRadius.circular(30),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}