How to Use the Downloaded Component

Thank you for downloading our component! Follow these simple steps to add the component to your project:

Step 1: Download the Component

1. Download the .zip file containing the TypeScript (.tsx) component.

2. Locate the .zip file in your downloads folder.

Step 2: Extract the Files

1. Right-click on the downloaded .zip file and select Extract All or a similar option, depending on your operating system.

2. Once extracted, you’ll see the .tsx file (and potentially related files like styles or assets).

Step 3: Add the Component to Your Project

1. Open your website project in Visual Studio Code.

2. Locate your components folder within your project structure. This is where reusable components are typically stored.

   • Example folder path: src/components or app/components.

3. Drag and drop the extracted .tsx file from your file explorer into the components folder in Visual Studio Code.

Step 4: Import the Component

To use the new component in your project:

1. Open the file where you want to include the new component (e.g., Home.tsx).

2. Add an import statement at the top of the file to reference the component.

Example:

3. Use the component in your JSX/TSX structure:

Example:

export default function Home() {
  return (
    <div>
      <HeroComponentOne />
    </div>

Best Practices

• Check for Dependencies: Ensure you’ve installed any necessary libraries (e.g., framer-motion, next/image) that the component might depend on. Use npm install or yarn add to install missing packages.

• Customize: Once the component is added, feel free to edit the text, images, or styles to match your branding. Refer to the comments in the .tsx file for guidance.

• Test Your Changes: Run your project locally using npm run dev (or the equivalent command) to confirm that the component integrates smoothly.

What to Do if You Encounter Issues

• Double-check that the component is in the correct folder.

• Verify that all necessary dependencies are installed.

• Review your import path to ensure it matches your project structure.

By following these steps, you can quickly integrate the new component into your project and make it your own. Happy coding!

Changing the content


Step 1: Changing the Text Copy

To edit the text displayed in the Hero Section, locate the following code snippet:

<Display as="h1" dark className="text-5xl sm:text-6xl md:text-7xl font-extrabold leading-tight">
  Saepe officia aliquid inventore tempore
</Display>
<Body1 dark className="text-lg sm:text-xl mt-6 max-w-2xl mx-auto">
  Laudantium quibusdam dolorum libero facere iure, quis molestias dolore quod inventore expedita?
</Body1>

• Update the Heading (<h1>): Replace Saepe officia aliquid inventore tempore with your own headline text.

• Update the Paragraph: Replace Laudantium quibusdam dolorum libero facere iure... with a brief, compelling description about your app or service.

Example:

<Display as="h1" dark className="text-5xl sm:text-6xl md:text-7xl font-extrabold leading-tight">
  Welcome to Our Creative Hub
</Display>
<Body1 dark className="text-lg sm:text-xl mt-6 max-w-2xl mx-auto">
  Discover talented individuals who can bring your ideas to life. From design to videography, we have you covered.
</Body1>

Step 2: Editing the Button Text and Link

Locate the button code:

<Button variant="solid" color="neutral" href="#" className='w-fit mx-auto'>
  Explore Now
</Button>

• Update the Button Text: Change Explore Now to your desired text (e.g., Learn More or Get Started).

• Update the Link (href): Replace "#" with the URL you want the button to redirect to.

Example:

<Button variant="solid" color="neutral" href="/about" className='w-fit mx-auto'>
  Learn More
</Button>

Step 3: Updating the Array for Custom Images

The array cardsData contains all the data for the scrolling cards, including images, names, titles, tags, and alt text. Here’s an example of one item:

{
  name: 'Lauren Sutcliffe',
  title: 'Illustrator',
  tags: ['Graphic Design', 'Illustration']

• Update name: Change the name to the individual or company name.

• Update title: Replace the title with the role or specialty.

• Update tags: Modify the array to reflect relevant skills or specialties. For example: tags: ['Web Development', 'React'].

• Update imageSrc: Replace the URL with a link to your image (from an external source like Unsplash or your project's public folder).

  • If you’re using your own image, save it in your project folder (e.g., public/images/) and reference it: imageSrc: '/images/your-image.jpg'.

• Update alt: Write a short, descriptive text for the image. This is good for accessibility and SEO.

Example of a Custom Card:

{
  name: 'Jane Doe',
  title: 'Web Developer',
  tags: ['Frontend', 'React', 'Next.js']

Step 4: Best Practices for Updating the Array

1. Consistency: Ensure all fields (name, title, tags, imageSrc, alt) are updated for each entry. This ensures consistency across the UI.

2. Alt Text: Always provide a meaningful alt text for images. For example, alt: 'John Smith - Graphic Designer' is better than alt: 'Placeholder image'.

3. File Naming: Use descriptive names for locally stored images (e.g., jane-doe.jpg instead of image1.jpg).

Step 5: Testing Your Changes

1. Preview Locally: Run your app with npm run dev and view the changes in your browser.

2. Check Accessibility: Verify that all alt text descriptions are accurate by using a screen reader or accessibility tools.

3. Ensure Responsive Design: Resize your browser to ensure the content looks good on all screen sizes.