diff --git a/.coderabbit.yaml b/.coderabbit.yaml
index fe45e96..a26e69f 100644
--- a/.coderabbit.yaml
+++ b/.coderabbit.yaml
@@ -1,75 +1,75 @@
-# CodeRabbit Configuration File
-language: "en"
-
-reviews:
-  profile: "assertive"
-  
-  # Disables the "Prompt for all review comments with AI agents" feature
-  enable_prompt_for_ai_agents: false
-  
-  # Disables the "🪄 Autofix (Beta)" feature and committable suggestions
-  finishing_touches:
-    autofix:
-      enabled: false
-  
-  auto_review:
-    enabled: true
-    drafts: false
-
-  path_instructions:
-    - path: "**/*.html"
-      instructions: |
-        CRITICAL: Absolutely forbid the use of <table>, <tr>, <td>, or any table elements for structural layouts. If found, flag it as a major violation and instruct the user to use CSS Grid or Flexbox instead.
-        Ensure semantic HTML5 elements (nav, section, footer, main) are used correctly.
-        Ensure every <img> tag contains a meaningful, non-empty 'alt' attribute for accessibility.
-        Check that interactive elements use proper tags (like <button> or <a>) to maintain keyboard accessibility.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-    - path: "**/*.scss"
-      instructions: |
-        Ensure a strict Mobile-First styling approach is used (rely on min-width media queries, never max-width).
-        Enforce the BEM (Block-Element-Modifier) naming convention strictly for all classes.
-        Ensure the design layout relies strictly on display: grid or display: flex.
-        Flag and reject any imports or usage of external UI frameworks like Bootstrap or Material UI.
-        Check for proper SCSS mixins usage and standard SASS documentation/comments.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-    - path: "**/*.js"
-      instructions: |
-        Ensure the API data from the Gist endpoint is fetched only once and properly handled using async/await.
-        Verify that the "Spin & Win" wheel selection logic correctly picks 4 unique deals while excluding already won deals.
-        Ensure won deals are correctly accumulated, stored in state, and sorted by their relative validity date.
-        Check that Event Delegation is utilized effectively for interacting with dynamic UI lists (e.g., the Copy Code buttons).
-        Enforce standard JSDoc formatting and comments on all major functions.
-        DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
-
-  tools:
-    eslint:
-      enabled: true
-    stylelint:
-      enabled: true
-    htmlhint:
-      enabled: true
-    gitleaks:
-      enabled: true
-    trufflehog:
-      enabled: true
-    osvScanner:
-      enabled: true
-    semgrep:
-      enabled: true
-
-  path_filters:
-    - "!node_modules/**"
-    - "!dist/**"
-    - "!build/**"
-    - "!.next/**"
-    - "!package-lock.json"
-    - "!yarn.lock"
-    - "!pnpm-lock.yaml"
-    - "!**/vendor/**"
-    - "!**/*.md"
-
-# Disabling chat limits the AI's conversational auto-replies
-chat:
-  auto_reply: false
\ No newline at end of file
+# CodeRabbit Configuration File
+language: 'en'
+
+reviews:
+    profile: 'assertive'
+
+    # Disables the "Prompt for all review comments with AI agents" feature
+    enable_prompt_for_ai_agents: false
+
+    # Disables the "🪄 Autofix (Beta)" feature and committable suggestions
+    finishing_touches:
+        autofix:
+            enabled: false
+
+    auto_review:
+        enabled: true
+        drafts: false
+
+    path_instructions:
+        - path: '**/*.html'
+          instructions: |
+              CRITICAL: Absolutely forbid the use of <table>, <tr>, <td>, or any table elements for structural layouts. If found, flag it as a major violation and instruct the user to use CSS Grid or Flexbox instead.
+              Ensure semantic HTML5 elements (nav, section, footer, main) are used correctly.
+              Ensure every <img> tag contains a meaningful, non-empty 'alt' attribute for accessibility.
+              Check that interactive elements use proper tags (like <button> or <a>) to maintain keyboard accessibility.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+        - path: '**/*.scss'
+          instructions: |
+              Ensure a strict Mobile-First styling approach is used (rely on min-width media queries, never max-width).
+              Enforce the BEM (Block-Element-Modifier) naming convention strictly for all classes.
+              Ensure the design layout relies strictly on display: grid or display: flex.
+              Flag and reject any imports or usage of external UI frameworks like Bootstrap or Material UI.
+              Check for proper SCSS mixins usage and standard SASS documentation/comments.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+        - path: '**/*.js'
+          instructions: |
+              Ensure the API data from the Gist endpoint is fetched only once and properly handled using async/await.
+              Verify that the "Spin & Win" wheel selection logic correctly picks 4 unique deals while excluding already won deals.
+              Ensure won deals are correctly accumulated, stored in state, and sorted by their relative validity date.
+              Check that Event Delegation is utilized effectively for interacting with dynamic UI lists (e.g., the Copy Code buttons).
+              Enforce standard JSDoc formatting and comments on all major functions.
+              DO NOT provide any code diffs, code snippets, or committable suggestions. Provide plain text feedback only.
+
+    tools:
+        eslint:
+            enabled: true
+        stylelint:
+            enabled: true
+        htmlhint:
+            enabled: true
+        gitleaks:
+            enabled: true
+        trufflehog:
+            enabled: true
+        osvScanner:
+            enabled: true
+        semgrep:
+            enabled: true
+
+    path_filters:
+        - '!node_modules/**'
+        - '!dist/**'
+        - '!build/**'
+        - '!.next/**'
+        - '!package-lock.json'
+        - '!yarn.lock'
+        - '!pnpm-lock.yaml'
+        - '!**/vendor/**'
+        - '!**/*.md'
+
+# Disabling chat limits the AI's conversational auto-replies
+chat:
+    auto_reply: false
diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml
index 181f467..e3f5940 100644
--- a/.github/workflows/pr-check.yml
+++ b/.github/workflows/pr-check.yml
@@ -1,73 +1,73 @@
 name: pr-check
 
 on:
