Skip to content

Add Hero section#18

Merged
AmirHosseinKarimi merged 17 commits intodevfrom
hero
Feb 16, 2025
Merged

Add Hero section#18
AmirHosseinKarimi merged 17 commits intodevfrom
hero

Conversation

@MahdiGhorbani98
Copy link
Collaborator

@MahdiGhorbani98 MahdiGhorbani98 commented Feb 11, 2025

I've added the Hero section, load Hero SVGs by components to load faster with better UX.
I installed @radix-ui/react-slot for button component.

@netlify
Copy link

netlify bot commented Feb 11, 2025 •
edited
Loading

✅ Deploy Preview for fc-nextjs ready!

Name Link
🔨 Latest commit 8f0d944
🔍 Latest deploy log https://app.netlify.com/sites/fc-nextjs/deploys/67b1d4f0823286000825f78e
😎 Deploy Preview https://deploy-preview-18--fc-nextjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions
Copy link

github-actions bot commented Feb 11, 2025

✨ Features

0de7e93 - add Hero component

Changed files

  • src/app/components/Hero/Hero.tsx
  • src/app/page.tsx
941ad68 - implement Hero component with new layout and SVG elements

Changed files

  • src/app/components/Hero/Hero.tsx
c75bc74 - add HeroContent component with layout and interactive elements

Changed files

  • src/app/components/Hero/HeroContent.tsx
d0a7b4f - add bg SVGs to hero section

Changed files

  • src/app/components/Hero/HeroSVG.tsx
  • src/app/components/Hero/HeroTechSVG.tsx
3605da3 - add badge & button components

Changed files

  • src/components/ui/badge.tsx
  • src/components/ui/button.tsx
a4f218e - add border-gradient css for hero btn

Changed files

  • src/app/globals.css

📋 Changes

f47d8ab - Merge branch 'dev' into hero
8d81f1e - build:install @radix-ui/react-slot for button component

Changed files

  • package.json
  • pnpm-lock.yaml

@AmirHosseinKarimi
Copy link
Member

AmirHosseinKarimi commented Feb 12, 2025

image

فضای جایگیری المان‌های کنار صفحه درست نیست.
ممکنه تو رزولوشن خاصی درست باشه ولی ریسپانسیو نیست.

Browser metadata 
Path:      /
Browser:   Firefox 134.0 on Linux x86_64
Viewport:  2560 x 1295 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

@AmirHosseinKarimi
Copy link
Member

AmirHosseinKarimi commented Feb 12, 2025

image

عرض کره تو رزولوشن بالا درست نیست و full-width نمیشه

Browser metadata 
Path:      /
Browser:   Firefox 134.0 on Linux x86_64
Viewport:  2560 x 1295 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

@AmirHosseinKarimi
Copy link
Member

AmirHosseinKarimi commented Feb 12, 2025

image

استایل دکمه‌ها درست نیست
هم نمایش حالت normal و هم hover

هر دو دکمه باید لینک باشه

Browser metadata 
Path:      /
Browser:   Firefox 134.0 on Linux x86_64
Viewport:  2560 x 1295 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi
AmirHosseinKarimi requested changes Feb 12, 2025
View reviewed changes
Copy link
Member

@AmirHosseinKarimi AmirHosseinKarimi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

خسته نباشی مهدی جان لطفا موارد ذکر شده رو اصلاح کن

src/app/components/Hero/Hero.tsx Outdated

const Hero = () => {
return (
<div className="relative min-h-screen w-full overflow-hidden bg-background px-4 pb-[500px] text-foreground dark:bg-background-dark dark:text-foreground-dark md:px-8">
Copy link
Member

@AmirHosseinKarimi AmirHosseinKarimi Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

کلاس‌های min-h-screen و pb-[500px] اضافیه

Copy link
Collaborator Author

@MahdiGhorbani98 MahdiGhorbani98 Feb 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

درسته ممنون
فقط برای این که اون کره را کامل بتونم نمایش بدم باید یک پدینگ به المنت پرنت اضافه میکردم

src/app/components/Hero/Hero.tsx Outdated
Comment on lines 10 to 15
<div className="absolute -left-[26%] -top-[150px] z-10 hidden items-center justify-center xl:flex min-[1440px]:-left-[22%] 2xl:-left-[18%]">
<HeroLeftTech />
</div>
<div className="absolute -right-[30%] -top-[150px] z-10 hidden items-center justify-center xl:flex min-[1440px]:-right-[25%] 2xl:-right-[21.5%]">
<HeroRightTech />
</div>
Copy link
Member

@AmirHosseinKarimi AmirHosseinKarimi Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

مختصات ریسپانسیو نیست.
حتی میشه بدون position absolute و با transform: translate هم خروجی مناسب رو گرفت.

@AmirHosseinKarimi AmirHosseinKarimi force-pushed the dev branch 3 times, most recently from 6412e1f to a9beae7 Compare February 14, 2025 11:34
@MahdiGhorbani98 MahdiGhorbani98 self-assigned this Feb 15, 2025
@MahdiGhorbani98
Copy link
Collaborator Author

MahdiGhorbani98 commented Feb 15, 2025

I've addressed the review comments. Please re-review.

@AmirHosseinKarimi AmirHosseinKarimi merged commit 687e1dd into dev Feb 16, 2025
4 checks passed
@AmirHosseinKarimi AmirHosseinKarimi deleted the hero branch February 16, 2025 12:12
@AmirHosseinKarimi
Copy link
Member

AmirHosseinKarimi commented Feb 16, 2025

@all-contributors add @MahdiGhorbani98 as contributor for his code.

@allcontributors allcontributors bot mentioned this pull request Feb 16, 2025
Merged
@allcontributors
Copy link
Contributor

allcontributors bot commented Feb 16, 2025

@AmirHosseinKarimi

I've put up a pull request to add @MahdiGhorbani98! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AmirHosseinKarimi AmirHosseinKarimi AmirHosseinKarimi left review comments

Assignees

@MahdiGhorbani98 MahdiGhorbani98

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@MahdiGhorbani98 @AmirHosseinKarimi