In this practice lesson we will build our website with Pro Blocks. We will also make some adjustments to match Pro Blocks with our overall styling and make the design more interesting.
Be sure to open the "Website Project - ShadcnDesign Academy" file you created in the Website Project (Lesson 1) .
Tasks Task 1. Custom variables Let’s make a small change to our custom variables so our titles use serif font family and medium font weight and let’s make a small change to section padding so there is more breathing space.
Open the variables panel. Go to ‘4. Custom’ collection. Change the section-padding-y value to spacing/32 for Desktop. Change the font-family in add headings from font-sans to font-serif in Desktop and Mobile modes. Change the font-weight in add headings to font-weight/medium in Desktop and Mobile modes. Task 2. Homepage structure and content Create a new page in our "Website Project - ShadcnDesign Academy" Figma file. Rename it to ‘Website Design’. In the newly created page, create a frame and rename it to ‘Homepage’. Add an auto layout to the newly created frame. Make sure it has vertical layout, 0 padding, 0 spacing and background color set to background variable. Add Pro Blocks to the Homepage frame, in the following order:Pro Blocks / LP Navbar / 1. Pro Blocks / Hero Section / 2. Pro Blocks / Feature Section / 14. Pro Blocks / Testimonials Section / 2. Pro Blocks / Feature Section / 13. Pro Blocks / Blog Section / 3. Pro Blocks / FAQ Section / 4. Pro Blocks / CTA Section / 2. Pro Blocks / Footer / 3. Make the changes to the Pro Blocks content.Hide Taglines in all Pro Blocks in Pro Blocks / Section Title. We won’t use Taglines for this project. Replace the text in the Pro Blocks following the content below.
**Section: Pro Blocks / LP Navbar / 1.**
BUTTON: Features
BUTTON: Blog
BUTTON: FAQ
BUTTON: Pricing
BUTTON: Contact
BUTTON PRIMARY: 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 3. Pro Blocks customization Let’s make some visual changes to our blocks to make them align with our styling.
Edit the Pro Blocks / Hero Section / 2 as instructed below.Set the vertical padding of this section to 0. Set the Aspect Ratio component from 1:1 to 3:4. Set the Aspect Ratio component’s border radius to 0. Change the background fill color from background to secondary. Change the Heading and List Items color from foreground to white. Change the Paragraph color from foreground-muted to white and change it’s opacity to opacity-80 in the Appearance panel. Edit the Pro Blocks / Testimonials Section / 2 as instructed below.Change the background fill color from background to muted. Select both testimonial quotes and unlink their text styles. Change the font family from font-sans to font-serif variable Unlink the font weight and change it to Italic option. Edit the Pro Blocks / Blog Section / 3 as instructed below.Change the background fill color from background to muted. Edit the Pro Blocks / CTA Section / 2 as instructed below.Change the background fill color from primary to primary-muted variable we created in the Website Project - Practice Lesson 2 . Delete the button - Learn more Select the button - Get started. Change the button’s background fill color to primary variable. Change the button’s text color to primary-foreground variable. Task 4. Adding visual assets Let’s finish up by adding images and logo to our design.
Download the assets package and unzip it. Drop all assets into your Figma file. Select the Logo and make it a component. Add auto layout to the Veridian Logo component. Select the ShadcnDesign Logo component in Pro Blocks / LP Navbar / 1. Replace it with the new Veridian logo in the Swap instance panel and in the Auto Layout panel, set the width to Hug. Replace the images in the Aspect Ratio components with the new assets you added. Task 5. Adding mobile breakpoint Make sure all Pro Blocks have the width set to Fill. Duplicate the Homepage frame. Rename it to “Homepage - Mobile”. Select each Pro Block one by one and set it Breakpoint property to Mobile. In the CTA section, make sure to set the Button Background color and Text color to proper variables because they may reset.Change the button’s background fill color to primary variable. Change the button’s text color to primary-foreground variable. Set the frame width to 360px. Task 6. Contact Page Duplicate the Homepage and create a contact page with the following pro blocks.Pro Blocks / LP Navbar / 1. Pro Blocks / Contact Section / 4. Pro Blocks / FAQ Section / 4. Pro Blocks / CTA Section / 2. Pro Blocks / Footer / 3. Create the mobile version. Task 7. Pricing Page Duplicate the Homepage and create a contact page with the following blocks.Pro Blocks / LP Navbar / 1. Custom Pricing Section we created in this chapter's lesson . Pro Blocks / FAQ Section / 4. Pro Blocks / Footer / 3. Create the mobile version.