-  pull_request:
-    types: [opened, edited, reopened, synchronize]
+    pull_request:
+        types: [opened, edited, reopened, synchronize]
 
 env:
-  STORY_ID: '[A-Z]{2,3}_A[0-9]+_[0-9]{2}'
+    STORY_ID: '[A-Z]{2,3}_A[0-9]+_[0-9]{2}'
 
 jobs:
-  validate:
-    name: Validate branch, PR title and commits
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout (full history for commit range)
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
+    validate:
+        name: Validate branch, PR title and commits
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout (full history for commit range)
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
 
-      - name: Validate branch name
-        env:
-          BRANCH_NAME: ${{ github.head_ref }}
-        run: |
-          REGEX="^(${STORY_ID})(/.*)?$"
-          if ! echo "$BRANCH_NAME" | grep -Eq "$REGEX"; then
-            echo "::error::Invalid branch name '$BRANCH_NAME'"
-            echo "Branch must start with a Story ID, e.g. AJ_A1_00 or AJ_A1_00/base-setup"
-            exit 1
-          fi
-          echo "Branch name OK: $BRANCH_NAME"
+            - name: Validate branch name
+              env:
+                  BRANCH_NAME: ${{ github.head_ref }}
+              run: |
+                  REGEX="^(${STORY_ID})(/.*)?$"
+                  if ! echo "$BRANCH_NAME" | grep -Eq "$REGEX"; then
+                    echo "::error::Invalid branch name '$BRANCH_NAME'"
+                    echo "Branch must start with a Story ID, e.g. AJ_A1_00 or AJ_A1_00/base-setup"
+                    exit 1
+                  fi
+                  echo "Branch name OK: $BRANCH_NAME"
 
-      - name: Validate PR title
-        env:
-          PR_TITLE: ${{ github.event.pull_request.title }}
-        run: |
-          REGEX="^\[(${STORY_ID})\]: .+"
-          if ! echo "$PR_TITLE" | grep -Eq "$REGEX"; then
-            echo "::error::Invalid PR title '$PR_TITLE'"
-            echo "PR title must follow: [Story_ID]: <Task Title>  e.g. [AJ_A1_01]: Complete header section"
-            exit 1
-          fi
-          echo "PR title OK: $PR_TITLE"
+            - name: Validate PR title
+              env:
+                  PR_TITLE: ${{ github.event.pull_request.title }}
+              run: |
+                  REGEX="^\[(${STORY_ID})\]: .+"
+                  if ! echo "$PR_TITLE" | grep -Eq "$REGEX"; then
+                    echo "::error::Invalid PR title '$PR_TITLE'"
+                    echo "PR title must follow: [Story_ID]: <Task Title>  e.g. [AJ_A1_01]: Complete header section"
+                    exit 1
+                  fi
+                  echo "PR title OK: $PR_TITLE"
 
-      - name: Validate commit messages
-        env:
-          BASE_SHA: ${{ github.event.pull_request.base.sha }}
-          BEFORE_SHA: ${{ github.event.before }}
-          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-        run: |
-          REGEX="^\[(${STORY_ID})\]: .+"
-          STATUS=0
-          FROM_SHA="$BEFORE_SHA"
-          if [ -z "$FROM_SHA" ] \
-            || [ "$FROM_SHA" = "0000000000000000000000000000000000000000" ] \
-            || ! git cat-file -e "$FROM_SHA^{commit}" 2>/dev/null; then
-            FROM_SHA="$BASE_SHA"
-          fi
-          while IFS= read -r SUBJECT; do
-            [ -z "$SUBJECT" ] && continue
-            case "$SUBJECT" in
-              "Merge branch "*|"Merge pull request "*|"Merge remote-tracking "*) continue ;;
-            esac
-            if ! echo "$SUBJECT" | grep -Eq "$REGEX"; then
-              echo "::error::Invalid commit message: \"$SUBJECT\""
-              STATUS=1
-            fi
-          done < <(git log --format='%s' "$FROM_SHA".."$HEAD_SHA")
+            - name: Validate commit messages
+              env:
+                  BASE_SHA: ${{ github.event.pull_request.base.sha }}
+                  BEFORE_SHA: ${{ github.event.before }}
+                  HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+              run: |
+                  REGEX="^\[(${STORY_ID})\]: .+"
+                  STATUS=0
+                  FROM_SHA="$BEFORE_SHA"
+                  if [ -z "$FROM_SHA" ] \
+                    || [ "$FROM_SHA" = "0000000000000000000000000000000000000000" ] \
+                    || ! git cat-file -e "$FROM_SHA^{commit}" 2>/dev/null; then
+                    FROM_SHA="$BASE_SHA"
+                  fi
+                  while IFS= read -r SUBJECT; do
+                    [ -z "$SUBJECT" ] && continue
+                    case "$SUBJECT" in
+                      "Merge branch "*|"Merge pull request "*|"Merge remote-tracking "*) continue ;;
+                    esac
+                    if ! echo "$SUBJECT" | grep -Eq "$REGEX"; then
+                      echo "::error::Invalid commit message: \"$SUBJECT\""
+                      STATUS=1
+                    fi
+                  done < <(git log --format='%s' "$FROM_SHA".."$HEAD_SHA")
 
