Website Project (Lesson 5)

Time to take everything you learned in this chapter into practice. Let’s bring the website we designed in Figma to life!

Be sure to open the "Website Project - ShadcnDesign Academy" file you worked on previously.

For this lesson we recommend using Cursor - the built-in AI Agent will help you with more complex tasks. You can learn more about Cursor and how to set in up in the official documentation.

Part 1. Installation

Task 1. Install shadcn/ui

Install shadcn/ui: npx shadcn@latest init
Name your project ‘shadcndesign-academy-project’.
Change directory to your newly installed project: cd shadcndesign-academy-project
Install all shadcn/ui components: npx shadcn@latest add

Task 2. Set up Pro Blocks, styles and assets

Install Pro Blocks styles: npx shadcn@latest add https://pro-blocks-v4.vercel.app/r/pro-blocks-styles.json
Install Pro Blocks used in the Homepage with the Figma to shadcn/ui plugin.
Import styles with the plugin.
Install styles with the CLI in your project.
Save the logo and images you downloaded in the previous lesson in your project’s public folder.
Run the project: npm run dev

Part 2. Component adjustments

In this part, we will adjust our styling and components to match our design in Figma. Each task has the prompt that you can use in Cursor AI Agent to make your work faster.

Task 1. Importing fonts

Import the IBM Plex Sans and IBM Plex Serif fonts into layout.tsx.

Import IBM Plex Sans and IBM Plex Serif into layout.tsx file.
Make sure to include font weights.
For IBM Plex Sans: 400, 500, 600
For IBM Plex Serif: 500

Task 2. Importing homepage blocks

Import Pro Blocks to app/page.tsx in the order we have in Figma.

Import the components from the pro-blocks folder into app/page.tsx and place them in the following order.

- LP Navbar / 1.
- Hero Section / 2.
- Feature Section / 14.
- Testimonials Section / 2.
- Feature Section / 13.
- Blog Section / 3.
- FAQ Section / 4.
- CTA Section / 2.
- Footer / 3.

Task 3. Changing text in Pro Blocks

Change the text in Pro Blocks to match the design in Figma.

Change the text in the pro blocks components following the text below:

**Section: Pro Blocks / LP Navbar / 1.**

BUTTON: Features  
BUTTON: Blog  
BUTTON: FAQ  
BUTTON: Pricing  
BUTTON: Contact  
BUTTON: Get started  

---

**Section: Pro Blocks / Hero Section / 2.**

HEADING: Invest Smarter with AI  
TEXT: Automate your ETF investments with cutting-edge AI technology. Maximize your returns effortlessly.  
LIST ITEM: Analyze market trends in real-time  
LIST ITEM: Adjust your portfolio for optimal performance  
LIST ITEM: User-friendly experience that simplifies ETF investing  
BUTTON PRIMARY: Get started  
BUTTON SECONDARY: (HIDDEN)

---

**Section: Pro Blocks / Feature Section / 14.**

HEADING: AI-Driven ETF Investments  
TEXT: Our AI analyzes market trends to optimize your portfolio, ensuring the best possible returns with minimal effort.  
CARD HEADING: Smart Portfolio Management  
TEXT: AI continuously monitors and adjusts your ETF investments for optimal performance.  
CARD HEADING: Risk Management  
TEXT: Advanced algorithms assess risk levels to protect your ETF investments.  
CARD HEADING: Transparent Reporting  
TEXT: Get detailed insights and reports on your investment performance anytime.  

---

**Section: Pro Blocks / Testimonials Section / 2.**

TESTIMONIAL: Switching to this AI investment platform was the best decision I made for my portfolio. The automated insights have consistently outperformed my previous strategies, and I love the peace of mind it provides.  
AUTHOR: Jamie Dowson  
POSITION: Professional Investor  
TESTIMONIAL: The level of personalization and efficiency this platform offers is unparalleled. I've seen significant growth in my investments, and the seamless integration with my tools makes managing my portfolio easy.  
AUTHOR: Sandra Miller  
POSITION: Founder at Schwindel Inc.  

---

**Section: Pro Blocks / Feature Section / 13.**

HEADING: Empowering Your Investment Success  
TEXT: Our AI-driven solution transforms your investment strategy, addressing key challenges and unlocking growth potential.  
ITEM 1 TITLE: Automated Efficiency  
ITEM 1 TEXT: Our AI handles the complexities of investment management, allowing you to automate routine tasks and focus on your financial goals.  
ITEM 2 TITLE: Personalized Insights  
ITEM 2 TEXT: Our AI analyzes your preferences and risk tolerance to provide insights that align with your financial objectives, helping you make informed decisions.  
ITEM 3 TITLE: Seamless Integration  
ITEM 3 TEXT: Effortlessly connect our platform with your existing financial tools and investment accounts.  
ITEM 4 TITLE: Continuous Improvement  
ITEM 4 TEXT: Our AI learns from market trends and your investment patterns, adapting strategies to enhance performance.  
ITEM 5 TITLE: Robust Risk Management  
ITEM 5 TEXT: Our AI evaluates market volatility and adjusts your portfolio to minimize exposure, ensuring a balanced approach to growth and security.  
ITEM 6 TITLE: Transparent Reporting  
ITEM 6 TEXT: Access detailed reports and analytics. Our platform provides clear, concise data, empowering you to make decisions with confidence and clarity.  

---

**Section: Pro Blocks / Blog Section / 3.**

