-
-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Statistics, Icon & New component layout + badges (#12)
* 🚚 Rename marketing-components to marketing-ui * 🚚 Sort manually alphabetically components * chore: Add @radix-ui/react-slot v1.1.0 & update lucide-react to v 0.427.0 * 💄 Add icon to navigation * 🚚 Add & move Shadcn UI based components * 🎨 refactor menus * ✨ Add icon & badges names & description * ✨ Add Variant2FeatureFourImages component for less animated feature section * ✨ Improve card variant * 🐛 fix overflow on chromium * 💄 Improve layout & repsonsive * 💄 Improve caption styles for different text sizes * ✨ Add AnimatedNumberVariant1 component for animated numbers on scroll
- Loading branch information
1 parent
4867645
commit 9e51fc1
Showing
34 changed files
with
873 additions
and
277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
171 changes: 171 additions & 0 deletions
171
src/app/(components)/marketing-ui/features/feature-four-images/variant1.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| "use client"; | ||
| import React, { useEffect, useState } from "react"; | ||
| import "#/src/styles/globals.css"; | ||
| import { cn } from "#/src/utils/cn"; | ||
|
|
||
| //TODO : Improve mobile version to display the image down the corresponding text instead of at the full bottom | ||
|
|
||
| const data = [ | ||
| { | ||
| title: "Visit the cuicui.day website", | ||
| content: | ||
| "Visit the cuicui.day website and browse through the dozens of available components to help you build your web or mobile application.", | ||
| srcImage: | ||
| "https://images.unsplash.com/photo-1717501219716-b93a67d2f7b2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8", | ||
| }, | ||
| { | ||
| title: "Browse the site and choose your component", | ||
| content: | ||
| "Browse the categories, the variants of each component, try them out, and integrate them into your project with just a few clicks.", | ||
| srcImage: | ||
| "https://images.unsplash.com/photo-1717501219074-943fc738e5a2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8M3x8fGVufDB8fHx8fA%3D%3D", | ||
| }, | ||
| { | ||
| title: "Set up your environment", | ||
| content: | ||
| "Set up your development environment to integrate Cuicui library components. You can customize them infinitely to match your branding guidelines.", | ||
| srcImage: | ||
| "https://images.unsplash.com/photo-1717501218636-a390f9ac5957?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Nnx8fGVufDB8fHx8fA%3D%3D", | ||
| }, | ||
| { | ||
| title: "Copy and paste the code", | ||
| content: | ||
| "Copy and paste the code generated by the Cuicui library into your project and enjoy modern, ready-to-use components.", | ||
| srcImage: | ||
| "https://images.unsplash.com/photo-1717501219781-54ac9d09051b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8fA%3D%3D", | ||
| }, | ||
| ]; | ||
|
|
||
| export function Variant1FeatureFourImages() { | ||
| const [featureOpen, setFeatureOpen] = useState<number>(0); | ||
| const [timer, setTimer] = useState<number>(0); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setTimer((prev) => prev + 10); | ||
| }, 10); | ||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (timer > 10000) { | ||
| setFeatureOpen((prev) => (prev + 1) % data.length); | ||
| setTimer(0); | ||
| } | ||
| }, [timer]); | ||
|
|
||
| return ( | ||
| <div className="container"> | ||
| <div className="text-center mb-20"> | ||
| <p className=" uppercase text-neutral-500 mb-2 text-sm font-medium"> | ||
| How does it work ? | ||
| </p> | ||
|
|
||
| <h2 className="text-3xl font-semibold tracking-tighter dark:text-neutral-300 text-neutral-800 mb-4"> | ||
| How to use the Easiest component librairy : Cuicui | ||
| </h2> | ||
| </div> | ||
| <div className=" grid grid-cols-1 md:grid-cols-2 gap-4"> | ||
| <div className="space-y-6 "> | ||
| {data.map((item, index) => ( | ||
| <button | ||
| type="button" | ||
| className="w-full" | ||
| key={item.title} | ||
| onClick={() => { | ||
| setFeatureOpen(index); | ||
| setTimer(0); | ||
| }} | ||
| > | ||
| <TextComponent | ||
| number={index + 1} | ||
| title={item.title} | ||
| content={item.content} | ||
| isOpen={featureOpen === index} | ||
| loadingWidthPercent={featureOpen === index ? timer / 100 : 0} | ||
| /> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| <div className="h-full"> | ||
| <div | ||
| className={cn( | ||
| "relative h-96 md:h-[500px] w-full rounded-lg overflow-hidden", | ||
| )} | ||
| > | ||
| {data.map((item, index) => ( | ||
| <img | ||
| key={item.title} | ||
| src={item.srcImage} | ||
| alt={item.title} | ||
| className={cn( | ||
| "rounded-lg absolute w-full object-cover transition-all duration-300 h-[500px] transform-gpu", | ||
| featureOpen === index ? "scale-100" : "scale-70", | ||
| featureOpen > index ? "translate-y-full" : "", | ||
| )} | ||
| style={{ zIndex: data.length - index }} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function TextComponent({ | ||
| number, | ||
| title, | ||
| content, | ||
| isOpen, | ||
| loadingWidthPercent, | ||
| }: Readonly<{ | ||
| number: number; | ||
| title: string; | ||
| content: string; | ||
| isOpen: boolean; | ||
| loadingWidthPercent?: number; | ||
| }>) { | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "transition-all rounded-lg transform-gpu border", | ||
| isOpen | ||
| ? "bg-gradient-to-b from-neutral-200/15 to-neutral-200/5 dark:from-neutral-600/15 dark:to-neutral-600/5 dark:border-neutral-500/15 border-neutral-500/10 dark:shadow-[2px_4px_25px_0px_rgba(248,248,248,0.06)_inset] " | ||
| : "saturate-0 opacity-50 border-transparent scale-90", | ||
| )} | ||
| > | ||
| <div className="w-full p-4 flex gap-4 items-center"> | ||
| <p | ||
| className={cn( | ||
| "inline-flex size-8 rounded-md items-center justify-center text-neutral-600 bg-neutral-500/20 shrink-0", | ||
| )} | ||
| > | ||
| {number} | ||
| </p> | ||
| <h2 | ||
| className={cn( | ||
| "text-xl font-medium dark:text-neutral-200 text-neutral-800 text-left", | ||
| )} | ||
| > | ||
| {title} | ||
| </h2> | ||
| </div> | ||
| <div | ||
| className={cn( | ||
| "overflow-hidden transition-all duration-500 text-left dark:text-neutral-400 text-neutral-600 w-full transform-gpu", | ||
| isOpen ? " max-h-64" : "max-h-0", | ||
| )} | ||
| > | ||
| <p className="p-4 text-lg">{content}</p> | ||
| <div className="w-full pb-4 px-4"> | ||
| <div className="h-1 relative rounded-full w-full overflow-hidden"> | ||
| <div | ||
| className={cn("absolute top-0 left-0 h-1 bg-neutral-500")} | ||
| style={{ width: `${loadingWidthPercent}%` }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
Oops, something went wrong.