-          if [ "$STATUS" -ne 0 ]; then
-            echo "Each commit must follow: [Story_ID]: <message>  e.g. [AJ_A1_01]: Add header"
-            exit 1
-          fi
-          echo "All commit messages OK"
+                  if [ "$STATUS" -ne 0 ]; then
+                    echo "Each commit must follow: [Story_ID]: <message>  e.g. [AJ_A1_01]: Add header"
+                    exit 1
+                  fi
+                  echo "All commit messages OK"
diff --git a/index.html b/index.html
index f62b1f7..765311a 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,9 @@
         <title>Title</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" href="src/styles/main.scss" />
+        <link rel="stylesheet" href="./public/styles/main.css" />
     </head>
     <body>
-        <div>Hello World</div>
         <script type="module" src="./src/script/index.js"></script>
     </body>
 </html>
diff --git a/public/assets/fonts/icomoon.eot b/public/assets/fonts/icomoon.eot
new file mode 100644
index 0000000..0863c38
Binary files /dev/null and b/public/assets/fonts/icomoon.eot differ
diff --git a/public/assets/fonts/icomoon.woff b/public/assets/fonts/icomoon.woff
new file mode 100644
index 0000000..d68d161
Binary files /dev/null and b/public/assets/fonts/icomoon.woff differ
diff --git a/public/assets/images/Ellipse 23.webp b/public/assets/images/Ellipse 23.webp
new file mode 100644
index 0000000..27bc2d1
Binary files /dev/null and b/public/assets/images/Ellipse 23.webp differ
diff --git a/public/assets/images/Group 3.webp b/public/assets/images/Group 3.webp
new file mode 100644
index 0000000..4a31e13
Binary files /dev/null and b/public/assets/images/Group 3.webp differ
diff --git a/public/assets/images/airbnb.webp b/public/assets/images/airbnb.webp
new file mode 100644
index 0000000..de6219f
Binary files /dev/null and b/public/assets/images/airbnb.webp differ
diff --git a/public/assets/images/booking.webp b/public/assets/images/booking.webp
new file mode 100644
index 0000000..b2c81a2
Binary files /dev/null and b/public/assets/images/booking.webp differ
diff --git a/public/assets/images/carousel.webp b/public/assets/images/carousel.webp
new file mode 100644
index 0000000..78c1a1f
Binary files /dev/null and b/public/assets/images/carousel.webp differ
diff --git a/public/assets/images/city.webp b/public/assets/images/city.webp
new file mode 100644
index 0000000..e8ed4e6
Binary files /dev/null and b/public/assets/images/city.webp differ
diff --git a/public/assets/images/expedia.webp b/public/assets/images/expedia.webp
new file mode 100644
index 0000000..f19a1a0
Binary files /dev/null and b/public/assets/images/expedia.webp differ
diff --git a/public/assets/images/globe.webp b/public/assets/images/globe.webp
new file mode 100644
index 0000000..74cf957
Binary files /dev/null and b/public/assets/images/globe.webp differ
diff --git a/public/assets/images/logo.webp b/public/assets/images/logo.webp
new file mode 100644
index 0000000..d8dcc39
Binary files /dev/null and b/public/assets/images/logo.webp differ
diff --git a/public/assets/images/mountain.webp b/public/assets/images/mountain.webp
new file mode 100644
index 0000000..c1c2c72
Binary files /dev/null and b/public/assets/images/mountain.webp differ
diff --git a/public/assets/images/object.webp b/public/assets/images/object.webp
new file mode 100644
index 0000000..26094fd
Binary files /dev/null and b/public/assets/images/object.webp differ
diff --git a/public/assets/images/ocean.webp b/public/assets/images/ocean.webp
new file mode 100644
index 0000000..dbb7dd3
Binary files /dev/null and b/public/assets/images/ocean.webp differ
diff --git a/public/assets/images/orbitz.webp b/public/assets/images/orbitz.webp
new file mode 100644
index 0000000..f05b356
Binary files /dev/null and b/public/assets/images/orbitz.webp differ
diff --git a/public/assets/images/plane.webp b/public/assets/images/plane.webp
new file mode 100644
index 0000000..e748727
Binary files /dev/null and b/public/assets/images/plane.webp differ
diff --git a/public/assets/images/star.webp b/public/assets/images/star.webp
new file mode 100644
index 0000000..6eb8f31
Binary files /dev/null and b/public/assets/images/star.webp differ
diff --git a/public/assets/images/travel-point.webp b/public/assets/images/travel-point.webp
new file mode 100644
index 0000000..8fcd1ad
Binary files /dev/null and b/public/assets/images/travel-point.webp differ
diff --git a/public/assets/images/triangles.webp b/public/assets/images/triangles.webp
new file mode 100644
index 0000000..f4a3a45
Binary files /dev/null and b/public/assets/images/triangles.webp differ
diff --git a/public/assets/images/tripadvisor.webp b/public/assets/images/tripadvisor.webp
new file mode 100644
index 0000000..b43971e
Binary files /dev/null and b/public/assets/images/tripadvisor.webp differ
diff --git a/public/assets/images/user.webp b/public/assets/images/user.webp
new file mode 100644
index 0000000..9ce8fa3
Binary files /dev/null and b/public/assets/images/user.webp differ
diff --git a/public/content.json b/public/content.json
new file mode 100644
index 0000000..60a4b3a
--- /dev/null
+++ b/public/content.json
@@ -0,0 +1,35 @@
+{
+    "header": {
+        "nav": ["home", "discover", "special deals", "contact"],
+        "buttons": ["log in", "sign up"]
+    },
+    "section-1": {
+        "float": "Explore the world!",
+        "heading": "Travel top destination of the world",
+        "sub-text": "We always make our customer happy by providing as many choices as possible "
+    },
+    "btn": ["get started", "watch demo"],
+    "section-2": {
+        "float": "travel point",
+        "heading": "We helping you find your dream location",
+        "sub-text": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC."
+    },
+    "card": {
+        "card_1": {
+            "number": "500+",
+            "heading": "holiday package"
+        },
+        "card_2": {
+            "number": "100",
+            "heading": "Luxury Hotel"
+        },
+        "card_3": {
+            "number": "7",
+            "heading": "Premium Airlines"
+        },
+        "card_4": {
+            "number": "2k+",
+            "heading": "Happy Customer"
+        }
+    }
+}
diff --git a/public/styles/main.css b/public/styles/main.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/Assets/Fonts/Icomoon backup/selection.json b/src/Assets/Fonts/Icomoon backup/selection.json
new file mode 100644
index 0000000..545ff56
--- /dev/null
+++ b/src/Assets/Fonts/Icomoon backup/selection.json	
@@ -0,0 +1,324 @@
+{
+    "IcoMoonType": "selection",
+    "icons": [
+        {
+            "icon": {
+                "paths": [
+                    "M512 0c-176.732 0-320 143.268-320 320 0 320 320 704 320 704s320-384 320-704c0-176.732-143.27-320-320-320zM512 512c-106.040 0-192-85.96-192-192s85.96-192 192-192 192 85.96 192 192-85.96 192-192 192z"
+                ],
+                "tags": ["location", "map-marker", "pin"],
+                "defaultCode": 59719,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "location, map-marker",
+                "name": "location",
+                "order": 16,
+                "id": 72,
+                "prevSize": 32,
+                "code": 59719
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 71
+        },
+        {
+            "icon": {
+                "width": 1024,
+                "paths": [
+                    "M384 736c0-151.234 95.874-280.486 230.032-330.2 16.28-36.538 25.968-77.164 25.968-117.8 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h397.306c-8.664-30.53-13.306-62.732-13.306-96z",
+                    "M736 448c-159.058 0-288 128.942-288 288s128.942 288 288 288c159.056 0 288-128.942 288-288s-128.942-288-288-288zM896 768h-128v128h-64v-128h-128v-64h128v-128h64v128h128v64z"
+                ],
+                "tags": [
+                    "user-plus",
+                    "user",
+                    "user-add",
+                    "profile",
+                    "avatar",
+                    "person",
+                    "member"
+                ],
+                "defaultCode": 59763,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "user-plus, user2",
+                "name": "user-plus",
+                "order": 15,
+                "id": 116,
+                "prevSize": 32,
+                "code": 59763
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 115
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M960 256h-256v-64c0-35.2-28.8-64-64-64h-256c-35.204 0-64 28.8-64 64v64h-256c-35.2 0-64 28.8-64 64v576c0 35.202 28.796 64 64 64h896c35.2 0 64-28.798 64-64v-576c0-35.2-28.8-64-64-64zM384 192.116c0.034-0.040 0.074-0.082 0.114-0.116h255.772c0.042 0.034 0.082 0.076 0.118 0.116v63.884h-256.004v-63.884zM960 512h-128v96c0 17.602-14.4 32-32 32h-64c-17.604 0-32-14.398-32-32v-96h-384v96c0 17.602-14.4 32-32 32h-64c-17.602 0-32-14.398-32-32v-96h-128v-64h896v64z"
+                ],
+                "tags": [
+                    "briefcase",
+                    "portfolio",
+                    "suitcase",
+                    "work",
+                    "job",
+                    "employee"
+                ],
+                "defaultCode": 59822,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "briefcase, portfolio",
+                "name": "briefcase",
+                "order": 3,
+                "id": 175,
+                "prevSize": 32,
+                "code": 59822
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 174
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M64 192h896v192h-896zM64 448h896v192h-896zM64 704h896v192h-896z"
+                ],
+                "tags": ["menu", "list", "options", "lines", "hamburger"],
+                "defaultCode": 59837,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "menu, list3",
+                "name": "menu",
+                "order": 2,
+                "id": 190,
+                "prevSize": 32,
+                "code": 59837
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 189
+        },
+        {
+            "icon": {
+                "paths": ["M192 128l640 384-640 384z"],
+                "tags": ["play", "player"],
+                "defaultCode": 59932,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "play3, player8",
+                "name": "play3",
+                "order": 9,
+                "id": 285,
+                "prevSize": 32,
+                "code": 59932
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 284
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M621.254 877.254l320-320c24.994-24.992 24.994-65.516 0-90.51l-320-320c-24.994-24.992-65.516-24.992-90.51 0-24.994 24.994-24.994 65.516 0 90.51l210.746 210.746h-613.49c-35.346 0-64 28.654-64 64s28.654 64 64 64h613.49l-210.746 210.746c-12.496 12.496-18.744 28.876-18.744 45.254s6.248 32.758 18.744 45.254c24.994 24.994 65.516 24.994 90.51 0z"
+                ],
+                "tags": ["arrow-right", "right", "next"],
+                "defaultCode": 59964,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "arrow-right2, right4",
+                "name": "arrow-right2",
+                "order": 10,
+                "id": 317,
+                "prevSize": 32,
+                "code": 59964
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 316
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M402.746 877.254l-320-320c-24.994-24.992-24.994-65.516 0-90.51l320-320c24.994-24.992 65.516-24.992 90.51 0 24.994 24.994 24.994 65.516 0 90.51l-210.746 210.746h613.49c35.346 0 64 28.654 64 64s-28.654 64-64 64h-613.49l210.746 210.746c12.496 12.496 18.744 28.876 18.744 45.254s-6.248 32.758-18.744 45.254c-24.994 24.994-65.516 24.994-90.51 0z"
+                ],
+                "tags": ["arrow-left", "left", "previous"],
+                "defaultCode": 59968,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "arrow-left2, left4",
+                "name": "arrow-left2",
+                "order": 11,
+                "id": 321,
+                "prevSize": 32,
+                "code": 59968
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 320
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M1024 512c0-282.77-229.23-512-512-512s-512 229.23-512 512 229.23 512 512 512 512-229.23 512-512zM96 512c0-229.75 186.25-416 416-416s416 186.25 416 416-186.25 416-416 416-416-186.25-416-416z",
+                    "M317.256 354.744l-90.512 90.512 285.256 285.254 285.254-285.256-90.508-90.508-194.746 194.744z"
+                ],
+                "tags": ["circle-down", "down", "circle-bottom", "arrow"],
+                "defaultCode": 59971,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "circle-down, down3",
+                "name": "circle-down",
+                "order": 12,
+                "id": 324,
+                "prevSize": 32,
+                "code": 59971
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 323
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z"
+                ],
+                "tags": ["facebook", "brand", "social"],
+                "defaultCode": 60048,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "facebook, brand10",
+                "name": "facebook",
+                "order": 6,
+                "id": 401,
+                "prevSize": 32,
+                "code": 60048
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 400
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M512 92.2c136.8 0 153 0.6 206.8 3 50 2.2 77 10.6 95 17.6 23.8 9.2 41 20.4 58.8 38.2 18 18 29 35 38.4 58.8 7 18 15.4 45.2 17.6 95 2.4 54 3 70.2 3 206.8s-0.6 153-3 206.8c-2.2 50-10.6 77-17.6 95-9.2 23.8-20.4 41-38.2 58.8-18 18-35 29-58.8 38.4-18 7-45.2 15.4-95 17.6-54 2.4-70.2 3-206.8 3s-153-0.6-206.8-3c-50-2.2-77-10.6-95-17.6-23.8-9.2-41-20.4-58.8-38.2-18-18-29-35-38.4-58.8-7-18-15.4-45.2-17.6-95-2.4-54-3-70.2-3-206.8s0.6-153 3-206.8c2.2-50 10.6-77 17.6-95 9.2-23.8 20.4-41 38.2-58.8 18-18 35-29 58.8-38.4 18-7 45.2-15.4 95-17.6 53.8-2.4 70-3 206.8-3zM512 0c-139 0-156.4 0.6-211 3-54.4 2.4-91.8 11.2-124.2 23.8-33.8 13.2-62.4 30.6-90.8 59.2-28.6 28.4-46 57-59.2 90.6-12.6 32.6-21.4 69.8-23.8 124.2-2.4 54.8-3 72.2-3 211.2s0.6 156.4 3 211c2.4 54.4 11.2 91.8 23.8 124.2 13.2 33.8 30.6 62.4 59.2 90.8 28.4 28.4 57 46 90.6 59 32.6 12.6 69.8 21.4 124.2 23.8 54.6 2.4 72 3 211 3s156.4-0.6 211-3c54.4-2.4 91.8-11.2 124.2-23.8 33.6-13 62.2-30.6 90.6-59s46-57 59-90.6c12.6-32.6 21.4-69.8 23.8-124.2 2.4-54.6 3-72 3-211s-0.6-156.4-3-211c-2.4-54.4-11.2-91.8-23.8-124.2-12.6-34-30-62.6-58.6-91-28.4-28.4-57-46-90.6-59-32.6-12.6-69.8-21.4-124.2-23.8-54.8-2.6-72.2-3.2-211.2-3.2v0z",
+                    "M512 249c-145.2 0-263 117.8-263 263s117.8 263 263 263 263-117.8 263-263c0-145.2-117.8-263-263-263zM512 682.6c-94.2 0-170.6-76.4-170.6-170.6s76.4-170.6 170.6-170.6c94.2 0 170.6 76.4 170.6 170.6s-76.4 170.6-170.6 170.6z",
+                    "M846.8 238.6c0 33.91-27.49 61.4-61.4 61.4s-61.4-27.49-61.4-61.4c0-33.91 27.49-61.4 61.4-61.4s61.4 27.49 61.4 61.4z"
+                ],
+                "tags": ["instagram", "brand", "social"],
+                "defaultCode": 60050,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "instagram, brand12",
+                "name": "instagram",
+                "order": 8,
+                "id": 403,
+                "prevSize": 32,
+                "code": 60050
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 402
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM763.6 351l-84 395.8c-5.8 28.2-22.8 34.8-46.4 21.8l-128-94.6-61.4 59.8c-7.2 7-12.8 12.8-25.6 12.8-16.6 0-13.8-6.2-19.4-22l-43.6-143.2-126.6-39.4c-27.4-8.4-27.6-27.2 6.2-40.6l493.2-190.4c22.4-10.2 44.2 5.4 35.6 40z"
+                ],
+                "tags": ["telegram", "brand", "social"],
+                "defaultCode": 60053,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "name": "telegram",
+                "ligatures": "telegram, brand15",
+                "order": 5,
+                "id": 406,
+                "prevSize": 32,
+                "code": 60053
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 405
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"
+                ],
+                "tags": ["twitter", "brand", "tweet", "social"],
+                "defaultCode": 60054,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "twitter, brand16",
+                "name": "twitter",
+                "order": 13,
+                "id": 407,
+                "prevSize": 32,
+                "code": 60054
+            },
+            "setIdx": 0,
+            "setId": 1,
+            "iconIdx": 406
+        }
+    ],
+    "height": 1024,
+    "metadata": { "name": "icomoon" },
+    "preferences": {
+        "showGlyphs": true,
+        "showQuickUse": true,
+        "showQuickUse2": true,
+        "showSVGs": true,
+        "fontPref": {
+            "prefix": "icon-",
+            "metadata": { "fontFamily": "icomoon" },
+            "metrics": { "emSize": 1024, "baseline": 6.25, "whitespace": 50 },
+            "embed": false
+        },
+        "imagePref": {
+            "prefix": "icon-",
+            "png": true,
+            "useClassSelector": true,
+            "color": 0,
+            "bgColor": 16777215,
+            "classSelector": ".icon"
+        },
+        "historySize": 50,
+        "showCodes": true,
+        "gridSize": 16
+    }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 90936b0..e69de29 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1 +0,0 @@
-// TODO: Add styles as per the requirement
diff --git a/src/styles/scss/abstract/_breakpoint.scss b/src/styles/scss/abstract/_breakpoint.scss
new file mode 100644
index 0000000..5fa2f7e
--- /dev/null
+++ b/src/styles/scss/abstract/_breakpoint.scss
@@ -0,0 +1,7 @@
+//defining map of different screen sizes
+$breakpoints: (
+    xs: 344px,
+    sm: 430px,
+    md: 540px,
+    lg: 875px,
+);
diff --git a/src/styles/scss/abstract/_color.scss b/src/styles/scss/abstract/_color.scss
new file mode 100644
index 0000000..256ac2a
--- /dev/null
+++ b/src/styles/scss/abstract/_color.scss
@@ -0,0 +1,9 @@
+//palette design
+$white-100: #ffffff;
+$black-900: #000;
+$black-800: #191825;
+$white-200: #eee;
+$yellow-200: #facd49;
+$purple-200: #5d50c6;
+$orange-100: #ff5722;
+$pink-100: #f85e9f;
diff --git a/src/styles/scss/abstract/_function.scss b/src/styles/scss/abstract/_function.scss
new file mode 100644
index 0000000..142125f
--- /dev/null
+++ b/src/styles/scss/abstract/_function.scss
@@ -0,0 +1,17 @@
+@use 'sass:math';
+
+//function to convert px to rem
+/*
+@name px-to-rem
+@param{Number}$pixel- Pixel value to convert
+@param{Number}$base- Base value for root pixel(16px)
+@return{Number}- Equivalent rem value
+*/
+
+@function px-to-rem($pixel, $base: 16) {
+    $strippedValue: math.div(
+        $pixel,
+        $pixel * 0 + 1
+    ); //this cuts out px in division, giving only numeric value
+    @return math.div($strippedValue, $base) * 1rem;
+}
diff --git a/src/styles/scss/abstract/_mixin.scss b/src/styles/scss/abstract/_mixin.scss
new file mode 100644
index 0000000..b09778f
--- /dev/null
+++ b/src/styles/scss/abstract/_mixin.scss
@@ -0,0 +1,80 @@
+@use './breakpoint' as bp;
+@use './color' as cl;
+@use 'sass:map';
+@use 'sass:color';
+
+/// create flex with default values which are commonly used throughout project
+///
+/// @param {direction} $direction [row] - decide flex direction
+/// @param {space} $space [space-between] - decide alignment of flex item across main axis
+/// @param {Length} $gap [1rem] - Space between flex items.
+/// @param {space} $align-item [center] - decide alignment of flex item across cross axis
+///
+/// @output Applies flex properties and sets gaps.
+@mixin flex(
+    $direction: row,
+    $space: space-between,
+    $gap: 1rem,
+    $align-item: center
+) {
+    display: flex;
+    flex-direction: $direction;
+    justify-content: $space;
+    gap: $gap;
+    align-items: $align-item;
+}
+
+/// responding to different screen sizes as defined in breakpoint.scss
+///
+/// @param {size} $screen [null] - decide properties for increasing screen size
+///
+/// @output change layout and styling of elements for increasing screen sizes
+@mixin responsive-up($screen) {
+    @if map.has-key(bp.$breakpoints, $screen) {
+        @media (min-width: map.get(bp.$breakpoints,$screen)) {
+            @content;
+        }
+    }
+}
+
+/// add box shadow to element
+///
+/// @param {x-coordinate} $x [0] - decide x-offset
+/// @param {y-coordinate} $y[ 62px] - decide y-offset
+/// @param {blur} $blur [17px] - decide blur percentage
+/// @param {color} $color[ black] - decide color of shadow
+/// @param {radius} $rad [0] - decide spread radius of shadow
+///
+/// @output apply box shadow to element
+@mixin shadow(
+    $x: 0,
+    $y: 62px,
+    $blur: 17px,
+    $color: color.change(cl.$black-800, $alpha: 0.1),
+    $rad: 0
+) {
+    box-shadow: $x $y $blur $rad $color;
+}
+
+/// apply typography properties associated to semantic names
+///
+/// @param {typography-name} $typography-type [null] - apply font properties defined in _typography.scss to element's text
+///
+/// @output apply font properties defined in _typography.scss
+@mixin use-typo($typography-type) {
+    @each $key, $value in $typography-type {
+        #{$key}: $value;
+    }
+}
+
+/// creating grid layout
+///
+/// @param {number} $col [null] - decide number of columns in grid
+/// @param {length} $gap [1rem] - decide gap between items
+///
+/// @output sets grid layout
+@mixin grid($col, $gap: 1rem) {
+    display: grid;
+    grid-template-columns: repeat($col, 1fr);
+    gap: $gap;
+}
diff --git a/src/styles/scss/base/_reset.scss b/src/styles/scss/base/_reset.scss
new file mode 100644
index 0000000..664f361
--- /dev/null
+++ b/src/styles/scss/base/_reset.scss
@@ -0,0 +1,50 @@
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline; //not necessary for us coz of absence of table, but considered a good practice
+    text-rendering: optimizeLegibility; //optimizespeed isn't necessary here coz of static site generation
+    text-size-adjust: none; //prevent auto enlargement of text in mobile
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+footer,
+header,
+nav,
+section,
+main {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+button,
+a {
+    cursor: pointer;
+}
diff --git a/src/styles/scss/base/_typography.scss b/src/styles/scss/base/_typography.scss
new file mode 100644
index 0000000..336394b
--- /dev/null
+++ b/src/styles/scss/base/_typography.scss
@@ -0,0 +1,81 @@
+@use '../abstract/color' as *;
+@use 'sass:color';
+
+//font family
+$font-family-primary: 'Circular Std';
+$font-family-secondary: Inter;
+
+//font size
+$font-size-xs: 0.875rem;
+$font-size-sm: 1rem;
+$font-size-md: 1.5rem;
+$font-size-lg: 2rem;
+$font-size-xl: 2.5rem;
+
+//font weight
+$font-medium: 400;
+$font-semibold: 700;
+$font-bold: 900;
+
+//line height
+$line-height-open: 120%;
+$line-height-full: 160%;
+$line-height-relax: 2.5rem; //166.667%
+
+//Main Headings
+$main-heading-1: (
+    text-align: center,
+    font-family: $font-family-primary,
+    font-size: $font-size-xl,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+);
+$main-heading-2: (
+    text-align: center,
+    font-family: $font-family-primary,
+    font-size: $font-size-lg,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+);
+
+//Sub Headings
+$sub-heading-1: (
+    text-align: center,
+    font-family: $font-family-primary,
+    font-size: $font-size-sm,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+    text-transform: uppercase,
+);
+$sub-heading-2: (
+    text-align: center,
+    font-family: $font-family-primary,
+    font-size: $font-size-xs,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+    text-transform: uppercase,
+);
+
+//helper text
+$subtitle-1: (
+    text-align: center,
+    font-family: $font-family-secondary,
+    font-size: $font-size-sm,
+    font-weight: $font-medium,
+    line-height: $line-height-full,
+);
+
+//navigation links
+$nav-link-1: (
+    font-family: $font-family-primary,
+    font-size: $font-size-md,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+);
+$nav-link-2: (
+    font-family: $font-family-primary,
+    font-size: $font-size-xs,
+    font-weight: $font-semibold,
+    line-height: $line-height-open,
+    text-transform: capitalize,
+);
diff --git a/src/styles/scss/components/_button.scss b/src/styles/scss/components/_button.scss
new file mode 100644
index 0000000..a7cf71c
--- /dev/null
+++ b/src/styles/scss/components/_button.scss
@@ -0,0 +1,8 @@
+@use '../base/typography' as typo;
+@use '../abstract/mixin' as mix;
+
+.button {
+    @include mix.flex($gap: 0.5rem, $space: center);
+    border-radius: 6.25rem;
+    @include mix.use-typo(typo.$nav-link-2);
+}
diff --git a/src/styles/scss/components/_cards.scss b/src/styles/scss/components/_cards.scss
new file mode 100644
index 0000000..46340a2
--- /dev/null
+++ b/src/styles/scss/components/_cards.scss
@@ -0,0 +1,11 @@
+@use '../abstract/color' as *;
+@use '../abstract/mixin' as mix;
+@use 'sass:color';
+
+.card {
+    @include mix.flex($direction: column);
+    padding: 2rem;
+    align-self: stretch;
+    border-radius: 2rem;
+    border: 1px solid color.change($black-800, $alpha: 0.1);
+}
diff --git a/src/styles/scss/components/_chip.scss b/src/styles/scss/components/_chip.scss
new file mode 100644
index 0000000..d1b83a3
--- /dev/null
+++ b/src/styles/scss/components/_chip.scss
@@ -0,0 +1,6 @@
+@use '../abstract/mixin' as mix;
+
+.chip {
+    @include mix.flex;
+    border-radius: 70%;
+}
diff --git a/src/styles/scss/components/_icon.scss b/src/styles/scss/components/_icon.scss
new file mode 100644
index 0000000..94a6497
--- /dev/null
+++ b/src/styles/scss/components/_icon.scss
@@ -0,0 +1,15 @@
+@use '../abstract/mixin' as mix;
+@use '../themes/light' as th;
+.icon {
+    width: 2.05rem;
+    height: 2.05rem;
+    @include mix.flex($gap: 0.25rem, $align-items: flex-start);
+    padding: 0.5rem;
+    border-radius: 3.2rem;
+    &__primary {
+        background-color: th.$brand-primary;
+    }
+    &__secondary {
+        background-color: th.$bg-secondary;
+    }
+}
diff --git a/src/styles/scss/themes/_light.scss b/src/styles/scss/themes/_light.scss
new file mode 100644
index 0000000..c5f667b
--- /dev/null
+++ b/src/styles/scss/themes/_light.scss
@@ -0,0 +1,19 @@
+//there is only single theme followed throughout the project so no need to create map
+
+@use '../abstract/color' as *;
+@use 'sass:color';
+
+//brand colors
+$brand-primary: $pink-100;
+$brand-secondary: $orange-100;
+$brand-tertiary: $yellow-200;
+
+/*Background tokens*/
+$bg-primary: $white-100;
+$bg-secondary: $purple-200;
+
+/*Text Token*/
+$text-primary: $black-900;
+$text-secondary: $pink-100;
+$text-tertiary: $orange-100;
+$text-inverse: $white-200;
diff --git a/src/styles/scss/vendors/_icomoon.scss b/src/styles/scss/vendors/_icomoon.scss
new file mode 100644
index 0000000..15b6b6e
--- /dev/null
+++ b/src/styles/scss/vendors/_icomoon.scss
@@ -0,0 +1,65 @@
+@font-face {
+    font-family: icomoon;
+    src: url('/assets/fonts/icomoon.eot?riod8q'); //necessary for internet explorer compatibility version 8 and older
+    src:
+        url('/assets/fonts/icomoon.eot?riod8q#iefix')
+            //necessary for internet explorer compatibility version 8 and older
+        format('embedded-opentype'),
+        url('/assets/fonts/icomoon.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-location:before {
+    content: '\e947';
+}
+.icon-user-plus:before {
+    content: '\e973';
+}
+.icon-briefcase:before {
+    content: '\e9ae';
+}
+.icon-menu:before {
+    content: '\e9bd';
+}
+.icon-play3:before {
+    content: '\ea1c';
+}
+.icon-arrow-right2:before {
+    content: '\ea3c';
+}
+.icon-arrow-left2:before {
+    content: '\ea40';
+}
+.icon-circle-down:before {
+    content: '\ea43';
+}
+.icon-facebook:before {
+    content: '\ea90';
+}
+.icon-instagram:before {
+    content: '\ea92';
+}
+.icon-telegram:before {
+    content: '\ea95';
+}
+.icon-twitter:before {
+    content: '\ea96';
+}