🌲 feat: update hero advanced (#35)

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/components/HomepageHero/Section.tsx

@@ -4,27 +4,41 @@ import { MotionWrapperFadeIn, MotionWrapperFlash } from '@/components/MotionWrap
 
 interface Props {
   title?: string
+  titleProps?: Partial<React.ComponentProps<typeof MotionWrapperFlash>>
   description?: string
   children?: ReactNode
   className?: string
+  tallPaddingY?: boolean
 }
 
 export const Section = (props: Props) => {
-  const { className, title, description, children } = props
+  const {
+    className,
+    titleProps,
+    title,
+    description,
+    children,
+    tallPaddingY = false,
+  } = props
   return (
     <section className={cn(
       'flex flex-col items-center justify-center px-6',
       className,
     )}
     >
-      <MotionWrapperFlash>
+      <MotionWrapperFlash
+        {
+          ...titleProps
+        }
+      >
         <h2 className={cn(
           'relative',
           'text-center font-semibold',
           'bg-clip-text text-transparent bg-gradient-to-b',
           'text-3xl md:text-5xl md:leading-tight pt-4',
           'from-neutral-700 to-black',
           'dark:from-neutral-800 dark:to-white',
+          `${tallPaddingY ? 'pt-20 pb-10' : ''}`,
         )}
         >
           <span>{ title }</span>

src/components/HomepageHero/index.tsx

@@ -1,5 +1,7 @@
 import Marquee from 'react-fast-marquee'
 import { useTheme } from 'nextra-theme-docs'
+import { useMemo } from 'react'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion'
 import { SetupHero } from './Setup'
 import { Section } from './Section'
 import { HoverEffect } from '@/components/ui/card-hover-effect'
@@ -29,9 +31,30 @@ export default function HomepageHero() {
   const { t } = useLocale()
 
   const featureList = t('featureList')
+  const faqs = t('faqs')
 
   const { resolvedTheme } = useTheme()
 
+  const processedFeatureList = useMemo(() => {
+    const icons = [
+      'icon-[material-symbols--rocket-launch-outline]',
+      'icon-[icon-park-outline--international]',
+      'icon-[nonicons--typescript-16]',
+      'icon-[carbon--face-satisfied] hover:icon-[carbon--face-wink]',
+      'icon-[teenyicons--tailwind-outline]',
+      'icon-[tabler--calendar-code]',
+      'icon-[carbon--color-palette]',
+      'icon-[carbon--ibm-cloud-transit-gateway]',
+      'icon-[carbon--flash]',
+    ]
+    return featureList.map((item, index) => {
+      return {
+        ...item,
+        icon: <span className={icons[index] || icons[0]}></span>,
+      }
+    })
+  }, [featureList])
+
   return (
     <>
       <PanelParticles />
@@ -53,6 +76,9 @@ export default function HomepageHero() {
       <div className="relative z-[1] pb-10 md:pb-[100px]">
         <Section
           title="Tech Stack"
+          titleProps={{
+            disabledAnimation: false,
+          }}
         >
           <div className="flex justify-center w-full max-w-7xl h-[80px] my-[30px]">
             <Marquee
@@ -79,12 +105,36 @@ export default function HomepageHero() {
         </Section>
         <Section
           title="Features"
-          description="Provides a starter for Next.js with Nextra, featuring Tailwind CSS, Framer Motion, and Shadcn UI components."
+          description={t('featuresDesc')}
         >
           <div className="flex justify-center w-full max-w-7xl">
-            <HoverEffect items={featureList} />
+            <HoverEffect items={processedFeatureList} />
           </div>
         </Section>
+        <Section
+          title="Frequently Asked Questions"
+          tallPaddingY
+        >
+          <Accordion
+            type="single"
+            collapsible
+            className="w-full max-w-5xl"
+          >
+            {
+              faqs.map((faqItem, index) => (
+                <AccordionItem
+                  value={faqItem.question}
+                  key={index}
+                >
+                  <AccordionTrigger>{faqItem.question}</AccordionTrigger>
+                  <AccordionContent>
+                    {faqItem.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))
+            }
+          </Accordion>
+        </Section>
       </div>
     </>
   )

src/components/MotionWrapper/Flash.tsx

@@ -3,17 +3,29 @@ import { motion } from 'framer-motion'
 
 interface Props {
   className?: string
+  disabledAnimation?: boolean
   disabledHover?: boolean
   children: ReactNode
 }
 
 export const MotionWrapperFlash: React.FC<Props> = (props) => {
-  const { disabledHover = false, children, className } = props
+  const {
+    disabledAnimation = true,
+    disabledHover = false,
+    children,
+    className,
+  } = props
+
+  if (disabledAnimation) {
+    return children
+  }
+
   return (
     <motion.span
       className={className}
       initial={{ opacity: 0, scale: 0.8, rotate: -20 }}
       animate={{ opacity: 1, scale: 1, rotate: 0 }}
+
       whileHover={
         !disabledHover
           ? {