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.

Sign up for GitHub

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 icons along with tilty effect #326

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added icons along with tilty effect #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 13 additions & 0 deletions src/components/AboutUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,4 +242,17 @@ h1::before {
transform: translateX(-100%);
}
}
.copilot-icon{
color: rgb(18, 76, 163);
font-size: 200px; /* Increase the size of the icon */
animation: spin 6s linear infinite; /* Add animation */
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

24 changes: 20 additions & 4 deletions src/components/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import Naman from "../assets/Naman.jpg";
import Footer from "./Footer";
import { particles } from "./Particles.jsx";
import BackToTop from "./BottomToTop";
import { GiAtom } from "react-icons/gi";
import { GiAbstract091 } from "react-icons/gi";
import { VscCopilot } from "react-icons/vsc";
import { GiComputerFan } from "react-icons/gi";

const AboutUs = () => {
const [contributors, setContributors] = useState([]);
Expand Down Expand Up @@ -78,15 +82,22 @@ const AboutUs = () => {
<Particles id="tsparticles" options={useMemo(() => particles, [])} />
<BackToTop />
<div className="about-content items-center mb-24 ">
<span className="image-container image-container-one grid justify-center">

{/* <span className="image-container image-container-one grid justify-center">
<Tilty>
<img
src={aboutImage}
alt="About us"
className="ml-10 shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition"
/>
</Tilty>
</span>
</span> */}
<div className="flex justify-center align-center">
<Tilty>
<GiAbstract091 className="copilot-icon" />
</Tilty>
</div>

<div className="text-container flex-1">
<h1 className="rounded-md about-title text-4xl text-center italic font-bold p-2 mb-8 mt-[100px] bg-gradient-to-r from-sky-500">
About Us
Expand All @@ -103,15 +114,20 @@ const AboutUs = () => {
</div>

<div className="our-vision mb-28 ">
<div className="image-container image-container-two grid justify-center ml-25">
<div className="flex justify-center align-center">
<Tilty>
<GiAtom className="copilot-icon mb-10" />
</Tilty>
</div>
{/* <div className="image-container image-container-two grid justify-center ml-25">
<Tilty>
<img
src={carImage}
alt="About us"
className="shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition mb-10"
/>
</Tilty>
</div>
</div> */}
<div className="text-container mx-auto flex-1 text-left">
<h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2 mb-8 bg-gradient-to-l from-sky-500">
Our Vision
Expand Down