diff --git a/package-lock.json b/package-lock.json index d7aac05..5293759 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "react-dom": "^18.2.0", "react-h5-audio-player": "^3.9.1", "react-router-dom": "^6.23.1", - "react-top-loading-bar": "^2.3.1" + "react-top-loading-bar": "^2.3.1", + "react-typed": "^2.0.12" }, "devDependencies": { "@types/react": "^18.2.43", @@ -4098,6 +4099,17 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-typed": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-2.0.12.tgz", + "integrity": "sha512-sn59lrb4NKgvQLDGBRWM4wRNEz5Fp37F0BrLA2cKUmDqPSyQJOOiFigz+6wJof0o99QoE16nVCa3B3ID34ejsg==", + "dependencies": { + "typed.js": "^2.1.0" + }, + "peerDependencies": { + "react": ">16.8.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -4598,6 +4610,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typed.js": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.1.0.tgz", + "integrity": "sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==" + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 969dc01..f47a139 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "react-dom": "^18.2.0", "react-h5-audio-player": "^3.9.1", "react-router-dom": "^6.23.1", - "react-top-loading-bar": "^2.3.1" + "react-top-loading-bar": "^2.3.1", + "react-typed": "^2.0.12" }, "devDependencies": { "@types/react": "^18.2.43", diff --git a/public/ai.svg b/public/ai.svg new file mode 100644 index 0000000..469720a --- /dev/null +++ b/public/ai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/e-book.jpeg b/public/e-book.jpeg new file mode 100644 index 0000000..1dcb6a8 Binary files /dev/null and b/public/e-book.jpeg differ diff --git a/public/home1.png b/public/home1.png new file mode 100644 index 0000000..4665966 Binary files /dev/null and b/public/home1.png differ diff --git a/public/secured.svg b/public/secured.svg new file mode 100644 index 0000000..1b86142 --- /dev/null +++ b/public/secured.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/video.jpg b/public/video.jpg new file mode 100644 index 0000000..ee613cb Binary files /dev/null and b/public/video.jpg differ diff --git a/src/components/Home/VideoButton.jsx b/src/components/Home/VideoButton.jsx new file mode 100644 index 0000000..87a4aff --- /dev/null +++ b/src/components/Home/VideoButton.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import '../../css/Home.css' + +export default function VideoButton() { + return ( + + ); +} diff --git a/src/css/Home.css b/src/css/Home.css new file mode 100644 index 0000000..200ba6b --- /dev/null +++ b/src/css/Home.css @@ -0,0 +1,306 @@ +.flex { + display: flex; +} +.flex-col { + flex-direction: column; +} +.item-center { + align-items: center; +} +.justify-center { + justify-content: center; +} +.animated-img { + animation: moveUpDown 2s infinite; + width: 100%; +} +.w-full { + width: 100%; +} +.flex-row { + flex-direction: row; +} +@keyframes moveUpDown { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-20px); /* Adjust the distance as needed */ + } + 100% { + transform: translateY(0); + } +} +.p-4 { + padding: 8px; +} +.font-bold { + font-weight: bold; +} + +.home-container { + display: flex; + flex-direction: row; + padding: 80px 4px; + align-items: center; + justify-content: center; + width: 100%; + /* flex sm:flex-row flex-col item-center justify-center w-full p-4 */ +} +.img-container { + /* flex item-center justify-center w-full */ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; +} + +.home-heading { + font-size: 4.5rem; +} + +.badge-feat { + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + background-color: #d2daff; + border-radius: 2.2rem; + color: black; + outline: none; + border: 0; + font-size: 1.5rem; + padding: 10px 30px; +} + +.feat-1 { + display: flex; + flex-direction: row; + padding: 10px; + margin: 20px 0px; + align-items: center; + justify-content: center; + width: 100%; + border-radius: 2rem; +} + +.feat-1 img { + width: 250px; +} + +.feat-2 { + display: flex; + flex-direction: row; + padding: 10px; + padding-bottom: 100px; + margin: 20px 0px; + align-items: center; + justify-content: space-around; + width: 100%; + border-radius: 2rem; +} + +.gap-2{ + gap: 2px; +} + +.feat-card { + width: 350px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 20px; + border-radius: 20px; + border: 1px black solid; + background-color: #eef1ff; +} + +.feat-card-2{ + width: 1000px; + display: flex; + flex-direction:column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 20px; + border-radius: 20px; + border: 1px black solid; + background-color: #eef1ff; +} + +.feat-card-content { + display: flex; + flex-direction: column; + gap: 3px; +} + +.feat-card p { + font-size: 1rem; +} + +.feat-card-content h5{ + font-weight: 700; +} + +.feat-card img { + padding: 4px; + border-radius: 10px; + width: 100%; +} + +.card-line { + border: 1px; + border-bottom: 1px black solid; +} + +.feat-3{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 20px; + padding-bottom: 100px; +} + +.feat-3 img{ + width: 60px; + border-radius: 100%; +} + + + +.gap-10{ + gap: 40px; +} +.font-semibold{ + font-weight: 500; +} +/* Responsive adjustments */ +@media (max-width: 1024px) { + .home-heading { + font-size: 2rem; + } +} +@media (max-width: 768px) { + .home-heading { + font-size: 1.5rem; + } + .animated-img { + max-width: 200px; /* Adjust for smaller screens */ + } +} +@media (max-width: 480px) { + .home-heading { + font-size: 2.2rem; + } + + .p-4 { + padding: 8px; + } + .animated-img { + max-width: 250px; /* Further adjustment for very small screens */ + } + + .home-container { + display: flex; + flex-direction: column; + padding: 4px; + align-items: center; + justify-content: center; + width: 100%; + /* flex sm:flex-row flex-col item-center justify-center w-full p-4 */ + } + .img-container { + /* flex item-center justify-center w-full */ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + padding: 40px 0px; + } + + .feat-1 { + display: flex; + flex-direction: column; + padding: 10px; + margin: 20px 0px; + align-items: center; + justify-content: center; + width: 100%; + border-radius: 2rem; + } + .feat-1 img { + width: 200px; + } + + .feat-2 { + display: flex; + flex-direction: column; + padding: 10px; + padding-bottom: 100px; + margin: 20px 0px; + align-items: center; + justify-content: space-around; + width: 100%; + border-radius: 2rem; + gap: 50px; + text-align: center; + } + + .feat-card { + width: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 20px; + border-radius: 20px; + border: 1px black solid; + background-color: #eef1ff; + } + + .feat-card-2{ + width: 300px; + display: flex; + flex-direction:column; + align-items: center; + justify-content: center; + gap: 20px; + padding: 20px; + border-radius: 20px; + border: 1px black solid; + background-color: #eef1ff; + } +} + +.video-button { + display: flex; + justify-content: center; + color: #fff; + width: 80px; + height: 80px; + border-radius: 100%; + background: linear-gradient(30deg, rgb(255, 130, 0) 20%, rgb(255, 38, 0) 80%); + transition: all 0.3s ease-in-out 0s; + box-shadow: rgba(70, 68, 68, 0.698) 0px 0px 0px 0px; + animation: 1.2s cubic-bezier(0.8, 0, 0, 1) 0s infinite normal none running + pulse; + align-items: center; + border: 0; +} + +.video-button:is(:hover, :focus) { + transform: scale(1.2); +} + +@keyframes pulse { + 100% { + box-shadow: 0 0 0 45px rgba(0, 0, 0, 0); + } +} diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 2bc4297..1953225 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,9 +1,90 @@ -import React from 'react' +import React from "react"; +import "../css/Home.css"; +import { ReactTyped } from "react-typed"; +import VideoButton from "../components/Home/VideoButton"; -const Home = () => { +export default function Home() { return ( -
Home
- ) -} +
+ {/* Introduction */} +
+
+

चाणक्य नीति

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
Dive into the World of Chanakya through E-Books
+

+ Discover the profound wisdom of Chanakya with our meticulously + curated e-books. Each page offers a gateway into the timeless + teachings of this ancient sage, providing you with insights and + strategies that remain relevant in today’s world. +

+
+
+
+ +
+

MULTIMEDIA CONTENT

+

+ Audio Files, Books, Videos on Chanakya’s Life +

+
+
+
+ +
+
+
Video and Audio Experiences
+

+ Immerse yourself in the wisdom of Chanakya through our captivating + blend of video and audio content. Explore his timeless teachings + with clarity and depth, as every word and gesture comes alive, + enriching your journey of learning and discovery. +

+
+
+
-export default Home; + {/* Features */} +
+
+
+ +
AI-Powered Translations
+
+

+ Explore the world without boundaries with our AI-powered language + translation. Break down language barriers effortlessly as our + advanced technology seamlessly transforms content into your + preferred language. Whether you're discovering ancient wisdom or + connecting with global insights, our translation AI ensures every + word resonates, bridging cultures and uniting minds. +

+
+
+
+ ); +}