diff --git a/src/components/HeroSection.astro b/src/components/HeroSection.astro
new file mode 100644
index 0000000..ed3936a
--- /dev/null
+++ b/src/components/HeroSection.astro
@@ -0,0 +1,135 @@
+---
+// import necessary dependencies
+import { Image } from "astro:assets";
+import heroImage from "../images/hero-image.avif";
+import PrimaryCTA from "./ui/buttons/PrimaryCTA.astro";
+import SecondaryCTA from "./ui/buttons/SecondaryCTA.astro";
+import Avatar from "./ui/avatars/Avatar.astro";
+import FullStar from "./ui/stars/FullStar.astro";
+import HalfStar from "./ui/stars/HalfStar.astro";
+
+/* `title` variable used to customise the main heading. */
+const title = `Equip Your Projects with ScrewFast`;
+
+/* `subTitle` variable used to customise the sub-heading text. */
+const subTitle =
+ "Top-quality hardware tools and expert construction services for every project need.";
+
+/* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
+const primaryBtn = "Start Exploring";
+const primaryBtnURL = "#";
+
+/* `secondaryBtn` and `secondaryBtnURL` variables used to customise the text and target link of the secondary button. */
+const secondaryBtn = "Contact Sales Team";
+const secondaryBtnURL = "#";
+
+/* `rating` variable used to customise the rating. */
+const rating = 4.8;
+
+/* `starCount` variable used to customise the star rating with the full stars. */
+const starCount = 4;
+
+/* `reviews` variable used to customise the number of reviews. */
+const reviews = "12.8k";
+
+/*
+ In the above, the title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, rating, starCount, reviews, and imageSource attributes are variables part of the HeroSection component.
+ */
+---
+
+