Skip to content

Commit

Permalink
updated alignment of first section for medium screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Ritika Mishra committed Nov 15, 2024
1 parent a986e0d commit 984c7a3
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/components/LandingComp/HeadSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,38 +33,38 @@ const HeadSection: React.FC = () => {
return (
<>
<Navbar isDisplay={true} />
<section className="w-full flex items-center justify-center px-4 sm:px-20 md:px-20 lg:px-0 mt-10 sm:mt-20">
<div className="px-2 sm:px-6 space-y-6 sm:space-y-10 md:space-y-16 max-w-6xl mx-auto flex flex-col items-center justify-center">
<div className="flex flex-col lg:flex-row justify-center items-center gap-10 sm:gap-12 md:gap-12 lg:gap-12 w-full">
<section className="w-full flex items-center justify-center px-4 sm:px-10 md:px-8 lg:px-6 mt-20 sm:mt-10">
<div className="px-4 sm:px-6 md:px-8 space-y-4 sm:space-y-8 md:space-y-10 lg:space-y-12 max-w-6xl mx-auto flex flex-col items-center justify-center">
<div className="flex flex-col lg:flex-row justify-center items-center gap-6 sm:gap-8 md:gap-10 lg:gap-12 w-full">

{/* Text Section */}
<div className="w-full lg:w-1/2 lg:text-left">
<div className="text-lg sm:text-xl lg:text-[1rem] sm:leading-none md:text-6xl xl:text-[3.5rem] font-bold tracking-tighter font-lobster">
<div className="w-full lg:w-1/2 lg:text-left mb-4">
<div className="text-base sm:text-lg lg:text-[1rem] md:text-3xl xl:text-[2.5rem] font-bold tracking-tighter font-lobster">
<span className="block text-base sm:text-lg text-gray-500 transition tracking-wider">
Hi, Welcome to Chords
</span>

<span className="inline-block bg-clip-text font-lobster cursor-default tracking-wide mr-1 duration-300 transition-all text-xl sm:text-2xl lg:text-[2.5rem] leading-tight sm:leading-none">
<span className="inline-block bg-clip-text font-lobster cursor-default tracking-wide mr-1 duration-300 transition-all text-lg sm:text-xl lg:text-[2rem] leading-tight sm:leading-none">
Tune Into Your EXG Data
</span>

<span className="inline-block text-xl sm:text-2xl lg:text-[2.5rem] mr-2 tracking-wide duration-300 transition-all leading-tight sm:leading-none">
<span className="inline-block text-lg sm:text-xl lg:text-[2rem] mr-2 tracking-wide duration-300 transition-all leading-tight sm:leading-none">
With
</span>

<span className="inline-block bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent text-xl sm:text-2xl lg:text-[2.5rem] bg-clip-text font-lobster cursor-default tracking-wide duration-300 transition-all leading-tight sm:leading-none">
<span className="inline-block bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent text-lg sm:text-xl lg:text-[2rem] bg-clip-text font-lobster cursor-default tracking-wide duration-300 transition-all leading-tight sm:leading-none">
Chords
</span>

<div className="w-full text-sm text-gray-500 dark:text-gray-500 font-medium transition-all mt-2 sm:mt-4 tracking-wide">
<div className="w-full text-sm text-gray-500 dark:text-gray-500 font-medium transition-all mt-4 sm:mt-3 tracking-wide">
<span className="inline">Transform bio signals into clear, insightful visuals, enabling deeper </span>
<span className="inline">understanding of physiological patterns and processes.</span>
</div>
</div>

<div className="flex flex-col sm:flex-row justify-center items-center sm:justify-start md:justify-start gap-4 sm:gap-6 space-y-0 sm:space-y-0 my-[2rem] ">
<div className="flex flex-col sm:flex-row justify-center items-center sm:justify-start md:justify-start gap-3 sm:gap-5 space-y-0 my-10">
<Link href="/stream">
<Button className="hidden sm:flex items-center justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-full font-semibold">
<Button className="hidden sm:flex items-center justify-center py-2 px-4 sm:py-2 sm:px-6 rounded-full font-semibold">
<Image
src={currentTheme === "dark" ? "./assets/dark/favicon.ico" : "./assets/light/favicon.ico"}
width={16}
Expand All @@ -78,15 +78,15 @@ const HeadSection: React.FC = () => {
<Link href="https://github.com/upsidedownlabs/Chords-Arduino-Firmware" target="_blank">
<Button
variant="outline"
className="hidden sm:flex items-center justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-full border border-gray-300 text-gray-600 font-semibold"
className="hidden sm:flex items-center justify-center py-2 px-4 sm:py-2 sm:px-6 rounded-full border border-gray-300 text-gray-600 font-semibold"
>
<GitHubLogoIcon className="mr-2 h-5 w-5" />
<span>Arduino Firmware</span>
</Button>
</Link>
</div>

</div>

{/* Animation Section */}
<div className="w-full lg:w-1/2 flex flex-row justify-center items-center">
<svg viewBox="0 0 380 180" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
Expand Down

0 comments on commit 984c7a3

Please sign in to comment.