Skip to content

Commit

Permalink
Buttons updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amanmahe
Amanmahe committed Nov 15, 2024
2 parents e6737d3 + 984c7a3 commit 3713570
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 115 deletions.
1 change: 1 addition & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@
height: 50px;
animation: spin 1s linear infinite;
}

.fade-in {
opacity: 0;
animation: fadeIn 0.9s ease-in-out forwards;
Expand Down
4 changes: 2 additions & 2 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ const page = () => {
<>
<div className="flex flex-col">
<HeadSection />
<Separator className="mt-20" />
<Separator className="mt-12" />
<Steps />
<Separator className="mt-20" />
<Separator className="mt-12" />
<Features />
<Separator className="mt-12" />
<TechStack />
Expand Down
4 changes: 2 additions & 2 deletions src/components/Connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -986,7 +986,7 @@ const Connection: React.FC<ConnectionProps> = ({
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Save Data as Zip</p>
<p>Save Recording</p>
</TooltipContent>
</Tooltip>

Expand All @@ -1001,7 +1001,7 @@ const Connection: React.FC<ConnectionProps> = ({
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Delete All Data</p>
<p>Delete Recording</p>
</TooltipContent>
</Tooltip>
</div>
Expand Down
12 changes: 7 additions & 5 deletions src/components/LandingComp/FAQSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const FAQSection = () => {
answer: (
<>
Chords supports an array format: [A0, A1, ..., A5, counter], where
A0-A5 are raw signal values and counter is a uint8_t (0-255). Array
A0-A5 are raw signal values and counter is a uint8_t (0-255). Array
example : [468, 472, 463, 466, 465, 434, 10]. For implementation
details, see our{" "}
<Link
Expand Down Expand Up @@ -166,11 +166,13 @@ const FAQSection = () => {
},
];
return (
<section className="w-full pb-8 pb-12 md:pb-24 lg:pb-24 mx-auto lg:md:sm:px-0 px-6 sm:px-24 md:px-24 lg:px-16 xl:px-24 2xl:px-10">
<section className="w-full pb-8 md:pb-24 lg:pb-24 mx-auto lg:md:sm:px-0 px-4 md:px-24 lg:px-12">
<div className="mx-auto mt-8 max-w-6xl xl:px-8 ">
<h1 className="text-3xl font-bold text-left text-foreground md:text-4xl lg:text-5xl pb-8">
Frequently Asked Questions
</h1>
<div className="space-y-4">
<h1 className="text-2xl font-bold tracking-wide sm:text-3xl md:text-3xl text-left text-foreground pb-8">
Frequently Asked Questions
</h1>
</div>
<Accordion type="single" collapsible className=" max-w-7xl">
{FAQs.map((faq, index) => (
<AccordionItem value={`item-${index}`} key={index}>
Expand Down
22 changes: 12 additions & 10 deletions src/components/LandingComp/Features.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function Features() {
{
title: "Record & Save Data",
description:
"Record and save data for future reference. Export data in CSV/ZIP format for further analysis.",
"Record and save data for future reference. Export data in CSV format for further analysis.",
image: "./assets/DownloadIcon.png",
},
{
Expand All @@ -39,20 +39,22 @@ export function Features() {
];

return (
<section className="w-full py-12">
<section className="w-full pt-12">
<div className="container px-4 md:px-24 lg:px-12 xl:px-6 max-w-6xl">
<div className="flex flex-col items-start justify-start space-y-3 sm:space-y-4 md:space-y-5 lg:space-y-6 text-left">
<div className="space-y-2 sm:space-y-3 md:space-y-4 flex flex-col justify-start items-start pl-2">
<h1 className="text-3xl font-bold tracking-tighter sm:text-5xl text-left">
<div className="flex flex-col items-start justify-start space-y-3 text-left">
<div className="space-y-2 flex flex-col justify-start items-start pl-2">
<h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide text-left">
<Chords /> is packed with features
</h1>
<p className="max-w-xs sm:max-w-lg md:max-w-xl lg:max-w-full text-sm sm:text-base md:text-xl text-muted-foreground">
An overview of all the core features <Chords /> provides.
</p>
</div>

<p className="text-xs sm:text-sm md:text-base lg:text-lg text-muted-foreground">
An overview of all the core features <Chords /> provides.
</p>
</div>
</div>

{/* Grid Layout for Cards */}
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-12 pl-2">
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pt-12 ">
{features.map((feature, index) => (
<Card
key={index}
Expand Down
74 changes: 36 additions & 38 deletions src/components/LandingComp/HeadSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,59 +33,57 @@ const HeadSection: React.FC = () => {
return (
<>
<Navbar isDisplay={true} />
<section className="w-full flex items-center justify-center px-4 sm:px-8 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">
<span className="block text-lg sm:text-xl text-gray-500 transition tracking-wider">
<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 duration-300 transition-all text-2xl sm:text-3xl lg:text-[2.5rem] 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-2xl sm:text-3xl lg:text-[2.5rem] mr-2 tracking-wide duration-300 transition-all 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-2xl sm:text-3xl lg:text-[2.5rem] bg-clip-text font-lobster cursor-default tracking-wide duration-300 transition-all 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">
<span className="block">Transform bio signals into clear, insightful visuals, enabling deeper</span>
<span className="block">understanding of physiological patterns and processes.</span>
<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 space-y-4 text-center mt-6 sm:mt-12">
<div className="flex flex-col sm:flex-row justify-center items-center sm:justify-start md:justify-start gap-4 gap-4 sm:gap-6 space-y-0 sm:space-y-0">
<Link href="/stream">
<Button className="flex items-center justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-xl font-semibold">
<Image
src={currentTheme === "dark" ? "./assets/dark/favicon.ico" : "./assets/light/favicon.ico"}
width={16}
height={16}
alt="logo"
className="mr-2"
/>
<span>Visualize Now</span>
</Button>
</Link>
<Link href="https://github.com/upsidedownlabs/Chords-Arduino-Firmware" target="_blank">
<Button
variant="outline"
className="flex items-center justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-xl 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 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-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}
height={16}
alt="logo"
className="mr-2"
/>
<span>Visualize Now</span>
</Button>
</Link>
<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-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>

Expand All @@ -112,9 +110,9 @@ c 1.4089684,-1.39202 2.8179419,-2.78405 4.4681851,-4.13231 1.6502432,-1.34827 3.
to="400,0"
dur="4s"
begin="0s"
repeatCount="indefinite"
repeatCount="indefinite"
keySplines="0.4 0 0.2 1"
keyTimes="0; 1"/>
keyTimes="0; 1" />
</line>
</svg>
</div>
Expand Down
5 changes: 2 additions & 3 deletions src/components/LandingComp/Steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,8 @@ const CardSlider = () => {
alt={currentCard.title}
width={1500}
height={500}
className={`${
fadeIn ? 'fade-in' : ''
} rounded-md object-cover cursor-pointer lg:max-h-[500px] transition-opacity duration-500 ease-in-out`}
className={`${fadeIn ? 'fade-in' : ''
} rounded-md object-cover cursor-pointer lg:max-h-[500px] transition-opacity duration-500 ease-in-out`}
onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
onClick={handleImageClick}
Expand Down
111 changes: 56 additions & 55 deletions src/components/LandingComp/TechStack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,64 +60,65 @@ const Stack = () => {
];
return (
<section className="w-full pt-12">
<div className="container grid grid-cols-1 lg:grid-cols-2 items-center gap-8 px-6 sm:px-16 md:px-24 lg:px-16 xl:px-24 max-w-7xl ">

{/* Left Side (Text Content) */}
<div className="space-y-6 text-left ">
<div className="space-y-3">
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
<span className="block"> {/* Use block to force line break */}
<Chords /> is
</span>
<span className="block"> {/* Use block to force line break */}
open-source,
</span>
<span className="block"> {/* Use block to force line break */}
and free to use.
</span>
</h2>
<p className="max-w-md pt-14 text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
It is powered by the following technologies, making it super fast, efficient, and reliable.
</p>
</div>
<div className="pt-14 w-60">
<Link href="https://github.com/upsidedownlabs/Chords-Web" target="_blank">
<Button className="flex items-center w-full justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-xl font-semibold">
<span>Source Code</span>
</Button>
</Link>
</div>
</div>
<div className="container grid grid-cols-1 lg:grid-cols-2 items-center gap-8 px-6 sm:px-16 md:px-24 lg:px-16 xl:px-24 max-w-7xl ">

{/* Right Side (Images) */}
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 ">
{stack.map((item, index) => (
<Link
key={index}
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="flex flex-row items-start p-6 space-x-4 transition-transform transform rounded-lg border"
>
<Image
src={item.logo}
alt={item.name}
width={60}
height={60}
className="w-8 h-8"
/>
<div className="flex flex-col">
<h3 className="text-lg font-semibold">{item.name}</h3>
<p className="text-sm text-muted-foreground">{item.description}</p>
</div>
</Link>
))}
</div>
{/* Left Side (Text Content) */}
<div className="space-y-6 text-left ">
<div className="space-y-3">
<div className="space-y-4">
<h2 className="text-2xl font-bold tracking-wide sm:text-3xl md:text-3xl">
<span className="block">{/* Force line break */}
<Chords /> is open-source,
</span>

<span className="block">{/* Force line break */}
and free to use.
</span>
</h2>
</div>

<p className="max-w-md pt-6 text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
It is powered by the following technologies, making it super fast, efficient, and reliable.
</p>
</div>
<div className="pt-6 w-60">
<Link href="https://github.com/upsidedownlabs/Chords-Web" target="_blank">
<Button className="flex items-center w-full justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-xl font-semibold">
<span>Source Code</span>
</Button>
</Link>
</div>
</div>


</div>
</section>
{/* Right Side (Images) */}
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-2 ">
{stack.map((item, index) => (
<Link
key={index}
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="flex flex-row items-start p-6 space-x-4 transition-transform transform rounded-lg border"
>
<Image
src={item.logo}
alt={item.name}
width={60}
height={60}
className="w-8 h-8"
/>
<div className="flex flex-col">
<h3 className="text-lg font-semibold">{item.name}</h3>
<p className="text-sm text-muted-foreground">{item.description}</p>
</div>
</Link>
))}
</div>



</div>
</section>


);
Expand Down

0 comments on commit 3713570

Please sign in to comment.