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

refactor : header background #54

Merged
merged 2 commits into from
Oct 28, 2024
Merged

refactor : header background #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dc068d
refactor : header background
SANTHSIM22 Oct 27, 2024
a8e5c07
refactor : navbar
SANTHSIM22 Oct 27, 2024
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
1 change: 1 addition & 0 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function RootLayout({
return (
<html lang="en" className="dark font-satoshi">
<body className={(inter.className = "overflow-x-hidden")}>
<div className="fixed top-0 w-full h-24 z-50 backdrop-blur-md head-5 bg-black/5" />
<Navbar />
<StarsCanvas />
<Providers>{children} </Providers>
Expand Down
4 changes: 2 additions & 2 deletions src/components/edil-ozi/text-glitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ const TextGlitchEffect: FC<Props> = ({ textOne, textTwo, className }) => {
)}
>
<span className="invisible whitespace-nowrap">{textOne}</span>
<span className="absolute left-0 top-0 text-red-600 transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
<span className="absolute left-0 top-0 text-black transition-transform duration-300 ease-in-out group-hover:-translate-y-full whitespace-nowrap">
{textOne}
</span>
<span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-white whitespace-nowrap">
<span className="absolute left-0 top-0 translate-y-full transition-transform duration-300 ease-in-out group-hover:translate-y-0 text-red-600 whitespace-nowrap">
{textTwo}
</span>
</div>
Expand Down
2 changes: 0 additions & 2 deletions src/components/navbar/full-page-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import { tedxsjecAssetsPrefix } from "@/lib/utils";
import Image from "next/image";
import React from "react";
import SocialLinks from "../common/social-links";
import NavItem from "./nav-items";
import RegisterButton from "./register-button";

Expand Down Expand Up @@ -58,7 +57,6 @@ const FullPageMenu = () => {
</h1>
</div>
</div>
<SocialLinks />
</div>
</section>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Navbar = () => {
);

tl.to(".logo", { x: -300 }, "go")
.to(".reg", { y: -300 }, "go")
.to(".head-5", { y: -300 }, "go")
.to(".fullpage-menu", {
duration: 0,
display: "block",
Expand Down
98 changes: 56 additions & 42 deletions src/components/navbar/nav-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,51 +11,65 @@ interface NavHeaderProps {

const NavHeader: React.FC<NavHeaderProps> = ({ handleClick }) => {
const menuToggle = useRef(null);

const handleMenuClick = () => {
handleClick();

// Toggle overflow style on the body to enable/disable scrolling
if (document.body.style.overflow === "hidden") {
document.body.style.overflow = "auto";
} else {
document.body.style.overflow = "hidden";
}
};

return (
<header className="fixed z-[100] aboute left-0 top-0 w-screen">
<div className="header-1 flex md:py-[20px] md:px-[30px] p-[30px] justify-between items-center ">
<div className="logo">
<Link href="/">
<Image
src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
height={200}
width={200}
alt="logo"
layout="fixed"
priority={true}
/>
</Link>
</div>
<div className="flex justify-between items-center ">
<button
id="menuToggle"
ref={menuToggle}
onClick={handleClick}
className="menu-toggle bg-transparent border-none cursor-pointer"
>
<svg
viewBox="0 0 12 10"
className="hamburger"
height="40px"
width="40px"
<>
<header className="fixed z-50 aboute left-0 top-0 w-screen">
<div className="header-1 flex md:py-[15px] md:px-[30px] px-3 py-4 justify-between items-center">
<div className="logo">
<Link href="/">
<Image
src={`${tedxsjecAssetsPrefix}/logo/whiteLogo.png`}
height={200}
width={200}
alt="logo"
layout="fixed"
priority={true}
/>
</Link>
</div>
<div className="flex justify-between items-center">
<button
id="menuToggle"
ref={menuToggle}
onClick={handleMenuClick}
className="menu-toggle bg-transparent border-none cursor-pointer"
>
<path
d="M10,2 L2,2"
className="bar-1 fill-none stroke-white"
></path>
<path
d="M2,5 L10,5"
className="bar-2 fill-none stroke-white"
></path>
<path
d="M10,8 L2,8"
className="bar-3 fill-none stroke-white"
></path>
</svg>
</button>
<svg
viewBox="0 0 12 10"
className="hamburger"
height="40px"
width="40px"
>
<path
d="M10,2 L2,2"
className="bar-1 fill-none stroke-white"
></path>
<path
d="M2,5 L10,5"
className="bar-2 fill-none stroke-white"
></path>
<path
d="M10,8 L2,8"
className="bar-3 fill-none stroke-white"
></path>
</svg>
</button>
</div>
</div>
</div>
</header>
</header>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/navbar/nav-items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ type NavItemProps = {

const NavItem = ({ href, textOne, textTwo }: NavItemProps) => {
return (
<li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black text-[40px] md:text-[50px]">
<li className="listo list-none overflow-hidden mt-[10px] leading-[1] font-bold text-black text-[35px] md:text-[43px]">
<Link
href={href}
className=" my-2 text-xl font-bold text-[40px] md:text-[50px]"
className=" my-2 text-xl font-bold text-[35px] md:text-[43px]"
rel="noopener noreferrer"
target="_blank"
>
<TextGlitch
textOne={textOne}
textTwo={textTwo}
className="font-bold text-black text-[40px] md:text-[50px] leading-tight"
className="font-bold text-black text-[35px] md:text-[43px] leading-tight"
/>
</Link>
</li>
Expand Down
45 changes: 12 additions & 33 deletions src/components/widget/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,21 @@ type TimeLeft = {

const StaticShadow = ({ children }: { children: React.ReactNode }) => {
return (
<motion.div
<div
className="relative w-72 h-72 md:w-[500px] md:h-[500px]"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
style={{
filter: 'drop-shadow(0 0 15px rgba(255, 255, 255, 0.4))'
}}
>
{children}
</motion.div>
</div>
)
}

const FlipCard = ({ value, label }: { value: number; label: string }) => {
return (
<motion.div
<div
className="flex flex-col items-center justify-center bg-gradient-to-b from-red-900 to-red-950 rounded-lg shadow-lg p-2 w-full aspect-square overflow-hidden border border-red-500/30"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: "easeOut" }}
>
<div className="relative w-full h-2/3 bg-black/30 rounded-md flex items-center justify-center">
<AnimatePresence mode="popLayout">
Expand All @@ -53,7 +47,7 @@ const FlipCard = ({ value, label }: { value: number; label: string }) => {
</AnimatePresence>
</div>
<span className="text-xs sm:text-sm md:text-base capitalize text-white mt-2 font-semibold">{label}</span>
</motion.div>
</div>
)
}

Expand Down Expand Up @@ -112,12 +106,7 @@ export default function HeroHighlight() {
</svg>

<div className="container mx-auto py-8 lg:py-0 flex flex-col-reverse lg:flex-row items-center justify-between relative z-10">
<motion.div
className="lg:w-1/2 space-y-8 hero-2"
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<div className="lg:w-1/2 space-y-8 hero-2">
<h1 className="text-[28px] py-1 md:text-5xl font-satoshi lg:mt-16 font-extrabold bg-clip-text text-white">
Ideas Worth Spreading
</h1>
Expand All @@ -139,7 +128,7 @@ export default function HeroHighlight() {
<p>Venue: Grand Convention Center</p>
</div>
</div>
</motion.div>
</div>
<div className="lg:w-[50%] lg:mt-0 flex flex-col mb-10 items-center lg:items-end">
<StaticShadow>
<Image
Expand All @@ -149,29 +138,19 @@ export default function HeroHighlight() {
alt="TEDx Event Logo"
/>
</StaticShadow>
<motion.p
className="text-xl md:text-3xl font-semibold mt-4 lg:mr-2 text-white"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
>
Life - Explore What&#39;s Worth Living
</motion.p>
<p className="text-xl md:text-3xl font-semibold mt-4 lg:mr-2 text-white">
Life - Explore What&#39;s Worth Living
</p>
</div>
</div>
<motion.div
className="container mx-auto px-4 py-2 relative z-10"
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8, ease: "easeOut" }}
>
<div className="container mx-auto px-4 py-2 relative z-10">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-8 font-satoshi text-white">Event Starts In</h2>
<div className="grid grid-cols-4 font-satoshi gap-2 sm:gap-4 md:gap-6 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto">
{timeUnits.map((unit) => (
<FlipCard key={unit} value={timeLeft[unit]} label={unit} />
))}
</div>
</motion.div>
</div>
</section>
)
}
}
Loading