Skip to content

Commit 4e1a346

Browse files
JerttJertt
committed
installed the flag-icons package for language icons, will be editing this further later
1 parent 99d4ea4 commit 4e1a346

File tree

11 files changed

+345
-9
lines changed

11 files changed

+345
-9
lines changed

‎package-lock.json

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@headlessui/react": "^1.6.6",
7+
"@heroicons/react": "^1.0.6",
68
"@testing-library/jest-dom": "^5.16.5",
79
"@testing-library/react": "^13.3.0",
810
"@testing-library/user-event": "^13.5.0",
11+
"flag-icon-css": "^4.1.7",
12+
"flag-icons": "^6.6.6",
913
"i18next": "^21.9.1",
1014
"i18next-browser-languagedetector": "^6.1.5",
1115
"i18next-http-backend": "^1.4.1",

‎public/assets/locales/al/translation.json

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎public/assets/locales/en/translation.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"welcome_to_react": "Welcome to React and react-i18next"
2+
"Projects": "Projects",
3+
"Website": "Website",
4+
"Github": "Github"
35
}

‎public/assets/locales/sq/translation.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"Projects": "Projektet"
3+
}

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
2728
<title>React App</title>
2829
</head>
2930
<body>

‎src/App.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import './index.css';
1+
import "./index.css";
2+
import Navbar from './components/Navbar'
3+
import Hero from './components/Hero'
4+
5+
26

37
function App() {
48
return (
59
<>
6-
10+
<Navbar />
11+
<Hero />
712
</>
813
);
914
}

‎src/components/Hero.jsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react'
2+
import { useTranslation } from "react-i18next";
3+
4+
// const languages = [
5+
// {
6+
// code: 'en',
7+
// name: 'English',
8+
// country_code: 'gb'
9+
// },
10+
// {
11+
// code: 'sq',
12+
// name: 'Albanian',
13+
// country_code: 'al'
14+
// },
15+
// ]
16+
17+
export default function Hero() {
18+
const { t } = useTranslation();
19+
return (
20+
<>
21+
{/* This is a tailwindcss block from tailblocks.cc */}
22+
<section class="text-gray-600 body-font">
23+
<div class="container px-5 py-32 m-auto">
24+
<div class="flex flex-col text-center w-full mb-20">
25+
<h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Multiple Laungage App</h2>
26+
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900">Lorem Ipsum Dolor </h1>
27+
</div>
28+
<div class="flex flex-wrap -m-4">
29+
<div class="p-4 md:w-1/3">
30+
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
31+
<div class="flex items-center mb-3">
32+
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
33+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
34+
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
35+
</svg>
36+
</div>
37+
<h2 class="text-gray-900 text-lg title-font font-medium">Title Here</h2>
38+
</div>
39+
<div class="flex-grow">
40+
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit possimus animi provident earum, atque harum praesentium inventore explicabo eos excepturi</p>
41+
<a href class="mt-3 text-indigo-500 inline-flex items-center">Learn More
42+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
43+
<path d="M5 12h14M12 5l7 7-7 7"></path>
44+
</svg>
45+
</a>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="p-4 md:w-1/3">
50+
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
51+
<div class="flex items-center mb-3">
52+
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
53+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
54+
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
55+
<circle cx="12" cy="7" r="4"></circle>
56+
</svg>
57+
</div>
58+
<h2 class="text-gray-900 text-lg title-font font-medium">Title Here</h2>
59+
</div>
60+
<div class="flex-grow">
61+
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit possimus animi provident earum, atque harum praesentium inventore explicabo eos excepturi</p>
62+
<a href class="mt-3 text-indigo-500 inline-flex items-center">Learn More
63+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
64+
<path d="M5 12h14M12 5l7 7-7 7"></path>
65+
</svg>
66+
</a>
67+
</div>
68+
</div>
69+
</div>
70+
<div class="p-4 md:w-1/3">
71+
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
72+
<div class="flex items-center mb-3">
73+
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
74+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
75+
<circle cx="6" cy="6" r="3"></circle>
76+
<circle cx="6" cy="18" r="3"></circle>
77+
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
78+
</svg>
79+
</div>
80+
<h2 class="text-gray-900 text-lg title-font font-medium">Title Here</h2>
81+
</div>
82+
<div class="flex-grow">
83+
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit possimus animi provident earum, atque harum praesentium inventore explicabo eos excepturi</p>
84+
<a href class="mt-3 text-indigo-500 inline-flex items-center">Learn More
85+
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
86+
<path d="M5 12h14M12 5l7 7-7 7"></path>
87+
</svg>
88+
</a>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</section>
95+
</>
96+
)
97+
}

0 commit comments

Comments
 (0)