Superfood

Superfood - the site of a Ukrainian company that offers superfoods for your health. It is built with Next.js, Tailwind CSS, TypeScript — a powerful and modern stack that provides scalability, performance, and ease of maintenance. The synergy between these technologies enables fast development, an excellent developer experience, and flexibility in content management and presentations.

Link to design layout

Table of Contents

1. Features
2. Getting Started
3. Technologies
4. Components API

Features

• Next.js offers server-side rendering and static site generation, ensuring fast and SEO-friendly pages.

• Next.js provides a simple and intuitive routing system, making navigation within your application simple.

• Tailwind CSS promotes a utility-first approach for quick and customized styling.

• TypeScript provides static typing for enhanced code quality and maintainability.

• Sanity's headless CMS allows for flexible content management and real-time collaboration.

Getting Started

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/SoftRyzen-internship/superfood.git

# Go into the repository
$ cd superfood

# Install dependencies
$ npm install

# Run the app
$ npm run dev

Note If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Components API

Show

• Logo

Prop	Default	Description
path	--	required, header or footer and styled is changing
className	""	optinal, string add tailwind styles

• ScrollLink

Prop	Default	Description
label	--	required, string button's text
href	--	required, string path to page or name of id section for scroll, examples 'policy' or '#sectionId'
variant	--	required, string 'primary', 'secondary', 'primary2' see UiKIt (Buttons), 'navlink' for NavBar (desktop, mobile), "policy" for policy page;
className	""	optinal, string add tailwind styles

• Button

Prop	Default	Description
label	--	required, string button's text
variant	--	required, string 'primary' see UiKIt (Buttons), 'readmore' for comments button;
type	button	optinal, string 'button''submit'
onCLick	undefined	optinal, () => void , add the function
className	""	optinal, string add tailwind styles

• Modal

Prop	Default	Description
children	--	optional, ReactNode content of the modal window with own styles
isOpen	--	required, boolean - current state of modal
close	undefined	required, () => void, add the function for closeModal
variant	--	required, string "comments" - for comments modal, "burger" - for burgerMenu, "simple" - for other modals
className	""	optinal, string add tailwind styles

• ProductAction

Prop	Default	Description
data	menu	Taka data productAction with massive 🆔 number, action: string

• Telephones

Prop	Default	Description
path	--	required, contacts or footer and styled is changing
className	""	optinal, string add tailwind styles

• CardsBenefits

Prop	Default	Description
icon	--	JSX.Elementand show icons
text	---	string, text can change in data
id	---	number, text can change in data

• SocialMedia

Prop	Default	Description
section	menu	required, menu, contacts or footer
className	--	optinal, string add tailwind styles

• ProductCard

Prop	Default	Description
img	-	required, string, image url
imgBg	-	required, beans, wheat, vegetables, corn, or seaweed
alt	-	required, string, image description
name	-	required, string, product name
descriptionItems	-	required, string,product description
link	-	required, string, link to product page
buttonText	-	required, string, text for button

• ProductPreference

Prop	Default	Description
data	menu	Taka data productPreference with massive 🆔 number, preference: string

Technologies

• 
• 
• 
• 
• 
• 
•