HEADING: Insights to Elevate Your Investing  
TEXT: Stay informed with our expert insights and tips on maximizing your investment potential and grow your portfolio.  
CARD 1 HEADING: Getting Started with AI Investing: A Complete Guide  
CARD 1 TEXT: Learn how to harness investing with AI for smarter and faster investment decisions.  
CARD 2 HEADING: Building a Resilient Portfolio with ETFs  
CARD 2 TEXT: Discover strategies to diversify and strengthen your ETF investments.  
CARD 3 HEADING: Mastering Market Trends with AI  
CARD 3 TEXT: Master the market trends with AI and unlock the power of AI to stay ahead in the market.  

---

**Section: Pro Blocks / FAQ Section / 4.**

HEADING: Frequently Asked Questions  
TEXT: We've compiled the most important information to help you get the most out of your experience. Can't find what you're looking for? Contact us.  
Q1: How does the AI adjust my portfolio?  
A1: The AI continually evaluates and fine-tunes your investment portfolio by leveraging predictive analytics and machine learning algorithms to optimize asset allocation based on emerging market dynamics.  
Q2: Is this platform suitable for beginners?  
A2: Yes, our platform features a guided onboarding process, interactive tutorials, and personalized recommendations to ensure that novice investors can navigate their investment journey confidently.  
Q3: How secure is my investment?  
A3: We utilize state-of-the-art cybersecurity measures, including multi-factor authentication and secure data encryption, to safeguard your assets and sensitive information from unauthorized access.  
Q4: Can I customize my investment strategy?  
A4: Certainly, you can define specific investment themes or ethical criteria that the AI will incorporate into its decision-making, thus tailoring your portfolio to reflect your unique preferences.  
Q5: What kind of support is available to users?  
A5: Our platform offers a dedicated support team, live chat assistance, and an extensive help center filled with articles and FAQs to help users troubleshoot issues and enhance their investing experience.  

---

**Section: Pro Blocks / CTA Section / 2.**

HEADING: Power-up Your Financial Future with AI  
BUTTON PRIMARY: Get started  
BUTTON SECONDARY: (HIDDEN)

---

**Section: Pro Blocks / Footer / 3.**

LINK: Features  
LINK: Blog  
LINK: FAQ  
LINK: Pricing  
LINK: Contact 
-
TEXT: Copyright 2048 © Veridian Inc.  
LINK: Privacy Policy  
LINK: Terms of Service  
LINK: Cookies Settings

Task 4. Replacing logo

Replace code in the Logo.tsx component with the ‘Veridian Logo.svg’ SVG code from the public folder.

Replace the code in the Logo.tsx component with the ‘Veridian Logo.svg’ SVG code from the public folder.

Task 5. Replacing images

Replace placeholder images in each Pro Block with the proper images from the public folder.

Replace placeholder images in each Pro Block with the proper images from the public folder. Make sure to add proper alt descriptions.

Task 6. Component changes

Make changes in Button, Input and Textarea to match design in Figma.

Button component

Navigate to the components/ui/button.tsx page
Change the button’s height variable from ⁠h-9 to ⁠h-11.
Change the button’s radius variable from ⁠rounded-md to ⁠rounded-xs.

Input component

Navigate to the components/ui/input.tsx page.
Change the input’s height variable from ⁠h-9 to ⁠h-11.
Change the input’s border radius from ⁠rounded-md to ⁠rounded-xs.

Textarea component

Navigate to the components/ui/textarea.tsx page.
Change the textarea’s border radius from ⁠rounded-md to ⁠rounded-xs.

Make changes in components in the ui folder.

components/ui/button.tsx
1. Change the button’s height variable from ⁠h-9 to ⁠h-11.
2. Change the button’s radius variable from ⁠rounded-md to ⁠rounded-xs.

components/ui/input.tsx
1. Change the input’s height variable from ⁠h-9 to ⁠h-11.
2. Change the input’s border radius from ⁠rounded-md to ⁠rounded-xs.

components/ui/textarea.tsx
Change the textarea’s border radius from ⁠rounded-md to ⁠rounded-xs.

Task 7. Pro Blocks changes

Make changes in Pro Blocks to match the design in Figma.

Make changes in the following Pro Blocks:

  hero-section-2.tsx
  - Remove the section-padding-y class
  - Add the pt-16 lg:pt-0 class
  - Set the Aspect Ratio component ratio from 1 / 1 to 3 / 4.
  - Set the Aspect Ratio component’s border radius to 0.
  - Change the background color from background to secondary.
  - Change the Heading and List Items text color from foreground to white.
  - Change the Paragraph text color from foreground-muted to white/80.

  testimonials-section-2.tsx
  - Change the background color from background to muted.
  - Add the font-serif class to the quotes
  - Add the italic class to the quotes.

  blog-section-3.tsx
  - Change the background color from background to muted.

  cta-section-4.tsx
  - Change the background color from background to primary-muted
  - Change the primary button’s background color to primary.
  - Change the button’s text color to primary-foreground.

Summary

That's it! At this point, our homepage has the structure and styling from Figma. Now you can check if all content, images and sections display properly - if not, ask AI agent to make necessary fixes.

You can now follow this process to build Contact and Pricing pages you designed in the previous practice lesson.

Congratulations!

Congratulations on mastering skills that empower you to design and build effortlessly within the shadcn/ui ecosystem! Our course will continue to evolve as we add more features. If you feel something is missing or you have additional questions, please don't hesitate to contact us via email. We would love to hear your thoughts.

Happy designing and coding!

Up next