Responsive Real Estate Landing Page using next js 14, Shadcn and tailwind | Build & Deploy

let's build a real estate website together using next gs14 Tailwind CSS and shat CL after completing the website we'll deploy it using the versal cloud platform one of the best parts of this website is that it's fully [Music] responsive let's walk through all the sections we'll be building in this video the website has a na bar that is fixed and contains logo few links and a couple of buttons below this is the hero section which has a beautiful background image with a large heading text add a paragraph below it we also have a search form which has a select drown input box a date [Music] picker add a button all of this are from Shad CN library next is the how it works section with a heading a paragraph and an image on which we have few steps that explains how the process works next is the featured property section which displays all the properties that are featured every every property has an image property name price as star rating with review counts after this we have service section with an image on the left side and heading on the right with service information next we have an about section which contains heading and a paragraph followed by two large gradient text highlighting the number of clients and total sales after this is the feedback section where we have a total of 8 feed Backs from customers with profile image Instagram handle feedback text and location followed by FAQ section with questions and answers for accordion we've used Shad CN library in this video we'll also look at how to easily integrate chat Cen with our nextg application last section is the fooo section which looks professional with some description on the left with logos and important links on the right side at the bottom we have the copyright text on the small screen we have a response you now bar with a mobile drawer that opens on clicking the menu icon all the sections are aligned properly to look good on every device in the end we'll also deploy this website on the web we'll be building this from the scratch so I hope you'll enjoy this video so let's get started let's create a folder on the desktop I'll name it real hyphen es let's drag it into the vs code 82 Now open up the terminal and head over to the nextjs website let's copy the command to install the nextjs application don't forget to mention the current working directory I want typescript yes to yes lint tail Vas Source yes app router yes customize import no this will install necessary dependencies let's run the server to check if everything is working fine okay the next year's application is set up correctly let's head over to the page. TSX file I'll delete all the and rewrite the code I'll be using rafc snippet to create components if you don't have it installed you can search under extension for es7 snippet and install it so our changes are reflecting let's delete the CSS that is being applied I'll only keep the Tailwind directors and delete rest of the code now we can see a clean page with no styling before we start coding I want you to copy the public folder which contains all the images that are required to build this page I have provided the link in the description from where you can download it I already have it so I'll simply drag it into the project folder and replace the existing public folder you can notice there are a lot of text that I've used in the project to make things easy and to avoid typing all of it I've made them available in the constant folder let's copy the constants folder and paste it under the source folder so if you open the index. TSX file you can notice all the texts like for example naar links text for hero sections and so on I want to keep all my components under a folder so let's create a new folder under Source folder and name it components we'll start with the naar first notice that we have two buttons sign in and sign up I'm making use of the Shad CN UI button here so we need to install sat CN and the button component for this we can head over to the satn website and click on the docs here go to the installation and select the next CH framework copy the init command and run it in the terminal select style as default base color as slate select yes to CSS variables we'll be using the button component from shat CN so let's also install it let's create a new file in the components folder and name it na. TSX I'll create a component naar and import it in the page. DSX file I REM the default text and add the n Bar okay so we can see the na bar text visible on the screen I'll declare a nav tag and add some styling let's add class fixed top two Z50 withd screen and padding on x-axis 4 inside this there will be a div with class container Flex item Center justify between some board radius background black and padding on y-axis 3 within this D with class Flex Flex string zero item Center and justify between let's add the logo using next image class margin right to Source will be logo.png withd 60 and the height 30 so the logo and nav bar are appearing on the screen let's display the brand name using span I'll add some styling of text M letter spacing tight and color white okay so we can now see the brand name after this let's add the links in the center I'll declare a div with class hidden and LG Flex inside this let's add a UL tag with class Flex item Center and GAP 4 let's add the now links from the constants folder you can see we have title and URL so let's look through it inside this I'll specify Alli tag with key let's create a link with class text small text White on H text color neutral 500 HF item URL and text from item. tile with this we can see the links on the screen next let's also add the sign in and sign up buttons for this I'll have a div with class hidden text small text white and lgx within this let's add the button component from Shad Cen which is available in the UI folder let's add variant as outline for first button We'll add the class of margin right to and background black text will be sign in we can now see the signin button on screen let's also add the sign up button for this I'll have a class background slate 800 and text sign up okay so we can see see the sign up button as well so our nowar is ready for the last screen now let's work on the mobile version we'll be making use of the US state to toggle the Nar so let's add use client let's import the menu and cross icon for the responsive Nar let's also import the use state from react if you look at the nabar we have a menu icon in the final version when this icon is Click we see menu icon getting replaced by the cross icon and a mobile drawer opens up with the links we need to implement this toble functionality also note that the now is fixed I'll initialize the mobile drawer open variable and set the initial value to false let's also create a toggle nabar function that toggles the value of this variable let's display the menu icon on the small screens I'm using D with class Flex column justify text white MD flex and hden on large screens inside this we'll have a button with on click if the mobile drawer open is true we show the cross icon or else menu icon something is not right we were supposed to see the menu icon it looks like menu icon is below the na bar okay I need to place this code inside the na bar by moving your to okay the icon is now placed inside the na bar and we can also see the icons changing on click now if you see the final version we have a mobile drawer with all the links so let's implement it the drawer should be visible if the mobile drawer open is true here I have a div with class rounded Corner background black and hidden on large devices inside this we'll have a UL tag with class Flex Flex column and item Center let's use the now links from the constant folder and loop through it inside this we'll have a Ali with key which will contain link with class text small text White on how color neutral 500 with hrf item URL text will be item. tile we can now see the links but we'll need some padding to match the final version I'll add class py of six this is looking better next let's add the two buttons for sign in and sign up for this I'll have a de with glass Flex item Center justify Center padding bottom eight text white add hid an on large screen inside this we'll have a button component from shat CN with variant outline for first button glass with margin right and background black let's add the sign in text we can see the first button next let's also add the second button I'll add the class background slate 800 for button and the sign up text as you can see both the buttons are showing up and it also matches the final version with this we have completed the nabar section next is the hero section and the first thing that you notice is this beautiful background image so let's work on adding it first open the global. CSS file and add the class Arrow this class will have the background image the image path will be the public folder and the file name is home. jph let's add background size cover next let's create a file under a component folder and name it hero. TSX save the file hero text is not showing up because we have not included it in the page. TSX file okay the text is now visible let's remove the default text and add a div with class hero Flex minimum height of screen item Center and justify Center we can now see the image on our page let's add another div with class Flex Max with 4 XEL Flex column item Center Gap six and padding bottom 10 inside this we'll have a div with class space y of four let's add the H1 tag with class M4 text Center text 4 XEL text white MD text 5 Exel and last text 6xl let's check the constant file for the variables that needs to be used for hero section this will be hero. tile so we can see the heading tag the final version contains a paragraph So let's add it class P4 text Center and text color slate 300 this will be hero. description okay so the paragraph is also visible on the page but notice the imagy in the final version looks different from our version for this we'll need to add the linear gradient property to our background image okay so the image is looking good but we also need to position it to match the final version for this I'll add the background position of 30% okay so this is looking better so next will be the search form this form contains a drop- down menu an input text a date picker and a button we'll be making use of shat C in library to display all these components that you see section let's head over to this atcn website and install all the components starting with the input tag copy the command open up a new terminal and paste it next is the select component s CN provides a nice looking drop- down select component so let's copy this command and install it next will be the date picker this component uses the popover and the calendar components so let's install both the components first will be the popo component next is a calendar component we'll also be using the form component which uses react hook form let's install this as well all the components that we have installed from sh CN will be visible in the UI folder okay so let's create a new component under components folder and name it search form. TSX save the file and import it in the hero component you can see the search form text on screen I'll add use client for this component next let's import use form from react hook form let's also quickly import form component import input component next import select component input format from date import calendar icon import CN import button and calendar and lastly import poo component I'll declare a form variable and initialize it to use form let's add a deal with class create with full items and GAP four rounded Corners background black small screen G columns to and on last screens grid columns 4 let's use form provide with use form variable in this I'll have form field with controlling form. control name address and render with field parameter a written statement with form item form label with class text white which says property inside this let's use the select tag select trigger a select value with placeholder okay so the select tag is visible let's add the options select content with select items this will be byy next is sell and the last is ranked okay so all the options are displayed next will be the input field let's add another form field this will return the input tag let's also add the placeholder okay both fields are visible so next let's also add date picker for this I'll head over to the s scn website I'll use the date Pier for the form let's copy all the code from form field I'll paste it here change the form label to buy sell date I'll add a class of text wi I want the button to have full width our design doesn't need a form description so we can remove it okay so with this we can see the date picker with the calendar next is to add the submit button type A submit class background slate 800 and text white this will be search okay so all the four components are visible our styling is off so let's fix it there is a typo here let's change it okay so this is looking good finally let's add some padding to match the final version date is missing here so let's add it okay everything looks good so let's move on to the next section which is called how it works here we have heading text followed by a paragraph and an image above which we have some steps mentioned as step one step two and step three so let's code this I'll create a new file under components and name it how it works save it and import it in the page. TSX file let's add class container mxr2 margin y10 border bottom and padding bottom 10 in this I'll have h2 tag with class text Center text 3 XL tracking title small device text 4XL and on large device text 5xl let's check the constants file so we have title and content this will be how it works. title so we have our header tag ready let's add the background image that you see in the final version in the global. CSS I'll simply copy the hero class and rename it to Works file name will be works and I don't need the position let's add the deal that includes the image from class Works relative height 640 pixel rounded corner and we have the image looks like I've skipped the paragraph So let's quickly add it this will be how it works do content let's also style it MX AO margin y10 Max with 4XL text Center and color neutral 800 the paragraph now looks good to add the steps I'll have a deal with class absolute left zero top zero height full overflow on y AIS Hing padding of 10 MD padding of 20 we have array of steps in constants index file so I'll look through the steps using map I de with the key add the check icon from Lucid react icons are visible but needs some styling this will be margin right four and text screen 400 next will be the H6 tag with class font medium uppercase and text color neutral to 100 this will be step. title looks like icons and text are not aligned I'll have to wrap them in a flex and item Center okay this looks better next will be a paragraph with step. text let's style the paragraphs margin on Y axis 2 Max width 80 text color neutral 300 this now matches the final version let's also check the mobile view everything is aligned and the page is looking good with this we have finished how it works section next is the feature properties section in this section you can see all the featured properties listed we have property image price of the property star rating and number of reviews on every property so let's code this section I'll create a new file featured properties. DSX let's include this in page. TSX file let's add class container MX Auto border bottom padding Y6 and padding bottom 10 let's add h2 tag with class text Center text 3 XEL tracking title small device text 4 XEL and last device text pixel text will say featured properties we have the heading text style as expected next let's create a deal with class flex and flex wrap let's head over to the constants index file and check the data for the section okay so let's look through the data I'll add a de with key index class width full on small devices width of 1 by two mid with 1x3 large devices with 1x4 inside this let's add link with class margin 2 an inline block inside this I'll have a div with some padding image with class margin bottom eight rounded corners and object cover Source will be property. image width 300 height 300 okay so all the images are showing up I'll add a de with class text Center H6 with class margin bottom five margin top two and font medium this will be property. name so the property names are visible now next we'll have a span with class margin bottom F and margin top two below this will be a de with class margin top two Flex item Center and justify Center add the star icon color will be gold I don't want strob withd add some margin next let's add span for rating and review count all right everything is styled properly and looking good let's also quickly check the mobile view everything is looking good so let's move on to the next section called Services let's create a new file called services inside this I'll have a class container mxr2 margin on y- AIS 8 border bottom and padding bottom of 10 h2 tag with class margin bot botom of 20 text Center text 3 XEL tracking title small device text 4XL and en large device text fer content is not visible I forgot to import it in the page. DSX file okay so the services text heading is visible next let's add a deal with class flex and flex WP inside this another div with full width and on large devices with 1 by two a div with some padding image with class surrounded dexel and object cover Source will be services. jph withth and height of 600 there is an error because this image should be from next JS okay so we have image so let's work on the remaining content in the section I'll declare a de with full width and on large width 1X two H2 with class margin top 10 text pixel and on large screen text 7 XL the text says we are available in 40 plus countries the fining version has some styling so let's work on that I'll add a span for available in text and add class leading snug and on last device block next let's also work on text 40 plus countries I'll add another span with class font bard the exclamation mark is missing I'll also add it okay so next will be the paragraph text the variable name is is Services _ text the text is visible but not style I'll add class max with Excel padding on y-axis 6 traction title and on large devices padding right of 20 with this Services section is ready let's also check the mobile view looks like we are missing some space okay so this is better after Services we have about section let's create a new file with name about us. TSX include it in the page. DSX file add a class with container MX Auto margin on yaxis 20 Border bottom padding bottom 10 a de with some margin bottom H to tag with margin bottom six Tex Center Tex 3 XL tracking tighter on small devices text 4 XL and on large devices text 5 Exel heading is about us after this let's add a paragraph tag with class padding on y AIS 6 text Center text large tracking title on large devices padding right of 20 let's check the constant plan okay we have the paragraph styled as needed next will be the gradient text with a divider for this I'll add a d with flex Lex wrap and text Center inside this a with class width full border color neutral 700 padding six on large device withd 1X two and border right let's add this in paragraph class background gradient to WR from purple 400 y ping 500 to purple 800 background clip text text 5xl text transparent and on large devices text set 7 XEL okay so we have this beautiful gradient text next will be a paragraph class from 2020 class my8 and font medium for green text let's add a de with class width full padding 6 and on large device withd 1X two paragraph 3,000 plus let's copy the class names from here change purple to Green remove wire black also change this to Green next let's add the properties Soul text Class M Y8 and font medium okay so the about section is ready let's also test the mobile view okay everything looks good after this we have the testimonials section this section contains six feedbacks from customers with their images name inst program handles and also the city and Country let's create a new file with name testimonials. DSX include it in the page. DSX file add a class with container MX Auto margin on yaxis 20 Border bottom and padding bottom 10 s tag with class margin bottom pry text Center text 3 XL tracking title on small device text 4 XL and on large devices text by Exel text is what our client said let's add a deal with class Flex Flex R let's look at the constant index for data sture testimonials is an array with feedback objects let's include testimonials and look through them we'll have a key with index class WID full padding to MD width 1X 2 and on large devices with 1x4 this is how feedbacks will look on different devices let's add a deal with class flex and item Center next JS image with class margin right two rounded Corner border 4 border color neutral 400 source with testimonial. image width and height will be 80 okay we can now see all the images of the users let's add the H4 tag with class full width and text this testimonial. name content is not aligned H4 should be inside this de yes looks fine let's add a span with class text small and text color neutral 600 text this testimonial histogram let's wrap it in a de so that they are arranged properly next I'll have a paragraph with some padding next is testimonial. feedback we are almost there let's also add the location paragraph with class text mode and text color neutral 400 text is testimonial. cityor country okay so we have the location but the border is not being applied it's because I've never applied a border so let's add a d and wrap all the code within it okay so we have the Border like the final version let's also test the mobile view on on the medium screen I want two testimonials to get displayed but it is not working as expected there's a typo let's fix it okay this is fixed and looking good next is the FAQ section for this I have used the accordion component from sadn library so let's head over to the saden website and install it this is the preview of the accordion let's copy the installation code and paste it in the terminal let's create a new file under components folder and name it FAQ save it and import it in the page. TSX let's import the according component also according content according item and according trigger let's add class container MX Auto my20 in this we'll have the h2 tag with class margin bottom 20 text Center text 3 excel track title small device text 4 XL and large devices Tex 5xl let's add according type will be single collapsible class of worthful accordian item with some value next will be a cording trigger with some text let's copy this line and Chas the text to answer we are getting an error this should be content still there is an error let's look at s website okay it looks like I have imported from radic let's copy and paste the correct Library okay we able to see the accordion let's copy and paste some more content all the accordion items are expanding at once this is because we have same values for all okay so this is working fine I'll remove the test code and head head over to the constants index file here we have a FAQ constant which is an array with question answer and value data let's Loop through the data using map I'll copy the cordin atem and paste it inside let's add index key the value will be FAQ do value this will be fq do question and this will be fq do answer looks like all the questions and answers are showing up it is working as expected let's also check the mobile view this looks nice with this we have also completed the apq section final section will be the footer section we have some description and icons on the left side there are three columns on the right for buy sell and rent and a copyright text at the bottom let's also look at the mobile view here we have two columns and on small screen we have single column I'll create a new file called footer. TSX and import it in the page. TSX file let's add class background black text white and padding on y-axis 20 inside this is a deal with class container and ax Auto another div with class Flex Lex wrap border bottom border neutral 700 let's have a de with width full or small screen width 1x2 large screen width 6x 12 and some padding in this uh h2 tag let's refer constants index file for constant here we have photo variable with description copyright text and categories I'll add a paragraph for photo description let's also style it on last screen Max width is small padding on y- axis is eight Tex small okay this is looking better let's add the icons I use a d with class Flex Flex wrap Gap 4 margin on Y axis 10 let's use the icons from Lucid react first is Facebook icon second is Instagram icon GitHub icon and Twitter icon all the icons are showing up next will be the links on the right side I look through the categories array let's declare a deal with key index with full small screen withd 1 by two large screen withd 2 by 12 and pading H3 with class font semi Bolt uppercase and padding bottle for let's look at the key name it's category. name the three headings are showing up inside this I'll have a UL tag for links let's look through the links we'll have link with HF link. URL class text small on how text neutral 500 this will be link. title all the links are showing up hasper design let's check the mobile view everything looks good now the only thing remaining is the copyright text let's add paragraph tag with padding text Center text small and text neutral 500 let's check the key name this will be footer. copyright the copyright text is visible and is looking good so with this we have finished the entire website let's look at the entire site to see if we are missing anything let's also check response riew everything looks good so the next step is to deploy the site before deploying let's commit our code to GitHub repository let's run get init command get add all changes commit the code head over to the GitHub site and create a new repository I'll name the repository real estate click on the create repository button let's copy the remote command next is the git Branch command lastly push the code I'll be using worel platform for deployment I'm using the free plan to deploy my code once you login you'll get an option to create a new project latest repository is the one I want to deploy so I'll import it let's click on the deploy button to deploy the code once it is successful you'll see the congratulations message with this our code is deployed on versel successfully I hope you have enjoyed watching this video don't forget to like subscribe and hit the Bell IC icon for more exciting videos take care

Channel: compiletab

Views: 1,864

Keywords:

Id: 7Lr9vvdlPhg

Length: 78min 29sec (4709 seconds)

Published: Tue Mar 19 2024