Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added #4

Merged
merged 1 commit into from
Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 54 additions & 4 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@
}
}

.box{
box-shadow: #E3FEF7 0px 4px 4px 0px;
}
.box {
box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.typewriter{
overflow: hidden;
Expand Down Expand Up @@ -185,4 +185,54 @@

.bg{
background-image: radial-gradient(closest-side,#FFFFFF,#FFFFFF);
}
}



@keyframes slide-from-left {
from {
transform: translateX(-50%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes slide-from-bottom {
from {
transform: translateY(50%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}


@keyframes slide-from-right {
from {
transform: translateX(50%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}


.animation-left-to-right {
animation: slide-from-left 1s ease-in-out forwards;
}

.animation-bottom-to-top {
animation: slide-from-bottom 1s ease-in-out forwards;
}

.animation-right-to-left {
animation: slide-from-right 1s ease-in-out forwards;
}

2 changes: 2 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Route, Routes } from 'react-router-dom'
import './App.css'
import Home from './Components/Home'
import Board from './pages/Board'
import Privacy from './Components/Privacy'



Expand All @@ -12,6 +13,7 @@ function App() {
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/Board" element={<Board/>}/>
<Route path='/privacy' element={<Privacy/>}/>
</Routes>
</div>
</>
Expand Down
2 changes: 2 additions & 0 deletions src/Components/AI.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Button from "./Button";


export default function AI() {
return (
<div className="p-[10px] md:w-[80%] lg:w-[70%] xl:w-[80%] flex flex-col items-center justify-center gap-4">
Expand All @@ -17,6 +18,7 @@ export default function AI() {
</p>
</div>
<Button />

</div>
);
}
16 changes: 5 additions & 11 deletions src/Components/Caraursel.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import car2 from "../assets/car2.png";
import QuestioningMind from "../assets/QuestioningMind.png";

export default function Carausel() {
return (
<div className="flex flex-col md:flex-row items-center justify-center w-full bg-[#7C3AED] gap-12 lg:gap-16 xl:gap-20 p-12 lg:p-16 xl:p-20">
<span className="font-bold text-center md:text-left text-5xl lg:text-6xl font-roboto leading-30 lg:leading-60 tracking-[-1.92px] text-[#FFFFFF]">EXPLORE THE POWER OF NIKARU AI</span>
<div className="hidden md:block ">
<img src={car2} alt="carausel" className="md:w-64 lg:w-72 xl:w-80" />
</div>
<div className="hidden md:block">
<img src={car2} alt="carausel" className="md:w-64 lg:w-72 xl:w-80" />
</div>
<div className="block md:hidden">
<img src={car2} alt="carausel" className="w-48" />
<div className="flex flex-col md:flex-row items-center justify-center w-full bg-[#7C3AED] gap-12 lg:gap-16 xl:gap-20 p-12 lg:p-16 xl:p-20 rounded-lg">
<span className="font-bold text-center md:text-left text-5xl lg:text-6xl font-roboto leading-30 lg:leading-60 tracking-[-1.92px] text-[#FFFFFF]">EXPLORE THE POWER OF NIKARU AI</span>
<div className="">
<img src={QuestioningMind} alt="carausel" className="w-64 md:w-64 lg:w-64 xl:w-72 rounded-lg" />
</div>
</div>
);
Expand Down
86 changes: 49 additions & 37 deletions src/Components/Card.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { TypeAnimation } from "react-type-animation";
import { useInView } from "react-intersection-observer";
import image123 from "../assets/image123.jpg";
import image21 from "../assets/image21.jpg";
import image23 from "../assets/image23.jpg";
import Group8301 from "../assets/Group8301.png";
import Group8303 from "../assets/Group8303.png";
import Group8302 from "../assets/Group8302.png";
import Group8304 from "../assets/Group8304.png";
import Iphones from "../assets/Iphones.png";
import iPhone from "../assets/iPhone.png";

export default function Card() {
const [ref1, inView1] = useInView();
Expand Down Expand Up @@ -32,16 +35,9 @@ export default function Card() {
}, [inView1, inView2, inView3, inView4, viewed1, viewed2, viewed3, viewed4]);

return (
<div className="md:max-w-[1104px] w-[95%] flex flex-col items-center justify-center gap-24">
<div className="md:max-w-[1104px] w-[95%] flex flex-col items-center justify-center gap-32">
{/* First Card */}
<div className="md:w-full w-[95%] flex flex-col md:flex-row sm:items-center justify-start items-start md:justify-between">
<div
data-aos="fade-right"
data-aos-duration="1000"
className="md:px-12 lg:px-24 flex items-center justify-center grow"
>
<img src={image123} alt="image-1" className="w-1/2 md:w-[357px]" />
</div>
<div className="md:w-full w-[95%] flex flex-col md:flex-row sm:items-center justify-start items-start md:justify-between gap-12 mt-12">
<div ref={ref1}>
{viewed1 && (
<div className="pl-2 md:px-0 flex flex-col items-start justify-start w-[95%] md:w-[544px] text-[#20294C]">
Expand All @@ -68,17 +64,20 @@ export default function Card() {
</div>
)}
</div>
{inView1 && (
<div className="w-[500px] relative ml-4 border">
<div className="absolute left-0 bottom-[-100px] animation-right-to-left">
<img src={Group8301} alt="Group" className="w-[450px]" />
</div>
<div className="absolute left-[250px] top-[-250px] animation-bottom-to-top">
<img src={Iphones} alt="iPhones" className="w-[250px] z-[100]" />
</div>
</div>
)}
</div>

{/* Second Card */}
<div className="flex flex-col md:flex-row-reverse sm:items-center justify-center md:justify-between w-[95%]">
<div
data-aos="fade-left"
data-aos-duration="1000"
className="px-12 lg:px-24"
>
<img src={image21} alt="image-2" className="w-[357px]" />
</div>
<div className="flex flex-col md:flex-row-reverse sm:items-center justify-center md:justify-between w-[95%] gap-12">
<div ref={ref2}>
{viewed2 && (
<div
Expand Down Expand Up @@ -110,17 +109,20 @@ export default function Card() {
</div>
)}
</div>
{inView2 && (
<div className="w-[500px] relative ml-4 border">
<div className="absolute left-0 bottom-[-100px] animation-left-to-right">
<img src={Group8304} alt="Group" className="w-[450px]" />
</div>
<div className="absolute left-[200px] top-[-250px] animation-bottom-to-top">
<img src={Iphones} alt="iPhones" className="w-[250px] z-[100]" />
</div>
</div>
)}
</div>

{/* Third Card */}
<div className="flex flex-col md:flex-row sm:items-center justify-center md:justify-between w-[95%]">
<div
data-aos="fade-right"
data-aos-duration="1000"
className="px-12 lg:px-24"
>
<img src={image23} alt="image-3" className="w-[357px]" />
</div>
<div className="flex flex-col md:flex-row sm:items-center justify-center md:justify-between w-[95%] gap-16">
<div ref={ref3}>
{viewed3 && (
<div className="pl-4 md:px-0 flex flex-col md:w-[544px] text-[#20294C]">
Expand Down Expand Up @@ -149,20 +151,20 @@ export default function Card() {
</div>
)}
</div>
</div>

{/* Fourth Card */}
<div className="flex flex-col md:flex-row-reverse sm:items-center justify-center md:justify-between w-[95%]">
<div
data-aos="fade-left"
data-aos-duration="1000"
className="px-12 lg:px-24"
className="px-4"
>
<img src={image23} alt="image-4" className="w-[357px]" />
<img src={Group8303} alt="image-3" className="w-[557px]" />
</div>
<div ref={ref4}>
</div>

{/* Fourth Card */}
<div className="flex flex-col md:flex-row-reverse sm:items-center justify-center md:justify-between w-[95%] relative gap-20 mb-16">
<div ref={ref4} className="flex-grow md:w-[544px] pl-4 md:px-0 text-[#20294C] mt-[-100px] ml-4">
{viewed4 && (
<div className="pl-4 md:px-0 flex flex-col md:w-[544px] text-[#20294C]">
<div>
<TypeAnimation
sequence={["Engage and Explore", 1000]}
cursor={true}
Expand All @@ -187,6 +189,16 @@ export default function Card() {
</div>
)}
</div>
{inView4 && (
<div className="w-[500px] relative ml-4 border">
<div className="absolute left-0 bottom-[-100px] animation-left-to-right">
<img src={Group8302} alt="Group" className="w-[450px]" />
</div>
<div className="absolute left-[150px] xl:left-[200px] top-[-200px] xl:top-[-250px] animation-bottom-to-top">
<img src={iPhone} alt="iPhones" className="w-[250px] xl:w-[250px] z-[100]" />
</div>
</div>
)}
</div>
</div>
);
Expand Down
31 changes: 15 additions & 16 deletions src/Components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
import { Link } from "react-router-dom";
import Logo from "./Logo";
import Love from "./Love";


export default function Footer(){
return(
<div className="flex flex-col w-full md:w-[95%] lg:w-4/5 min-h-[314px] px-[12px] md:px-[24px] py-[24px] border rounded-lg bg-[#F0F1F5] mt-16">
<div className="w-full flex justify-center md:justify-end mb-8 md:mb-0 "><Love/></div>
<div className="flex items-center justify-between w-full">
<Logo classname="sm:h-[208px] sm:w-[208px] h-1/3 w-1/3" foot='1' />
<div className="h-full flex flex-col sm:flex-row items-start justify-between sm:items-center md:w-[60%]">
<div className="text-left flex flex-col gap-2 items-start">
<span className="font-bold text-2xl">Legal</span>
<span>Privacy</span>
<span>Terms and Condition</span>
<div className="flex items-start justify-between w-full"> {/* Changed items-center to items-start */}
<Logo classname="sm:h-[208px] sm:w-[208px] h-1/3 w-1/3" foot='1' />
<div className="h-full flex flex-col sm:flex-row items-start justify-between sm:items-center md:w-[60%]">
<div className="text-left flex flex-col gap-2">
<span className="font-bold text-2xl">Legal</span>
<Link to="/Privacy"><span>Privacy</span></Link>
<Link to="/Privacy"><span>Terms and Condition</span></Link>
</div>
<div className="hidden md:block">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<span className="font-bold text-2xl">Nav</span>
<a href=""><span>About us</span></a>
<a href=""><span>Board of love</span></a>
<a href=""><span>Plugins</span></a>
<a href=""><span>Contact us</span></a>
</div>
</div>
</div>
<div className="flex flex-col ml-[-12px] sm:ml-0 gap-2">
<span className="font-bold text-2xl text-center">Contact Us</span>
<span>[email protected]</span>
</div>
<Link to="/Privacy"><span className="font-bold text-2xl text-center">Contact Us</span></Link>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
)
}
</div>
)}
2 changes: 1 addition & 1 deletion src/Components/Hamburger.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function Hamburger() {
};

return (
<div className="z-[150] w-[90%] md:w-[95%] h-[300px] lg:h-[144px] flex items-center justify-end font-roboto mr-0 md:ml-4 md:ml-0 fixed top-0 left-0">
<div className="z-[150] w-[90%] md:w-[95%] h-[120px] md:h-[300px] lg:h-[144px] flex items-center justify-end font-roboto mr-0 md:ml-4 md:ml-0 fixed top-0 left-0">
<div onClick={toggleNav} className="rounded-full bg-black text-[#FFFFFF] flex items-center justify-center px-4 py-4">
{!nav ? (
<AiOutlineMenu size={20} className="z-[100]" />
Expand Down
3 changes: 2 additions & 1 deletion src/Components/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
import Love from "./Love";
import { Link } from "react-router-dom";

export default function Navbar() {
const [nav, setNav] = useState(false);
Expand All @@ -11,7 +12,7 @@ export default function Navbar() {
<div className=" w-[95%] lg:w-4/5 min-h-[85px] rounded-lg bg-[#e4dff4] bg-opacity-100 py-[24px] px-[12px] md:px-[24px] box">
<div className="flex items-center justify-between">
<div className="flex gap-8">
<span className="text-3xl font-bold text-[#20294C]">Nikaru</span>
<Link to="/"><span className="text-3xl font-bold text-[#20294C]">Nikaru</span></Link>
<ul className="hidden md:flex gap-4 items-center text-normal justify-center text-[#20294C] font-medium leading-6 tracking-tighter">
{navItems.map((item) => (
<li key={item}>{item}</li>
Expand Down
13 changes: 13 additions & 0 deletions src/Components/Privacy.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Footer from "./Footer";
import Navbar from "./Navbar";

export default function Privacy(){
return(
<div className="w-full flex flex-col items-center justify-center">
<Navbar/>
<div className="flex items-center justify-center w-full">
<Footer/>
</div>
</div>
)
}
Binary file added src/assets/Brain.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Group8301.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Group8302.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Group8303.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Group8304.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/Iphones.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/QuestioningMind.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/iPhone.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.